Vejr på din nettside

Byg en pæn widget med weekendprognose – en nyttig ting til ethvert af de fire projekter.

Open-Meteo kan også give en prognose for de kommende dage. Legg til bare det, du vil have, til adressen:

https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=auto

I svaret finder du daily.time (en liste over dage), daily.temperature_2m_max og daily.temperature_2m_min (de højeste og laveste temperaturer). Samme rækkefølge = den første dag matcher den første temperatur.

Du bygger så widgeten i en løkke:

<div id="pocasi" class="pocasi-widget"></div>

<script type="module">
  const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min&timezone=auto';
  const data = await (await fetch(adresa)).json();

  const dny = data.daily.time;
  const max = data.daily.temperature_2m_max;
  const min = data.daily.temperature_2m_min;

  let html = '';
  for (let i = 0; i < 3; i++) {
    const den = new Date(dny[i]).toLocaleDateString('en-US', { weekday: 'long' });
    html += `<div class="den">
      <strong>${den}</strong>
      <span>${Math.round(min[i])}–${Math.round(max[i])} °C</span>
    </div>`;
  }
  document.querySelector('#pocasi').innerHTML = html;
</script>

Og lidt CSS, så den ligner en ekte widget:

.pocasi-widget {
  display: flex;
  gap: 10px;
}
.pocasi-widget .den {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Nå er det din tur 💪

Legg til en værwidget, hvor det giver mening i prosjektet ditt:

🏫 Skolenettside – løsning

På skolebegivenhedssiden: “Vejr til skoleturen.” Sett koordinaterne til destinationen – børn og foreldre vil sette pris på at vide, hva de skal pakke.

🙋 Personlig nettside – løsning

I headeren eller footeren: vær i din by som et personligt touch (“Det er 18 °C her i min by i dag”).

🌍 Reisejournal – løsning

For hver planlagt tur, en widget med prognosen på destinationen. Skift bare koordinaterne til turens placering.

⚽ Klubnettside – løsning

På kampsiden: “Vejr til lørdagens kamp.” Finn banens koordinater på et kort. Bonus: hvis regn forventes, vis “Bring a raincoat!”

💡

Hvor får jeg koordinater fra? På en korttjeneste, høyreklikk på et sted → “What’s here?” – koordinaterne vises øverst.

✅

Sjekk: Din nettside har en widget med en ekte 3-dages prognose, stylet til at matche ditt design. Dataene indleses live fra API’en.

Dette tar du med deg fra leksjonen

Du forteller en API-adresse, hva du vil have, med delen etter spørgsmålstegnet (parametre).
Du bygger data fra lister ind i HTML med en for-løkke.
Tal i JSON blir til en ekte widget – du leverer designet.

Denne leksjonen er del av et betalt nivå

Jeg viser deg: at gjøre data til en widget

Nå er det din tur 💪

Dette tar du med deg fra leksjonen