Die Filmliste

Zeit für noch ein Projekt! In diesem Checkpoint baust du eine App für einen Filmabend: Sie zeigt die Filme, aus denen du auswählen kannst, lässt dich in ihnen suchen und merkt sich deine Favoriten. Wie in den vorherigen Checkpoints sagen die Anweisungen, was die Seite tun soll; wie du es schreibst, bleibt dir überlassen. Jede Übung macht dort weiter, wo die vorige aufgehört hat.

Die Daten. Die Filme stehen in der Datei filme.json: ein Array von Objekten, eins für jeden Film, mit seinem Titel, dem Jahr, in dem er erschienen ist, seinem Genre und seiner Länge in Minuten:

{ "titel": "Oben", "jahr": 2009, "genre": "animation", "laenge": 96 }

Die Seite. index.html ist fertig und hat diese Elemente:

• nachricht: ein Absatz für Meldungen,
• genre und suche: ein select zur Auswahl des Genres und ein Textfeld für die Suche nach dem Titel, beide für die nächste Übung,
• filme: die Liste der Filme (ul), noch leer.

Die Aufgabe. Lade die Filme und zeige sie in der Liste filme an: ein li für jeden Film, mit Titel, Jahr, Genre und Länge, zum Beispiel Oben (2009), animation, 96 min. Solange die Filme laden, zeige in nachricht den Text Lade Filme… an und leere die Meldung danach wieder. Wenn die Filme nicht geladen werden können, zeige darin den Text Die Filme konnten nicht geladen werden. an.

Ein Tipp: Speichere die Filme in einer Variable und zeichne die Liste mit einer Funktion. In der nächsten Übung ändert sich die Liste, während der Nutzer sucht, und du rufst die Funktion noch einmal auf.