Úloha 1 – Práce s DOM (querySelector, classList)

Řešení úlohy

Co je zde splněno

• Použití querySelector() pro výběr prvků.

• Využití classList.toggle("dark") pro přepínání režimu.

• Změna textu tlačítka podle aktivní třídy.

• Stylování obou režimů přímo v <style>.

• Vše v jednom souboru, jak požaduje zadání.

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

• Použití šipkové funkce a ternárního operátoru pro zkrácený a přehledný zápis.

• Přidán plynulý přechod mezi režimy pomocí transition.

• Styl tlačítka se také mění podle režimu.

• Celkově modernější a elegantnější zápis vhodný pro praxi.

Poznámky

• Častou chybou je zapomenout na == true u podmínky nebo na textContent místo innerHTML.

• Je vhodné přidat mírnou animaci přechodu (např. transition) pro plynulejší efekt – viz pokročilá varianta.