Meteo sul tuo sito web

Te lo mostro: trasformare i dati in un widget

Open-Meteo può anche dare una previsione per i prossimi giorni. Basta aggiungere cosa vuoi all’indirizzo:

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

Nella risposta troverai daily.time (una lista di giorni), daily.temperature_2m_max, e daily.temperature_2m_min (le temperature più alte e più basse). Stesso ordine = il primo giorno corrisponde alla prima temperatura.

Poi costruisci il widget in un ciclo:

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

E un po’ di CSS così sembra un widget vero:

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

Ora tocca a te 💪

Aggiungi un widget meteo dove ha senso nel tuo progetto:

Cosa porti via da questa lezione

• A un indirizzo API dici cosa vuoi con la parte dopo il punto interrogativo (parametri).
• Costruisci dati da liste in HTML con un ciclo for.
• I numeri in JSON diventano un widget vero – a te fornire il design.

© 2026 Ing. Martin Polak / AlgoRhino · Condizioni d'uso dei contenuti