Úloha 5 – Interaktivní kategorie produktů s přepínáním obsahu

Řešení úlohy

Co je zde splněno

• Oddělení logiky a stylu: zvýraznění přes .aktivni (žádné style v JS).

• Efektivní render: položky se vkládají jedním krokem přes DocumentFragment.

• Tři požadované funkce: vytvorSeznam(pole), vymazSeznam(), zmenKategorii().

• Přepínání aktivního tlačítka přes classList.add()/remove().

• Zabránění zbytečnému překreslení: klik na stejné aktivní tlačítko seznam vyprázdní.

• Vše v jednom HTML souboru, bez nadbytečných přístupů k DOM.

Vylepšení oproti začátečnické verzi

• Delegace událostí na obalujícím prvku tlačítek → méně listenerů, snadné rozšíření.

• Map + dataset pro čisté párování tlačítek a dat.

• Stručné šipkové funkce, for...of, closest() – čitelný, moderní kód.

• Vyprázdnění seznamu přes textContent = "" (rychlé), ale stále vytváření položek přes DocumentFragment.