Stor utmaning: väck hela din webbplats till liv

Den sista uppgiften på nivå 2. Alla trollformler på en gång – plus några nya idéer ovanpå.

Ditt uppdrag

Den här gången finns inget nytt material. Du får en lista med uppgifter, och du kan redan allt du behöver för dem. Så här ser en riktig utvecklares arbete ut: du får en uppsättning krav och sätter ihop dem av saker du redan kan.

Obligatorisk del 🎯

Gå igenom din webbplats och se till att alla fem trollformler från den här nivån lever på den:

Scriptet kopplat på varje sida och inga fel i konsolen (F12 – inget rött ska synas).
Mörkt läge – en växel i headern på varje sida, och valet minns.
En interaktiv knapp eller räknare – minst en trollformel med variabel och villkor.
Ett fotogalleri med lightbox – klick gör ett foto större.
Ett quiz eller ett formulär med validering – minst ett av dem. Gör gärna båda!

Valfria tillägg 🌟

Välj minst ett (eller hitta på eget):

Hälsning baserad på tid på dygnet

Webbplatsen hälsar olika på morgonen och på kvällen:

<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() returnerar aktuellt datum och tid, .getHours() plockar ut timmen.

Slumpmeddelande vid klick

Ett annat skämt, reseidé eller lagrop varje gång:

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() returnerar ett slumpmässigt tal mellan 0 och 1, och resten av raden gör det till en slumpmässig position i arrayen.

Besöksräknare (bara för dig)

Hur många gånger har du öppnat din webbplats? Spara det i localStorage:

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

Number(...) gör text från minnet till ett tal, och ?? 0 betyder “om det inte finns något, börja från noll.”

Ihopfällbart avsnitt (dragspel)

Göm en lång meny eller trupp under en klickbar rubrik:

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

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

Du har redan klassen .hidden { display: none !important; } från gallerilektionen.

Ladda upp den nya versionen till internet

Din webbplats på GitHub Pages är fortfarande den gamla versionen från nivå 1! Ladda upp den nya:

Öppna ditt repository på github.com,
Add file → Upload files,
dra in de ändrade filerna (främst script.js, style.css och alla .html-filer) och klicka på Commit changes.

Om en minut kör dina trollformler för alla att se.

✅

Grattis, Trollkarl! 🪄 Din webbplats är inte bara snygg längre – den är levande. Den reagerar på klick, minns val, ställer frågor och svarar på dem. Och du vet hur varje rad funkar. I Nivå 3 – Mästaren lär du dig bygga webbplatser som proffsen: React, komponenter och din egen server.

Det här tar du med dig från nivån

JavaScript: variabler, villkor, funktioner, arrayer, objekt, loopar – grunderna i all programmering.
Trollformelformeln: hitta ett element → lyssna på en händelse → gör något.
localStorage för att minnas saker, querySelectorAll + forEach för grupper av element, kontroll av formulärinmatning.