Vaše vstupenky

Poslední krok: návštěvník, který se vrátí, chce vidět, co si zarezervoval. Pod výběr míst přidejte sekci se seznamem jeho vstupenek:

<section id="vase-vstupenky">
    <h2>Vaše vstupenky</h2>
    <ul id="vstupenky"></ul>
</section>

Seznam vykreslete z pole rezervace funkcí zobrazVstupenky(): pro každou rezervaci položku se dnem, časem a filmem a se zarezervovanými místy, Pátek 17:30, Roboti na dovolené: C6, C7. Rezervace má jen id představení. Den, čas a film jsou v představení s tímto id a v poli program ho najde find(). Seznam proto jde vykreslit, až když je program načtený: zavolejte zobrazVstupenky() na konci nactiProgram() a znovu po každé rezervaci.

A to je celý projekt. Stránka s programem Kina Hvězda teď načítá program ze souboru s daty a dá vědět, když se načítá nebo když se něco pokazí. Návštěvník si zvolí den, otevře představení, vybere si místa a uvidí, kolik budou stát, a zarezervuje si je formulářem, který zkontroluje, co napsal. A stránka si jeho vstupenky pamatuje, i když odejde a vrátí se. Kino teď může měnit program úpravou program.json, aniž by sáhlo na stránku. Uložte nové a změněné soubory do složky svého webu a složku znovu nahrajte, jako v lekci Web na internetu. Na internetu bude všechno fungovat: webový server na fetch() odpoví, takže stránka program.json načte. Když ale program.html otevřete ve svém počítači dvojklikem, program se nenačte, protože prohlížeče stránce otevřené z disku načítat soubory pomocí fetch() nedovolí. Stránku s programem proto zkoušejte tady v editoru, nebo až na internetu.

Jestli chcete pokračovat, všechno, co k tomu potřebujete, už znáte: tlačítko Zrušit u každé vstupenky (filter(), uložit, znovu vykreslit) nebo cenu každé rezervace v její položce.

Co dál. Váš web funguje a teď je čas, aby vypadal moderně. Další kurz na cestě, Tailwind CSS, učí jiný způsob, jak stránky stylovat: místo vlastních pravidel CSS píšete hotové třídy přímo do HTML. Pak v projektu Kino v Tailwindu tímto způsobem přestylujete právě tento web, i s místy a vstupenkami, které vytváří váš skript.