← Tilbake

JavaScript Modul 2: Det Interaktive Dashboardet

Nå skal vi gjøre dashboardet smart. Vi skal hente ekte værdata fra nettet og la brukeren styre utseendet selv.

Nye konsepter

Events

Klikk og Reaksjon

Vi bruker addEventListener for å kjøre kode når brukeren trykker på knapper.

API & Fetch

Hente ekte data

Vi kobler oss til en ekstern server for å få temperaturen akkurat nå.

Arrays

Lister

Vi lærer å lagre mange ting i én variabel, som en samling av visdomsord.

1. Interaktivitet: Endre farge

Legg til knapper i HTML-en som lar brukeren velge "Dark Mode" eller "Light Mode".

<button id="darkBtn" class="btn btn-dark">Mørkt tema</button>
<button id="lightBtn" class="btn btn-outline-dark">Lyst tema</button>

I dashboard.js bruker vi "lyttere" for å fange opp klikk:

document.getElementById("darkBtn").addEventListener("click", function() {
  document.body.style.backgroundColor = "#222";
  document.body.style.color = "white";
});

document.getElementById("lightBtn").addEventListener("click", function() {
  document.body.style.backgroundColor = "white";
  document.body.style.color = "black";
});

2. Tilfeldige sitater (Arrays)

Vi lager en funksjon som plukker ut et tilfeldig sitat hver gang siden lastes.

const sitater = [
  "Kode er poesi som fungerer.",
  "Feil er bare uventede læringsmuligheter.",
  "Husk å ta pause og drikke vann!",
  "JavaScript er hjernen i nettsiden din."
];

const tilfeldigTall = Math.floor(Math.random() * sitater.length);
document.getElementById("quote").textContent = sitater[tilfeldigTall];

3. Pro-steg: Hente vær fra API

Dette er magien. Vi bruker fetch for å hente værdata for Oslo fra et åpent API.

async function hentVaer() {
  const url = "https://api.open-meteo.com/v1/forecast?latitude=59.91&longitude=10.75¤t_weather=true";
  
  try {
    const svar = await fetch(url);
    const data = await svar.json();
    const temp = data.current_weather.temperature;
    
    document.getElementById("temp").textContent = `I Oslo er det nå ${temp}°C`;
  } catch (error) {
    document.getElementById("temp").textContent = "Kunne ikke hente vær.";
  }
}

hentVaer();

Hva skjer her? async og await forteller JavaScript at vi må vente litt på svar fra Internett før vi kan gå videre i koden.

4. Utfordring: Din tur!

Bruk alt du har lært til å utvide dashboardet ditt:

Personlig hilsen: Lag et <input>-felt der man skriver navnet sitt, og oppdater hilsenen din med navnet.
Bakgrunns-magi: Få bakgrunnen til å skifte farge automatisk hvis det er kaldere enn 0 grader ute.
Flere sitater: Legg til minst 10 egne sitater i listen din.

Sjekkliste for Modul 2

✅ Knappene endrer farge på nettsiden.
✅ Sitatet endrer seg når du laster inn siden på nytt.

✅ Temperaturen hentes live fra Internett.
✅ Koden har ingen feilmeldinger i Console (F12).