Výběr dne

V sobotu ráno chce návštěvník vědět, co se hraje dnes, ne celý víkend. Nad tabulku přidejte tlačítka pro dny: Všechny dny, Pátek, Sobota a Neděle. Kliknutí na den ukáže jen jeho představení.

Každé tlačítko řekne skriptu svůj den v atributu data-den, jako v lekci Události a formuláře. Dny jsou napsané přesně jako v program.json, takže je skript může porovnat pomocí ===:

<div id="dny">
    <button data-den="vše" class="aktivni">Všechny dny</button>
    <button data-den="Pátek">Pátek</button>
    <button data-den="Sobota">Sobota</button>
    <button data-den="Neděle">Neděle</button>
</div>

Tlačítka nemají id. Dejte prvku #dny jednu obsluhu kliknutí a kliknuté tlačítko najděte pomocí event.target.closest("button"); kliknutí vedle tlačítek dá null. Zvolený den si pamatujte v proměnné zvolenyDen, která začíná jako "vše". V zobrazProgram() pak pomocí filter() vykreslete jen představení zvoleného dne, pokud to není "vše". Soubor znovu nenačítejte: tabulku vykreslete znovu z programu, který už máte.

Zvolené tlačítko. Návštěvník má vidět, na který den se dívá, a tak má zvolené tlačítko třídu aktivni. Na začátku jsou to Všechny dny, proto má toto tlačítko třídu už v HTML. Aktivní tlačítko si pamatujte v proměnné, jako jste si v lekci Události a formuláře pamatovali vybraný recept: při kliknutí mu třídu odeberte, přidejte ji kliknutému tlačítku a to si uložte do proměnné. První aktivní tlačítko najdete selektorem jako v CSS, prvek se třídou aktivni uvnitř #dny:

let aktivniTlacitko = document.querySelector("#dny .aktivni");

Typické chyby:

• Den napsaný v tlačítku jinak než v datech, třeba data-den="pátek". "pátek" === "Pátek" je false, takže tabulka zůstane prázdná.
• Zapomenete odebrat třídu starému tlačítku: po pár kliknutích vypadají zvolená všechna tlačítka.