← Tilbake

Intro til JavaScript: Dashboard

Lær hvordan JavaScript kan gjøre en nettside levende ved å hente data og oppdatere innholdet automatisk.

Sentrale konsepter

DOM-manipulasjon

Koble til HTML

Vi bruker id for å finne elementer og endre teksten i dem.

Logikk

If/Else

Vi lærer koden å ta valg basert på om det er morgen eller kveld.

Tid

Intervaller

Vi får klokken til å tikke ved å kjøre kode hvert sekund.

1. Oppsett

Lag en mappe som heter dashboard og opprett disse tre filene:

2. HTML & CSS

Vi starter helt enkelt. Legg merke til id-navnene; de er "knaggene" JS bruker.

HTML-struktur:

<body>
  <h2 id="date">Laster dato...</h2>
  <h2 id="greeting">Laster hilsen...</h2>
  <h2 id="clock">Laster klokke...</h2>

  <script src="dashboard.js" defer></script>
</body>
Viktig: Husk defer i script-taggen. Det gjør at JavaScript venter til hele nettsiden er lastet inn før det begynner å jobbe.

3. JavaScript: Steg for steg

Del 1: Dato

Her henter vi dagens dato fra datamaskinen og skriver den inn i HTML-en.

const today = new Date();
const day = today.getDate();
const month = today.getMonth() + 1; // Måneder starter på 0
const year = today.getFullYear();

document.getElementById("date").textContent = day + "." + month + "." + year;

Del 2: Hilsen (Logikk)

Nå skal koden ta en beslutning basert på klokkeslettet.

const hourNow = today.getHours();
let greeting;

if (hourNow >= 18) {
  greeting = "God kveld!";
} else if (hourNow >= 12) {
  greeting = "God ettermiddag!";
} else if (hourNow >= 6) {
  greeting = "God morgen!";
} else {
  greeting = "God natt!";
}

document.getElementById("greeting").textContent = greeting;

Del 3: Klokke (Repetisjon)

Vi lager en funksjon som kjører om og om igjen.

function updateClock() {
  const now = new Date();
  const h = now.getHours();
  const m = String(now.getMinutes()).padStart(2, "0");
  const s = String(now.getSeconds()).padStart(2, "0");

  document.getElementById("clock").textContent = `Klokken er: ${h}:${m}:${s}`;
}

// Kjør funksjonen med en gang, og deretter hvert sekund (1000ms)
updateClock();
setInterval(updateClock, 1000);

4. Siste finish: Design

Nå som teknikken fungerer, er det din tur! Bruk Bootstrap og Flexbox i style.css for å lage:

Sjekkliste før levering

  • ✅ Dato vises korrekt (f.eks. 12.2.2026).
  • ✅ Hilsenen endrer seg etter klokka.
  • ✅ Sekundene i klokka teller oppover.
  • ✅ Designet er ryddig og bruker Flexbox.