Souhrnná úloha – Práce s DOM

Úloha

Zadání (kontext úlohy):

Vytvoř jednoduchý „mini seznam úkolů“. Uživatel napíše text do pole, tlačítkem jej přidá do seznamu, v seznamu může položku označit jako splněnou (toggle) nebo ji smazat. Nahoře jsou dvě tlačítka, která přepínají zobrazení: Vše a Hotové.

Cíl úlohy:

Procvičit querySelector, čtení a zápis hodnot z inputu, vytváření a mazání prvků, práci s classList, události a delegaci, a jednoduché přepínání obsahu.

Vstupní podmínky:

• Pracuj s poskytnutými soubory index.html a script.js.

• Do JS nepoužívej šipkové funkce, ternární operátor ani var.

• V podmínkách porovnávej hodnoty explicitně (if (podminka == true) a if (podminka == false)).

Požadovaný výstup:

1. Po kliknutí na Přidat se z inputu (pokud není prázdný) vytvoří nový <li> do seznamu.

   • Každá položka obsahuje text a dvě tlačítka: Hotovo a Smazat.

2. Klik na Hotovo přepíná položce třídu done (viz CSS) pomocí classList.toggle(...).

3. Klik na Smazat položku odstraní ze seznamu.

4. Použij delegaci událostí: posluchač kliknutí je na <ul>, ne na jednotlivých tlačítkách.

5. Tlačítka Vše / Hotové nahoře přepínají zobrazení položek (skryj/zobraz položky bez/ s třídou done).

6. Po úspěšném přidání položky se input vyčistí (nastaví se na prázdný řetězec).

Doplňující pokyny:

• Prázdný vstup neukládej: kontroluj text.trim().length.

• Pro skrytí použij třídu hidden (přidávej/odebírej dle filtru).

• Dejte si pozor na porovnání: if (text.trim().length == 0) { ... }.

• Delegace: z event.target zjisti, zda bylo kliknuto na tlačítko s data-role.

Řešení úlohy

Co je zde splněno

• Vytvoření položky po kliknutí na Přidat (s kontrolou text.trim().length == 0).

• Každá položka má text, tlačítko Hotovo (toggle .done) a Smazat (odstranění).

• Delegace událostí: jediný posluchač kliknutí je na <ul id="taskList">, akce se určuje přes event.target a data-role.

• Filtr Vše / Hotové přepíná viditelnost pomocí třídy .hidden.

• Po úspěšném přidání se input vyčistí ("").

• Kód nepoužívá var, šipkové funkce ani ternární operátor; podmínky mají explicitní porovnání.