Vejr på din hjemmeside

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. Tilføj 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 rigtig 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;
}

Nu er det din tur 💪

Tilføj en vejrwidget, hvor det giver mening i dit projekt:

🏫 Skolehjemmeside – løsning

På skolebegivenhedssiden: “Vejr til skoleturen.” Sæt koordinaterne til destinationen – børn og forældre vil sætte pris på at vide, hvad de skal pakke.

🙋 Personlig hjemmeside – løsning

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

🌍 Rejsejournal – løsning

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

⚽ Klubhjemmeside – løsning

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

💡

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

✅

Tjek: Din hjemmeside har en widget med en rigtig 3-dages prognose, stylet til at matche dit design. Dataene indlæses live fra API’en.

Det tager du med fra denne lektion

Du fortæller en API-adresse, hvad du vil have, med delen efter spørgsmålstegnet (parametre).
Du bygger data fra lister ind i HTML med en for-løkke.
Tal i JSON bliver til en rigtig widget – du leverer designet.

Denne lektion er en del af et betalt niveau

Vis mig: at gøre data til en widget

Nu er det din tur 💪

Det tager du med fra denne lektion