Oblíbené filmy

Poslední krok: oblíbené filmy. U každého filmu bude tlačítko a kliknutím na něj si film označíte jako oblíbený. Stránka si oblíbené filmy musí pamatovat, aby byly označené, i když ji otevřete znovu, třeba druhý den, až budete vybírat s kamarády.

Úkol. Do li každého filmu přidejte tlačítko (button). Kliknutím na něj se film označí jako oblíbený a dalším kliknutím se označení zruší. li oblíbeného filmu má třídu oblibeny, kterou styl stránky už zvýrazňuje. Jako text tlačítka můžete použít hvězdičky ☆ a ★. Oblíbené filmy zůstanou označené, když uživatel vybere žánr nebo hledá, a také když stránku otevře znovu.

Tip: oblíbené filmy mějte v poli názvů, třeba ["Pelíšky", "Počátek"]. includes() zjistí, jestli v něm film je, push() název přidá a filter() vytvoří pole bez něj. Po každé změně pole uložte a seznam vykreslete znovu. A obsluha kliknutí, kterou vytvoříte uvnitř cyklu vykreslujícího seznam, si pamatuje film ze svého průchodu cyklem:

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

A to je celý projekt. Vaše aplikace načítá data ze souboru, během čekání ukazuje zprávu a jinou, když se něco pokazí, vykresluje stránku z dat, filtruje je podle výběru uživatele a pamatuje si v prohlížeči jeho oblíbené filmy. Na stejných myšlenkách stojí většina webových aplikací, které denně používáte. V poslední lekci, Závěrečný projekt, dáte dohromady všechno z kurzu v ještě jedné aplikaci.