Úloha

Zadání (kontext úlohy):

Vytvoř jednoduchou webovou stránku, která umožní přepínat mezi světlým a tmavým režimem kliknutím na tlačítko. Při přepnutí se změní pozadí stránky a barva textu.

Cíl úlohy:

Procvičit si práci s DOM – výběr prvků pomocí querySelector(), použití classList.toggle() a připojení události click.

Vstupní podmínky:

Student pracuje pouze s jedním HTML souborem.
Stylování probíhá přes CSS třídy uvnitř <style> v hlavičce.
JavaScript se zapisuje do <script> na konci stránky.

Požadovaný výstup:

  • Na stránce bude:

    • nadpis <h1> s textem „Režim zobrazení“

    • odstavec s textem „Kliknutím přepni mezi světlým a tmavým režimem.“

    • tlačítko s textem „Přepnout režim“

  • Po kliknutí na tlačítko se:

    • přepne CSS třída dark na elementu <body>,

    • změní barva pozadí (např. černá) a barva textu (např. bílá),

    • text tlačítka se změní na „Přepnout zpět“.

  • Opětovným kliknutím se stránka vrátí do světlého režimu a tlačítko opět ukazuje „Přepnout režim“.

Doplňující pokyny:

  • Použij document.querySelector() pro výběr tlačítka i těla stránky.

  • Využij classList.toggle() k přepínání třídy dark.

  • Pomocí if rozhodni, jaký text má tlačítko zobrazit.

  • Nezapomeň, že if (podmínka == true) je srozumitelnější pro začátečníky než zkrácený zápis.