Sää verkkosivullasi

Näytän sinulle: data widgetiksi

Open-Meteo voi antaa myös ennusteen tuleville päiville. Lisää vain mitä haluat osoitteeseen:

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

Vastauksesta löydät daily.time (päivien lista), daily.temperature_2m_max ja daily.temperature_2m_min (korkeimmat ja matalimmat lämpötilat). Sama järjestys = ensimmäinen päivä vastaa ensimmäistä lämpötilaa.

Rakennat widgetin silmukassa:

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

Ja vähän CSS:ää, jotta se näyttää oikealta widgetiltä:

.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;
}

Nyt sinun vuorosi 💪

Lisää sää-widget sinne missä se sopii projektiisi:

Mitä opit tästä oppitunnista

• Kerrot API-osoitteelle mitä haluat kysymysmerkin jälkeisellä osalla (parametrit).
• Rakennat dataa listoista HTML:ään for-silmukalla.
• JSON:n numerot muuttuvat oikeaksi widgetiksi – sinä tarjoat ulkoasun.

© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot