Glückwunsch!

Glückwunsch, deine Einkaufsliste funktioniert, und du hast das Ende des JavaScript-Kurses erreicht! Die App lädt ihre Startprodukte aus einer Datei, fügt neue hinzu, prüft, was du eintippst, addiert die Preise, lässt dich abhaken und entfernen, was du gekauft hast, und merkt sich die Liste für das nächste Mal. Und all das hast du selbst geschrieben.

Eine letzte Verbesserung. Hake die Milch ab, und der zu zahlende Betrag bleibt gleich. Im Laden ist es nützlicher, zu sehen, wie viel die Produkte kosten werden, die du noch nicht gekauft hast. Addiere also in berechneSumme() nur die Preise der Produkte, deren gekauft false ist. Die Bedingung !produkt.gekauft (nicht gekauft) ist genau das, was du brauchst. Und da zeigeProdukte() nach jedem Klick läuft, aktualisiert sich der Betrag von selbst.

Was du gelernt hast. Sieh dir an, wie jeder Teil des Kurses in deiner App seinen Platz gefunden hat:

• Variablen und Konstanten enthalten die Elemente der Seite, den Namen und den Preis.
• Bedingungen prüfen die Eingabe und entscheiden, ob ein Produkt durchgestrichen wird.
• Ein Array enthält die Einkaufsliste, und push() fügt ihr etwas hinzu.
• Schleifen gehen die Produkte durch, um sie anzuzeigen und ihre Preise zu addieren.
• Funktionen teilen die App in Teile mit klaren Aufgaben: zeigeProdukte() zeigt an, berechneSumme() rechnet, speichereProdukte() speichert und ladeProdukte() lädt.
• Objekte halten zusammen, was zu einem Produkt gehört: seinen Namen, seinen Preis und ob es gekauft ist.
• Array-Methoden: filter() behält in einer Zeile nur die Produkte, die nicht gekauft sind.
• Die Seite und ihre Ereignisse: Du findest Elemente, änderst ihren Text und ihre Klassen, erstellst neue, reagierst auf Klicks und zeigst eine Meldung an, wenn etwas nicht stimmt.
• Warten: Mit async und await wartet ladeProdukte() auf die Datei, während die Seite weiterarbeitet.
• Daten: fetch() lädt die Startprodukte aus einer JSON-Datei, und der localStorage behält die Liste, wenn die Seite geschlossen wird.

Speichere deine App. Die App besteht aus drei Dateien, und sie müssen im selben Ordner liegen:

1. Erstelle auf deinem Computer einen neuen Ordner, zum Beispiel einkaufsliste.
2. Öffne einen einfachen Texteditor, etwa Editor unter Windows oder TextEdit auf dem Mac (im Menü „Format“ auf reinen Text umgestellt), oder einen Code-Editor wie Visual Studio Code. Füge den Code aus der index.html ein und speichere ihn im Ordner als index.html.
3. Speichere auf dieselbe Weise script.js und produkte.json im selben Ordner, jede unter ihrem eigenen Namen.

Wenn du jetzt doppelt auf die index.html klickst, öffnet sich die App, zeigt aber ständig Lade… an. Der Browser öffnet die Seite direkt von der Festplatte, unter einer Adresse, die mit file:// beginnt, und lässt eine solche Seite keine anderen Dateien mit fetch() laden. Die Konsole zeigt, warum: in Chrome einen Fehler über die CORS-Richtlinie und TypeError: Failed to fetch. Auch deine Meldung, dass die Liste nicht geladen werden konnte, erscheint nicht, weil fetch() keine Antwort bekommt, nicht einmal ein 404. Es schlägt mit einem Fehler fehl, der ladeProdukte() beim await beendet.

Die Seite muss von einem Webserver kommen, wie die Seiten im Internet. Eine einfache Möglichkeit, einen zu bekommen, ist Visual Studio Code mit der Erweiterung Live Server: Öffne deinen Ordner in VS Code (Datei, Ordner öffnen), installiere Live Server im Bereich „Erweiterungen“ links und klicke unten rechts auf Go Live. Die App öffnet sich in deinem Browser unter einer Adresse wie http://127.0.0.1:5500/index.html, und die Startprodukte werden geladen. Live Server läuft nur auf deinem Computer und nur, solange VS Code geöffnet ist, niemand sonst kann die Adresse öffnen. Er ist zum Ausprobieren deiner Seiten gedacht.

Im Browser ist die Konsole zuerst verborgen: Öffne die Entwicklertools mit F12 (auf dem Mac Cmd+Option+I) und wechsle zum Tab „Konsole“. Dort findest du, was dein Skript ausgibt, und seine Fehler. Und wenn du die Seite neu lädst, ist deine Liste noch da, weil der Browser sie im localStorage behält. Jede Adresse hat ihren eigenen: Auch eine Seite, die aus einer Datei geöffnet wurde, kann im localStorage speichern, aber was sie speichert, ist unter http://127.0.0.1:5500 nicht da, und umgekehrt.

Wie es weitergeht. Du kennst jetzt die Grundlagen, aus denen jedes JavaScript-Programm aufgebaut ist, auch im Browser. Hier sind ein paar Ideen, was du als Nächstes tun kannst:

• Verbessere deine Liste weiter. Du kennst schon alles, was du dafür brauchst: einen Button zum Entfernen bei jedem Produkt (ein Handler für die ganze Liste hilft), das Hinzufügen eines Produkts mit der Eingabetaste, eine Menge für jedes Produkt, das Sortieren nach Preis oder eine Meldung für den Fall, dass fetch() selbst fehlschlägt (try und catch). Du lernst am meisten, wenn du deine eigenen Probleme löst.
• TypeScript ist JavaScript mit Typen: Du schreibst auf, welche Art von Wert jede Variable und jeder Parameter enthält, und TypeScript findet viele Fehler, noch bevor das Programm läuft. Größere Apps werden meistens darin geschrieben, und der TypeScript-Kurs schließt an diesen Kurs an.
• React ist eine Bibliothek, mit der du Web-Apps aus Komponenten baust. Sie beruht genau auf dem, was du hier gelernt hast: Daten und eine Seite, die sie anzeigt. Auch der React-Kurs schließt an diesen Kurs an.

Und falls du sie noch nicht gemacht hast: Der HTML-Kurs und der CSS-Kurs bringen dir bei, die ganze Seite und ihr Aussehen selbst zu bauen, nicht nur das Skript.