Grote uitdaging: breng je hele website tot leven

De laatste missie van Level 2. Alle spreuken tegelijk – plus een paar nieuwe ideeën erbovenop.

Je missie

Deze keer is er geen nieuw materiaal. Je krijgt een lijst met taken, en je weet alles wat je nodig hebt. Zo ziet het werk van een echte ontwikkelaar eruit: je krijgt eisen en bouwt ze uit dingen die je al kent.

Verplicht deel 🎯

Loop je website door en zorg dat alle vijf spreuken uit dit level erop leven:

Het script gekoppeld op elke pagina en geen fouten in de console (F12 – niets roods).
Donkere modus – een schakelaar in de header op elke pagina, en de keuze wordt onthouden.
Een interactieve knop of teller – minstens één spreuk met een variabele en een voorwaarde.
Een fotogalerij met lightbox – klikken maakt een foto groter.
Een quiz of een formulier met validatie – minstens één van beide. Doe gerust beide!

Optionele uitbreidingen 🌟

Kies minstens één (of verzin je eigen):

Begroeting op basis van tijd

De website begroet anders ‘s ochtends en ‘s avonds:

<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() geeft de huidige datum en tijd, .getHours() haalt het uur eruit.

Willekeurig bericht bij klik

Elke keer een andere grap, reisidee of teamkreet:

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() geeft een willekeurig getal tussen 0 en 1, en de rest van de regel maakt er een willekeurige positie in de array van.

Bezoekteller (alleen voor jou)

Hoe vaak heb je je website geopend? Bewaar het in localStorage:

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

Number(...) zet tekst uit het geheugen om in een getal, en ?? 0 betekent “als er niets staat, begin bij nul.”

Inklapbare sectie (accordeon)

Verberg een lang menu of selectie onder een klikbare kop:

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

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

Je hebt de class .hidden { display: none !important; } al uit de galerijles.

Upload de nieuwe versie naar internet

Je website op GitHub Pages is nog de oude versie uit Level 1! Upload de nieuwe:

Open je repository op github.com,
Add file → Upload files,
sleep de gewijzigde bestanden erin (vooral script.js, style.css en alle .html-bestanden) en klik op Commit changes.

Binnen een minuut draaien je spreuken voor iedereen.

✅

Gefeliciteerd, Tovenaar! 🪄 Je website is niet meer alleen mooi – hij is levend. Hij reageert op klikken, onthoudt keuzes, stelt vragen en beantwoordt ze. En je weet hoe elke regel werkt. In Level 3 – Meester leer je websites bouwen als de professionals: React, componenten en je eigen server.

Wat neem je mee uit dit niveau

JavaScript: variabelen, voorwaarden, functies, arrays, objecten, lussen – de fundamenten van alle programmeren.
De spreukformule: vind een element → luister naar een gebeurtenis → onderneem actie.
localStorage om dingen te onthouden, querySelectorAll + forEach voor groepen elementen, formulierinvoer controleren.