← 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. Dette trenger i ditt HTML-dokument:

<p id="quote">Her kommer sitatet</p>

I dashboard.js oppdaterer vi elementet med id quote for å vise et tilfeldig sitat:

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

For å vise værmeldingen i ditt HTML-element trenger du:

<p id="temp">Temperatur vises her</p>

I dashboard.js bruker vi fetch() og oppdaterer elementet med id temp for å vise temperaturen:

async function hentVaer() {
      const url = "https://api.open-meteo.com/v1/forecast?latitude=59.91&longitude=10.75&current_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 + await: fetch() henter data fra Internett (det tar litt tid), så vi “pauser” koden til vi har fått svar.
try: Vi pakker inn det som kan gå galt (nettverket kan være nede, URL kan være feil, API kan svare rart). Da kan vi håndtere feilen kontrollert.
catch (error): Hvis noe feiler inni try, havner vi her. error er info om hva som gikk galt, og vi kan vise en enkel melding i stedet for at alt stopper.

Bonus-oppgave: Legg til console.log(data); rett etter const data = await svar.json();. Åpne Console i nettleseren (F12) og last inn siden på nytt. Utforsk objektet og finn annen informasjon API-et sender (for eksempel vind, tidspunkt eller værkode). Prøv deretter å hente ut én ekstra verdi og vis den på siden.

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).