Favoriten

Der letzte Schritt: Favoriten. Neben jedem Film gibt es einen Button, und ein Klick darauf markiert den Film als Favoriten. Die Seite muss sich die Favoriten merken, damit sie noch markiert sind, wenn du die Seite wieder öffnest, zum Beispiel am nächsten Tag, wenn du mit deinen Freunden auswählst.

Die Aufgabe. Füge dem li jedes Films einen button hinzu. Ein Klick darauf markiert den Film als Favoriten, und ein weiterer Klick hebt die Markierung wieder auf. Das li eines Favoriten hat die Klasse favorit, die der Stil der Seite schon hervorhebt. Als Text des Buttons kannst du die Sterne ☆ und ★ benutzen. Die Favoriten bleiben markiert, wenn der Nutzer ein Genre auswählt oder sucht, und auch, wenn die Seite wieder geöffnet wird.

Ein Tipp: Speichere die Favoriten in einem Array von Titeln, etwa ["Oben", "Inception"]. includes() sagt dir, ob ein Film darin ist, push() fügt einen Titel hinzu, und filter() erzeugt ein Array ohne einen Titel. Speichere das Array nach jeder Änderung und zeichne die Liste noch einmal. Und ein Klick-Handler, den du innerhalb der Schleife erstellst, die die Liste zeichnet, merkt sich den Film aus seinem Durchlauf der Schleife:

for (const film of angezeigt) {
    const button = document.createElement("button");
    button.addEventListener("click", function () {
        console.log(film.titel);
    });
    // ...
}

Das ist das ganze Projekt. Deine App lädt Daten aus einer Datei, zeigt eine Meldung an, während sie wartet, und eine andere, wenn etwas schiefgeht, zeichnet die Seite aus den Daten, filtert sie nach der Auswahl des Nutzers und merkt sich seine Favoriten im Browser. Die meisten Web-Apps, die du jeden Tag benutzt, beruhen auf denselben Ideen. In der letzten Lektion, dem Abschlussprojekt, setzt du alles aus dem Kurs in einer weiteren App zusammen.