Ř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.