Iso haaste: herätä koko verkkosivusi eloon

Tason 2 viimeinen tehtävä. Kaikki loitsut kerralla – plus muutama uusi idea päälle.

Tehtäväsi

Tällä kertaa ei ole uutta materiaalia. Saat listan tehtävistä, ja tiedät jo kaiken mitä niihin tarvitset. Juuri näin oikean kehittäjän työ näyttää: saat vaatimukset ja kokoat ne asioista jotka jo osaat.

Pakollinen osa 🎯

Käy verkkosivusi läpi ja varmista että kaikki viisi tämän tason loitsua ovat siinä elossa:

Skripti yhdistetty jokaiselle sivulle eikä konsolissa (F12) ole virheitä – mitään punaista ei pitäisi näkyä.
Tumma tila – kytkin headerissa jokaisella sivulla, ja valinta muistetaan.
Interaktiivinen painike tai laskuri – vähintään yksi loitsu muuttujalla ja ehdolla.
Valokuvagalleria lightboxilla – klikkaus suurentaa kuvan.
Tietovisa tai lomake validoinnilla – vähintään yksi näistä. Tee molemmat jos haluat!

Valinnaiset laajennukset 🌟

Valitse vähintään yksi (tai keksi oma):

Päivänajan mukaan tervehdys

Verkkosivu tervehtii eri tavalla aamulla ja illalla:

<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() palauttaa nykyisen päivämäärän ja kellonajan, .getHours() ottaa siitä tunnin.

Satunnainen viesti klikkauksella

Eri vitsi, matkaidea tai joukkuelaulu joka kerta:

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() palauttaa satunnaisen luvun 0 ja 1 välillä, ja loput rivistä muuttavat sen satunnaiseksi sijainniksi taulukossa.

Käyntilaskuri (vain sinulle)

Montako kertaa olet avannut verkkosivusi? Tallenna se localStorageen:

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

Number(...) muuttaa tekstin muistista numeroksi, ja ?? 0 tarkoittaa “jos siellä ei ole mitään, aloita nollasta.”

Taittuva osio (harmonikka)

Piilota pitkä menu tai pelaajalista klikattavan otsikon alle:

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

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

Sinulla on jo .hidden { display: none !important; } -luokka galleria-oppitunnilta.

Lataa uusi versio internetiin

Verkkosivusi GitHub Pagesissa on vielä vanha versio tasolta 1! Lataa uusi:

Avaa repository github.comissa,
Add file → Upload files,
raahaa muuttuneet tiedostot (pääasiassa script.js, style.css ja kaikki .html-tiedostot) ja klikkaa Commit changes.

Minuutin sisällä loitsusi pyörivät kaikkien nähtävissä.

✅

Onnittelut, Taikuri! 🪄 Verkkosivusi ei ole enää vain kaunis – se on elävä. Se reagoi klikkauksiin, muistaa valintoja, kysyy kysymyksiä ja vastaa niihin. Ja tiedät miten jokainen rivi toimii. Tasolla 3 – Mestari opit rakentamaan verkkosivuja kuin ammattilaiset: React, komponentit ja oma palvelin.

Mitä opit tästä tasosta

JavaScript: muuttujat, ehdot, funktiot, taulukot, objektit, silmukat – kaiken ohjelmoinnin perusteet.
Loitsukaava: löydä elementti → kuuntele tapahtumaa → tee toiminto.
localStorage muistamiseen, querySelectorAll + forEach elementtiryhmille, lomakkeen syötteen tarkistus.