Investment Rechner

In dieser Aufgabe wendest du alle gelernten Konzepte des Tages an.

Aufgabenstellung

Erstelle ein Investment-Rechner, der eine Liste von Bitcoin (BTC) Käufen anzeigt und dein Kontostand und Gewinn berechnet.

Lösungsschritte

Verwende folgenden Vue Playground als Startpunkt für deine Lösung:

Vue SFC Playgroundsfc.vuejs.org

Vue Playground Vorlage

Formular Inputs verarbeiten

Du findest im Playground ein vorbereitetes Formular um Investitionen zu erfassen:

• Es gibt zwei Inputs: Eines für die Anzahl gekaufter Bitcoins und eines um den Tageskurs des Bitcoins einzutragen.

• Es sind zwei Variablen inputCount und inputPrice vorbereitet. Diese sollen jeweils den Wert des dazugehörigen Inputs enthalten.

• Wenn auf «Erfassen» geklickt wird, wird die add Funktion aufgerufen. Diese zeigt momentan an, was erfasst werden würde.

• (Optional) Wenn du möchtest, kannst du den aktuellen Bitcoin-Kurs in der bitcoinPrice Konstante auf Zeile 4 aktualisieren.

• Erweitere die beiden <input> im <template> so, dass inputCount und inputPrice immer den eingetragenen Wert enthalten und beim Klick auf «Erfassen» die korrekten Werte in der alert Box angezeigt werden.

Investments auflisten

Es wurde bereits eine investmens Variable für dich vorbereitet. Diese enthält ein kommentierter Beispieleintrag eines Investments.

• Entferne den Kommentar, damit der Eintrag aktiv wird.

const investments = ref([
-  // { count: 4, price: 15000 },
+  { count: 4, price: 15000 },
])

• Füge der investments Variable manuell noch einige weitere Beispieleinträge hinzu.

• Liste die Investments im <ul> Element am Ende der Seite auf (siehe Screenshot zuoberst).

Investments abspeichern

In der add Funktion wird ein erfasstes Investment momentan einfach mit alert angezeigt.

• Entferne die zuvor erstellten Beispiel-Einträge im investments Array.

• Passe die add Funktion so an, dass das erfasste Investment der investments Liste hinzugefügt wird. Das neue Investment sollte umgehend im Browser angezeigt werden.

Hilfe benötigt?

Du arbeitest mit einem Array. Suche also im Internet, wie man in JavaScript ein neues Element zu einem Array hinzufügt.

Formular zurücksetzen

Die Formular-Eingaben bleiben nach dem Erfassen eines Investments einfach stehen.

• Erweitere die add Funktion so, dass die Formular-Felder nach dem Hinzufügen eines Investments wieder geleert werden.

Hilfe benötigt?

Versuche dich an die «Deklarative Programmierweise» zu erinnern.

Dabei werden Variablen verändert ‒ das Framework übernimmt dann die Ausführung der benötigten Anpassungen für die Darstellung.

Kontostand berechnen

Verwende die passende Methodik, um anhand der erfassten Investments folgende Kennzahlen zu berechnen. Ersetze die Werte bei den jeweiligen ??? Platzhaltern:

• Kontostand in Anzahl BTC

• Total investierte CHF

• Heutiger Wert der BTC in CHF

• Total Gewinn/Verlust

Hilfe benötigt?

Für eine einfach zu lesende Lösung kannst du versuchen, die Summen mit .forEach zu berechnen. Wenn du dich sattelfest fühlst, kannst du auch .reduce verwenden.

Du findest zahlreiche Code-Beispiele dazu im Internet.

(Zusatzaufgabe) Datumsfeld

• Ergänze ein Datumsfeld, um das Datum eines Kaufs eintragen zu können.

• Ergänze das eingetragene Datum beim Erfassen eines Kaufs ebenfalls im investments Array.

• Zeige das Datum in der Liste von Investments bei der Ausgabe an.