Úloha

Zadání (kontext úlohy):

Na stránce jsou tři tlačítka – „Ovoce“, „Zelenina“ a „Nápoje“. Po kliknutí na jedno z nich se v seznamu zobrazí odpovídající skupina produktů. Po opětovném kliknutí na stejné tlačítko se seznam vymaže. Vše musí fungovat efektivně – bez zbytečných přístupů k DOM a bez přímého měnění stylů.

Cíl úlohy:

Procvičit efektivní manipulaci s DOM pomocí DocumentFragment, oddělení stylu od logiky (pomocí CSS tříd) a práci s funkcemi podle DRY principu.

Vstupní podmínky:

Student pracuje pouze s jedním HTML souborem.
Data jsou uložena přímo v JavaScriptu v podobě tří polí (ovoce, zelenina, nápoje).
Každé kliknutí přepíše obsah seznamu novou sadou položek, nebo ho vyprázdní, pokud se klikne znovu na stejnou kategorii.

Požadovaný výstup:

  • Na stránce bude:

    • nadpis „Seznam produktů“,

    • tři tlačítka: „Ovoce“, „Zelenina“, „Nápoje“,

    • prázdný <ul id="seznam">.

  • Po kliknutí na tlačítko se seznam naplní položkami příslušné kategorie.

  • Kliknutí na stejné tlačítko podruhé seznam vyprázdní.

  • Vložené položky musí být vytvořeny pomocí DocumentFragment.

  • Aktivní tlačítko se vizuálně zvýrazní pomocí CSS třídy .aktivni.

Doplňující pokyny:

  • Použij classList.add() a remove() k přepínání zvýraznění tlačítek.

  • Zabraň opakovanému vykreslování stejné kategorie.

  • Vyhni se přímému nastavování stylů pomocí style, využij třídu .aktivni.

  • Logiku rozděl do tří funkcí: vytvorSeznam(pole), vymazSeznam(), zmenKategorii().