Einkaufsliste

Willkommen in der letzten Lektion des JavaScript-Kurses! Hier setzt du alles zusammen, was du gelernt hast, und baust eine kleine App: eine Einkaufsliste. Du tippst ein, was du kaufen möchtest und was es kostet, klickst auf einen Button, und das Produkt erscheint in der Liste. Die App addiert die Preise, prüft, was du eingegeben hast, und lässt dich abhaken, was du schon gekauft hast. Später bekommt sie ihre Startprodukte aus einer Datei und merkt sich deine Liste, damit sie noch da ist, wenn du die Seite wieder öffnest.

Du setzt Variablen, Bedingungen, Arrays, Schleifen, Funktionen und Objekte ein sowie das, was du über Webseiten, Ereignisse und Daten von einem Server gelernt hast. Jede Übung macht dort weiter, wo die vorige aufgehört hat (der Editor beginnt mit ihrem fertigen Code), und fügt ein Stück hinzu. Am Ende hast du eine ganze App, die du Schritt für Schritt gebaut hast.

Die Seite. Die Seite in index.html ist fertig, du arbeitest also fast nur in script.js. Dein Skript arbeitet mit diesen Elementen (aufgelistet nach ihrer id):

• liste: die Liste der Produkte (ul), noch leer,
• gesamt: was der Einkauf kostet. Es ist ein span, ein Element für ein Stück Text innerhalb eines Absatzes,
• name und preis: die Textfelder für das, was du kaufen möchtest, und seinen Preis (das Preisfeld hat type="number": Es ist für Zahlen gedacht),
• hinzufuegen: der Button, der das Produkt zur Liste hinzufügt,
• nachricht: ein Absatz für Meldungen, zum Beispiel wenn du vergisst, den Preis einzugeben.

Das Element style oben auf der Seite enthält außerdem einen Stil für die Klasse gekauft, die ein Produkt durchstreicht. Diese Klasse brauchst du später. Oben in script.js haben wir die Elemente schon mit document.querySelector() gefunden und in Konstanten gespeichert, du kannst also gleich loslegen.

Der Plan. Die Einkaufsliste steht in einem Array von Objekten, ein Objekt pro Produkt, zum Beispiel { name: "Milch", preis: 2 }. Dieses Array enthält die Daten der App. Die Seite zeigt die Daten nur an: Eine Funktion zeigeProdukte() leert die Liste auf der Seite und erstellt für jedes Produkt im Array ein li-Element. Immer wenn sich die Daten ändern, zum Beispiel wenn du ein Produkt hinzufügst, ändert das Skript das Array und ruft zeigeProdukte() noch einmal auf. Es ist dieselbe Idee wie beim Zähler in der Lektion über Webseiten: Der Wert lebt in einer Variable, und die Seite zeigt ihn an.

Zur Erinnerung, wie du ein Element erstellst und auf die Seite setzt:

const li = document.createElement("li");
li.textContent = "Milch";
liste.append(li);