Deine Tickets

Der letzte Schritt: Ein Besucher, der zurückkommt, will sehen, was er gebucht hat. Füge unter der Platzwahl einen Abschnitt mit einer Liste seiner Tickets hinzu:

<section id="deine-tickets">
    <h2>Deine Tickets</h2>
    <ul id="tickets"></ul>
</section>

Zeichne die Liste aus buchungen mit einer Funktion zeigeTickets(): ein Eintrag für jede Buchung, mit Tag, Uhrzeit und Film und den gebuchten Plätzen: Freitag 17:30, Roboter im Urlaub: C6, C7. Eine Buchung enthält nur die id der Vorstellung. Tag, Uhrzeit und Film stehen in der Vorstellung mit dieser id, und find() findet sie in vorstellungen. Die Liste lässt sich also erst zeichnen, wenn das Programm geladen ist: Rufe zeigeTickets() am Ende von ladeVorstellungen() auf und noch einmal nach jeder Buchung.

Das ist das ganze Projekt. Die Programmseite des Kinos Sternenlicht lädt ihr Programm jetzt aus einer Datendatei und sagt Bescheid, wenn sie lädt oder etwas schiefgegangen ist. Der Besucher kann einen Tag wählen, eine Vorstellung öffnen, Plätze auswählen und sehen, was sie kosten, und sie mit einem Formular buchen, das prüft, was er eingegeben hat. Und die Seite merkt sich seine Tickets, wenn er zurückkommt. Das Kino kann sein Programm jetzt ändern, indem es programm.json bearbeitet, ohne die Seite anzufassen. Speichere die neuen und geänderten Dateien im Ordner deiner Website und lade den Ordner erneut hoch, wie in der Lektion Online stellen, und alles funktioniert auch dort. Wundere dich nur nicht, wenn du programm.html direkt aus dem Ordner auf deinem Computer öffnest: Browser lassen fetch() keine Dateien von deiner Festplatte lesen, das Programm wird also nicht geladen. Ein Webserver beantwortet fetch(), genau wie die Vorschau, also lädt die Seite online programm.json.

Wenn du weitermachen möchtest: Du weißt schon alles, was du dafür brauchst. Zum Beispiel ein Stornieren-Button für jedes Ticket (filter(), speichern, neu zeichnen) oder der Preis jeder Buchung in ihrem Eintrag.

Wie es weitergeht. Deine Website funktioniert, und jetzt wird es Zeit, sie modern aussehen zu lassen. Der nächste Kurs im Lernpfad, Tailwind CSS, zeigt dir eine andere Art, Seiten zu gestalten: Statt eigene CSS-Regeln zu schreiben, setzt du fertige Klassen direkt ins HTML. Dann gestaltest du im Projekt Das Kino in Tailwind genau diese Website damit neu, auch die Plätze und Tickets, die dein Skript erstellt.