Úloha

Zadání (kontext úlohy):

Na stránce je seznam úkolů. Každý úkol lze označit jako splněný kliknutím na jeho text – položka se pak zobrazí přeškrtnutě a zešedne. U každé položky je také malé tlačítko „Smazat“, které úkol odstraní ze seznamu.

Cíl úlohy:

Procvičit si práci s událostmi, jejich delegací a manipulací s DOM. Studenti si vyzkouší reagovat na různé akce (kliknutí na text vs. kliknutí na tlačítko), používat event.target a měnit třídy i obsah prvků.

Vstupní podmínky:

Student pracuje pouze s jedním HTML souborem.
JavaScript je vložen na konci dokumentu v elementu <script>.
Každá položka má v sobě text úkolu a malé tlačítko „Smazat“.

Požadovaný výstup:

  • Na stránce bude:

    • nadpis „Seznam úkolů“,

    • seznam <ul> s několika položkami (např. „Nakoupit“, „Uklidit“, „Napsat úkol“).

  • Kliknutím na text úkolu se položka označí jako splněná (přeškrtnutý text, šedá barva).

  • Opětovným kliknutím se označení odstraní (úkol se „odškrtne“).

  • Kliknutím na tlačítko „Smazat“ se daný úkol odstraní ze seznamu.

  • Kliknutí mimo text nebo tlačítko nemá žádný efekt.

Doplňující pokyny:

  • Použij delegaci událostí – jeden addEventListener() na <ul>.

  • Rozliš, na co bylo kliknuto:

    • pokud event.target.tagName == "SPAN" → přepínej třídu .hotovo,

    • pokud event.target.tagName == "BUTTON" → smaž rodičovský <li>.

  • Použij classList.toggle() pro přepínání třídy.

  • Pro smazání prvku využij element.remove().