← Úroveň 2 – Kouzelník

Lekce 8 z 8 ⏱ 60 minut

Velký úkol: oživ celý svůj web

Závěrečná mise Úrovně 2. Všechna kouzla najednou – a pár nových nápadů k tomu.

Tvoje mise

Tentokrát žádná nová látka. Dostaneš seznam úkolů a všechno, co k nim potřebuješ, už umíš. Přesně takhle vypadá práce opravdového vývojáře: dostane zadání a skládá ho z věcí, které zná.

Povinná část 🎯

Projdi svůj web a zkontroluj, že na něm žije všech pět kouzel z této úrovně:

  1. Skript zapojený na všech stránkách a bez chyb v konzoli (F12 – nesmí tam být nic červeného).
  2. Tmavý režim – přepínač v hlavičce na každé stránce, volba se pamatuje.
  3. Interaktivní tlačítko nebo počítadlo – aspoň jedno kouzlo s proměnnou a podmínkou.
  4. Fotogalerie s lightboxem – kliknutí zvětší fotku.
  5. Kvíz nebo formulář s kontrolou – aspoň jedno z toho. Klidně obojí!

Volitelná rozšíření 🌟

Vyber si aspoň jedno (nebo vymysli vlastní):

Pozdrav podle denní doby

Web pozdraví jinak ráno a jinak večer:

<p id="pozdrav-dne"></p>
const pozdravDne = document.getElementById("pozdrav-dne");
const hodina = new Date().getHours();

if (hodina < 9) {
  pozdravDne.textContent = "Dobré ráno! ☀️";
} else if (hodina < 18) {
  pozdravDne.textContent = "Ahoj, hezký den!";
} else {
  pozdravDne.textContent = "Dobrý večer! 🌙";
}

new Date() vrací aktuální datum a čas, .getHours() z něj vytáhne hodinu.

Náhodná hláška po kliknutí

Pokaždé jiný vtip, tip na výlet nebo pokřik týmu:

const hlasky = [
  "Trénink dělá mistra!",
  "Do toho, Sokole! 🦅",
  "Kdo nestřílí, nedá gól.",
  "Fanoušci jsou dvanáctý hráč.",
];

const tlacitkoHlaska = document.getElementById("hlaska-tlacitko");
const hlaskaEl = document.getElementById("hlaska");

tlacitkoHlaska.addEventListener("click", () => {
  const nahodne = Math.floor(Math.random() * hlasky.length);
  hlaskaEl.textContent = hlasky[nahodne];
});

Math.random() vrací náhodné číslo mezi 0 a 1, zbytek řádku z něj udělá náhodné pořadí v poli.

Počítadlo návštěv (jen pro tebe)

Kolikrát jsi svůj web otevřel(a)? Ulož si to do localStorage:

let navstevy = Number(localStorage.getItem("navstevy") ?? 0);
navstevy++;
localStorage.setItem("navstevy", navstevy);
console.log("Tuhle stránku jsi otevřel(a) už " + navstevy + "×");

Number(...) převede text z paměti na číslo a ?? 0 znamená „když tam nic není, začni od nuly”.

Schovávací sekce (akordeon)

Dlouhý jídelníček nebo soupisku schovej pod klikací nadpis:

const nadpisSekce = document.getElementById("rozbal-nadpis");
const obsahSekce = document.getElementById("rozbal-obsah");

nadpisSekce.addEventListener("click", () => {
  obsahSekce.classList.toggle("schovany");
});

Třídu .schovany { display: none !important; } už máš z lekce o galerii.

Nahraj novou verzi na internet

Tvůj web na GitHub Pages je pořád ta stará verze z Úrovně 1! Nahraj tam novou:

  1. Otevři svůj repozitář na github.com,
  2. Add file → Upload files,
  3. přetáhni změněné soubory (hlavně skript.js, styl.css a všechna .html) a Commit changes.

Za minutku běží tvoje kouzla veřejně.

Gratuluju, Kouzelníku! 🪄 Tvůj web už není jen hezký – on žije. Reaguje na kliknutí, pamatuje si volby, ptá se a odpovídá. A ty víš, jak funguje každý řádek. V Úrovni 3 – Mistr se naučíš stavět weby jako profíci: React, komponenty a vlastní server.

Co si z téhle úrovně odnést

🏆 Tvůj diplom

Finále úrovně Kouzelník

Až odškrtneš všechny lekce, můžeš si vytisknout certifikát.