Wielkie wyzwanie: ożyw całą swoją stronę

Misja finałowa Poziomu 2. Wszystkie zaklęcia naraz – plus kilka nowych pomysłów na dokładkę.

Twoja misja

Tym razem nie ma nowej wiedzy. Dostaniesz listę zadań, a wszystko, czego do nich potrzebujesz, już umiesz. Dokładnie tak wygląda praca prawdziwego dewelopera: dostajesz zestaw wymagań i składasz je z rzeczy, które znasz.

Część obowiązkowa 🎯

Przejrzyj swoją stronę i upewnij się, że żyją na niej wszystkie pięć zaklęć z tego poziomu:

Skrypt podłączony na każdej stronie i bez błędów w konsoli (F12 – nie powinno być nic czerwonego).
Ciemny tryb – przełącznik w nagłówku na każdej stronie, a wybór jest zapamiętany.
Interaktywny przycisk lub licznik – przynajmniej jedno zaklęcie ze zmienną i warunkiem.
Galeria zdjęć z lightboxem – kliknięcie powiększa zdjęcie.
Quiz lub formularz ze sprawdzaniem – przynajmniej jedno z tych. Możesz zrobić oba!

Opcjonalne rozszerzenia 🌟

Wybierz przynajmniej jedno (albo wymyśl własne):

Pozdrowienie według pory dnia

Strona wita inaczej rano, a inaczej wieczorem:

<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() zwraca aktualną datę i godzinę, .getHours() wyciąga z tego godzinę.

Losowa wiadomość po kliknięciu

Za każdym razem inny żart, pomysł na wyjazd albo okrzyk drużyny:

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() zwraca losową liczbę między 0 a 1, a reszta linijki zamienia ją na losową pozycję w tablicy.

Licznik odwiedzin (tylko dla ciebie)

Ile razy otworzyłeś swoją stronę? Zapisz to w localStorage:

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

Number(...) zamienia tekst z pamięci na liczbę, a ?? 0 oznacza „jeśli nic tam nie ma, zacznij od zera.”

Zwijana sekcja (akordeon)

Schowaj długie menu albo skład drużyny pod klikalnym nagłówkiem:

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

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

Klasę .hidden { display: none !important; } masz już z lekcji o galerii.

Wrzuć nową wersję do internetu

Twoja strona na GitHub Pages to wciąż stara wersja z Poziomu 1! Wrzuć nową:

Otwórz swoje repozytorium na github.com,
Add file → Upload files,
przeciągnij zmienione pliki (głównie script.js, style.css i wszystkie pliki .html) i kliknij Commit changes.

Za minutę twoje zaklęcia będą działać dla wszystkich.

✅

Gratulacje, Czarodzieju! 🪄 Twoja strona nie jest już tylko ładna – ona żyje. Reaguje na kliknięcia, pamięta wybory, zadaje pytania i na nie odpowiada. A ty wiesz, jak działa każda linijka. W Poziomie 3 – Mistrz nauczysz się budować strony jak profesjonaliści: React, komponenty i własny serwer.

Co wyniesiesz z tego poziomu

JavaScript: zmienne, warunki, funkcje, tablice, obiekty, pętle – podstawy każdego programowania.
Formuła zaklęcia: znajdź element → nasłuchuj zdarzenia → wykonaj akcję.
localStorage do zapamiętywania, querySelectorAll + forEach dla grup elementów, sprawdzanie wpisów w formularzach.