Veliki izazov: oživi cijelu web stranicu

Tvoja misija

Ovaj put nema novog gradiva. Dobit ćeš popis zadataka, a za sve već znaš. Tako izgleda pravi posao programera: dobiješ zahtjeve i sastaviš ih od onoga što već znaš.

Obavezni dio 🎯

Prođi svoju web stranicu i provjeri da su na njoj žive sve pet čarolija iz ove razine:

Skript povezan na svakoj stranici i nema grešaka u konzoli (F12 – ništa crveno ne bi se trebalo pojaviti).
Tamni način – prekidač u zaglavlju na svakoj stranici i izbor se pamti.
Interaktivni gumb ili brojač – barem jedna čarolija s varijablom i uvjetom.
Foto galerija s lightboxom – klik uvećava fotografiju.
Kviz ili obrazac s provjerom – barem jedno od toga. Slobodno oba!

Opcionalna proširenja 🌟

Odaberi barem jedno (ili smisli svoje):

Pozdrav prema dobu dana

Web stranica pozdravlja drugačije ujutro i navečer:

<p id="day-greeting"></p>

const dayGreeting = document.getElementById("day-greeting");
const hour = new Date().getHours();

if (hour < 9) {
  dayGreeting.textContent = "Good morning! ☀️";
} else if (hour < 18) {
  dayGreeting.textContent = "Hi there, have a nice day!";
} else {
  dayGreeting.textContent = "Good evening! 🌙";
}

new Date() vraća trenutni datum i vrijeme, .getHours() izvlači sat iz toga.

Slučajna poruka na klik

Drugačiji vic, ideja za putovanje ili navijački skandik svaki put:

const messages = [
  "Practice makes perfect!",
  "Let's go, Eagles! 🦅",
  "You miss every shot you don't take.",
  "Fans are the twelfth player.",
];

const messageButton = document.getElementById("message-button");
const messageEl = document.getElementById("message");

messageButton.addEventListener("click", () => {
  const random = Math.floor(Math.random() * messages.length);
  messageEl.textContent = messages[random];
});

Math.random() vraća slučajni broj između 0 i 1, a ostatak retka pretvara ga u slučajnu poziciju u nizu.

Brojač posjeta (samo za tebe)

Koliko si puta otvorio svoju web stranicu? Spremi u localStorage:

let visits = Number(localStorage.getItem("visits") ?? 0);
visits++;
localStorage.setItem("visits", visits);
console.log("You've opened this page " + visits + " times now");

Number(...) pretvara tekst iz memorije u broj, a ?? 0 znači “ako nema ničega, kreni od nule.”

Sklopivi odjeljak (harmonika)

Sakrij dugi jelovnik ili popis igrača pod klikabilnim naslovom:

const sectionHeading = document.getElementById("expand-heading");
const sectionContent = document.getElementById("expand-content");

sectionHeading.addEventListener("click", () => {
  sectionContent.classList.toggle("hidden");
});

Već imaš klasu .hidden { display: none !important; } iz lekcije o galeriji.

Prenesi novu verziju na internet

Tvoja web stranica na GitHub Pagesu još je stara verzija iz razine 1! Prenesi novu:

Otvori svoj repozitorij na github.com,
Dodaj datoteku → Prenesi datoteke,
povuci promijenjene datoteke (uglavnom script.js, style.css i sve .html datoteke) i klikni Potvrdi promjene.

U minuti tvoje čarolije će raditi i svi će ih moći vidjeti.

✅

Čestitamo, Čarobnjače! 🪄 Tvoja web stranica više nije samo lijepa – živa je. Reagira na klikove, pamti izbore, postavlja pitanja i odgovara na njih. I znaš kako radi svaki redak. U Razini 3 – Majstor naučit ćeš graditi web stranice kao profesionalci: React, komponente i vlastiti server.

Što ćeš ponijeti iz ove razine

JavaScript: varijable, uvjeti, funkcije, nizovi, objekti, petlje – osnove svakog programiranja.
Formula čarolije: pronađi element → slušaj događaj → poduzmi akciju.
localStorage za pamćenje, querySelectorAll + forEach za grupe elemenata, provjera unosa u obrascu.