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ě:
- Skript zapojený na všech stránkách a bez chyb v konzoli (F12 – nesmí tam být nic červeného).
- Tmavý režim – přepínač v hlavičce na každé stránce, volba se pamatuje.
- Interaktivní tlačítko nebo počítadlo – aspoň jedno kouzlo s proměnnou a podmínkou.
- Fotogalerie s lightboxem – kliknutí zvětší fotku.
- 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:
- Otevři svůj repozitář na github.com,
- Add file → Upload files,
- přetáhni změněné soubory (hlavně
skript.js,styl.cssa 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
- JavaScript: proměnné, podmínky, funkce, pole, objekty, smyčky – základy každého programování.
- Vzorec kouzel: najdi prvek → poslouchej událost → proveď akci.
localStoragepro pamatování,querySelectorAll+forEachpro skupiny prvků, kontrola vstupů u formulářů.
© 2026 Ing. Martin Polak / AlgoRhino · Podmínky užití obsahu