Technologie

Wie kann ich den Verlauf der umgerechneten Beträge anzeigen?

Melden
  1. Grundidee
  2. Speichern der umgerechneten Beträge
  3. Visualisierung des Verlaufs
  4. Beispiel einer einfachen Implementierung in JavaScript und HTML
  5. Erweiterungsmöglichkeiten
  6. Zusammenfassung

Grundidee

Um den Verlauf der umgerechneten Beträge anzuzeigen, musst du die einzelnen Umrechnungen speichern und diese Daten dann in einer übersichtlichen Form darstellen. Dies ist besonders wichtig, wenn du Wechselkurse oder andere Umrechnungsfaktoren veränderst und nachvollziehen möchtest, wie sich die Beträge über die Zeit entwickelt haben.

Speichern der umgerechneten Beträge

Zunächst benötigst du eine Datenstruktur, in der die umgerechneten Beträge mit einem Zeitstempel oder einer Reihenfolge abgespeichert werden. Dazu kannst du beispielsweise ein Array oder eine Datenbank verwenden. In einer einfachen Webanwendung mit JavaScript bietet sich ein Array an, in das nach jeder Umrechnung ein Objekt mit dem Originalbetrag, dem umgerechneten Wert, dem Zeitpunkt der Umrechnung und eventuell dem verwendeten Wechselkurs eingetragen wird.

Visualisierung des Verlaufs

Um den Verlauf anschaulich zu machen, kannst du die gespeicherten Werte tabellarisch oder als Diagramm darstellen. Tabellen zeigen die Umrechnungsschritte übersichtlich in Spalten und Zeilen, während Diagramme den Trend und Schwankungen visueller erfassbar machen.

Beispiel einer einfachen Implementierung in JavaScript und HTML

Ein minimaler Ansatz sieht so aus: Du speicherst alle Umrechnungen in einem Array, fügst nach jeder Umrechnung einen Eintrag hinzu und aktualisierst eine Tabelle im HTML, um den Verlauf anzuzeigen.

Hier ein einfaches Beispiel:

<!DOCTYPE html><html lang="de"><head> <meta charset="UTF-8"> <title>Verlauf der Umrechnungen</title> <style> table { border-collapse: collapse; width: 80%; margin-top: 20px; } th, td { border: 1px solid #aaa; padding: 8px; text-align: right; } th { background-color: #ddd; } </style></head><body> <h1>Umrechnung mit Verlauf</h1> <label>Betrag in EUR: <input type="number" id="betrag" value="100" /> </label> <label>Wechselkurs (EUR zu USD): <input type="number" id="kurs" step="0.001" value="1.1" /> </label> <button onclick="umrechnen()">Umrechnen</button> <h2>Verlauf der umgerechneten Beträge</h2> <table id="verlaufTabelle"> <thead> <tr> <th>Zeitpunkt</th> <th>Originalbetrag (EUR)</th> <th>Wechselkurs</th> <th>Umgerechneter Betrag (USD)</th> </tr> </thead> <tbody> </tbody> </table> <script> const verlauf = ; function umrechnen() { const betragInput = document.getElementById(betrag); const kursInput = document.getElementById(kurs); const betrag = parseFloat(betragInput.value); const kurs = parseFloat(kursInput.value); if (isNaN(betrag) || isNaN(kurs)) { alert(Bitte gültige Zahlen eingeben.); return; } const umgerechneterBetrag = betrag * kurs; const zeitpunkt = new Date().toLocaleString(); // Eintrag in den Verlauf speichern verlauf.push({ zeitpunkt: zeitpunkt, original: betrag, kurs: kurs, umgerechnet: umgerechneterBetrag }); // Tabelle aktualisieren aktualisiereTabelle(); } function aktualisiereTabelle() { const tbody = document.getElementById(verlaufTabelle).querySelector(tbody); tbody.innerHTML = ; // Vorherigen Inhalt löschen verlauf.forEach(eintrag => { const tr = document.createElement(tr); const tdZeit = document.createElement(td); tdZeit.textContent = eintrag.zeitpunkt; tdZeit.style.textAlign = left; const tdOriginal = document.createElement(td); tdOriginal.textContent = eintrag.original.toFixed(2); const tdKurs = document.createElement(td); tdKurs.textContent = eintrag.kurs.toFixed(3); const tdUmgerechnet = document.createElement(td); tdUmgerechnet.textContent = eintrag.umgerechnet.toFixed(2); tr.appendChild(tdZeit); tr.appendChild(tdOriginal); tr.appendChild(tdKurs); tr.appendChild(tdUmgerechnet); tbody.appendChild(tr); }); } </script></body></html>

Erweiterungsmöglichkeiten

Wenn du den Verlauf ausführlicher und interaktiver anzeigen möchtest, kannst du auf Bibliotheken wie Chart.js oder D3.js zurückgreifen. Diese erlauben dir die Darstellung von Linien- oder Balkendiagrammen, die Trends besser sichtbar machen.

Eine weitere Möglichkeit ist die Speicherung der Daten im Browser, zum Beispiel mit localStorage, so dass der Verlauf auch nach einem Neuladen der Seite erhalten bleibt.

Zusammenfassung

Das Anzeigen des Verlaufs umgerechneter Beträge erfordert, dass du nach jeder Berechnung einen Eintrag mit allen relevanten Daten abspeicherst und diese dann in einer Tabelle oder einem Diagramm anzeigst. Mit einfachem HTML und JavaScript kannst du dies schon relativ leicht umsetzen, um eine nachvollziehbare Darstellung deiner Umrechnungen zu erhalten.

0
0 Kommentare