Sandbox · Level 3 · Hard · 20+ minut

🏆 Vytvoř vlastní achievement

Achievement = malá hvězdička, kterou návštěvník odemkne když udělá něco specifického. V tvém webu jich už je 9. Teď přidáš desátý — svůj. Tohle je JavaScript logika, je to skill.

🎯 Cíl

Vytvořit nový achievement a vymyslet, kdy se má odemknout. Návštěvník udělá akci → toast notifikace v rohu.

Příklady, co bys mohl udělat:

🦴 „Paleontolog" — odemkne, když najde 3 dinosaury skryté po webu
🌅 „Brzy ranní pták" — odemkne, když je otevřený web mezi 5-7 ráno
🎂 „28. května" — odemkne, když je narozeniny Adam (Easter egg)
🏃 „Speed Reader" — odemkne, když uživatel scrolluje hodně rychle
🎨 „Změnil barvu" — odemkne, když přepne dark/light mode 5×
cokoli vlastního — vymysli

🔍 Jak achievementy fungují

Otevři soubor js/main.js v Claude Code a podívej se. Najdeš tam:

const ACHIEVEMENTS = {
  first_visit:   { icon: '🎉', name: 'První návštěva', desc: '...' },
  explorer:      { icon: '🗺️',  name: 'Průzkumník',     desc: '...' },
  hacker:        { icon: '💀', name: 'Hacker',          desc: '...' },
  ...
};

A funkci unlock(key) — když ji někdo zavolá s názvem achievementu, ten se odemkne.

📝 Co řekni Claude

Pro jednoduchý achievement (např. „Změnil dark/light mode 5×"):

> Chci vytvořit nový achievement v js/main.js:
> - Klíč: "color_changer"
> - Ikona: 🎨
> - Jméno: "Barvomil"
> - Popis: "Přepnul dark/light 5×"
>
> Ať se odemkne, když uživatel klikne na theme-toggle pětkrát celkem
> (počítej přes localStorage). Vysvětli mi co budeš měnit.

Pro složitější (např. „Otevřel web 28. května" = narozeniny Adama):

> Přidej achievement "🎂 Narozeninový kamarád" který se odemkne
> automaticky, když je dnešní datum 28. května (Adam má narozeniny).
> Spusť kontrolu při načtení stránky.

🧠 Co se v tomhle naučíš

JavaScript objekty — jak vypadá ACHIEVEMENTS mapa
Event listeners — jak reagovat na klikání
localStorage — jak ukládat data, co přežijí refresh
Datum a čas — jak v JS pracovat s časem (new Date())

To je solidní porce skutečného programování.

🔍 Test

Otevři index.html v prohlížeči
Otevři DevTools (F12) → záložka Console
Napiš tam localStorage.clear() a stiskni Enter (vymaže všechny achievementy)
Refresh stránku (Ctrl+R)
Udělej akci, která má achievement odemknout
Měl by se objevit toast notifikace v pravém dolním rohu 🎉

🚀 Deploy

> Otestoval jsem, funguje to. Nahraj na adamlunak.cz.

🌟 Bonus výzvy

Stránka „všech achievementů" — vytvoř /achievements/ kde návštěvník vidí, které odemknul a které ještě ne. Řekni Claude: „Vytvoř stránku se seznamem všech achievementů, kde odemčené svítí a neodemčené jsou šedé."
Sdílení achievementů — když někdo odemkne achievement, ukaž tlačítko „Sdílet" které vygeneruje text pro Discord/WhatsApp.
Skrytý achievement — vytvoř achievement, který je tajný a o jeho existenci uživatel neví, dokud ho neodemkne (jako v Minecraftu).

✅ Hotovo?

Jestli jsi prošel všemi 3 levely, jsi opravdu programátor. To není fráze. Tyhle skill se učí dospělí na bootcampech za desítky tisíc.

Ty máš 12 let. Klidně to flexni.

🎓 Co dál? Teď tě nic nezastaví. Můžeš si stavět co chceš.

Návrhy do budoucna:

Vlastní Discord bot
Browser hra v 3D (Three.js)
Aplikace na telefon (React Native / Capacitor)
Vlastní Minecraft plugin server-side
AI nástroj — třeba „Jak naučit kámoše dělat 3D tisk"

← Level 2 Hotovo ✓ → dev hub