Weer op je website

Bouw een mooie widget met een weekendvoorspelling – nuttig voor elk van de vier projecten.

Open-Meteo kan ook een voorspelling voor de komende dagen geven. Voeg gewoon toe wat je wilt aan het adres:

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

In het antwoord vind je daily.time (een lijst met dagen), daily.temperature_2m_max en daily.temperature_2m_min (hoogste en laagste temperaturen). Dezelfde volgorde = de eerste dag hoort bij de eerste temperatuur.

Je bouwt de widget in een lus:

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

En wat CSS zodat het eruitziet als een echte 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 jij 💪

Voeg een weerwidget toe waar het in je project past:

🏫 Schoolwebsite – oplossing

Op de pagina met schoolevenementen: “Weer voor de schoolreis.” Zet de coördinaten op de bestemming – kinderen en ouders waarderen weten wat ze moeten inpakken.

🙋 Persoonlijke website – oplossing

In de header of footer: weer in je stad als persoonlijk tintje (“It’s 18 °C here in my town today”).

🌍 Reisdagboek – oplossing

Voor elke geplande reis een widget met de voorspelling op de bestemming. Verander de coördinaten voor de locatie van de reis.

⚽ Clubwebsite – oplossing

Op de wedstrijdpagina: “Weather for Saturday’s game.” Zoek de coördinaten van het veld op een kaart. Bonus: bij regen “Bring a raincoat!” tonen.

💡

Waar haal ik coördinaten? Op een kaartdienst, rechtsklik op een plek → “What’s here?” – de coördinaten verschijnen bovenaan.

✅

Controle: Je website heeft een widget met een echte 3-daagse voorspelling, gestyled naar je design. De data laadt live van de API.

Wat neem je mee uit deze les

Je vertelt een API-adres wat je wilt via het deel na het vraagteken (parameters).
Je bouwt data uit lijsten naar HTML met een for-lus.
Getallen in JSON worden een echte widget – jij levert het design.

Deze les maakt deel uit van een betaald niveau

Ik laat je zien: data omzetten in een widget

Nu jij 💪

Wat neem je mee uit deze les