La météo sur ton site web

Construis un joli widget avec une prévision du week-end – utile pour n'importe lequel des quatre projets.

Open-Meteo peut aussi donner une prévision pour les jours à venir. Ajoute juste ce que tu veux à l’adresse :

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

Dans la réponse tu trouveras daily.time (une liste de jours), daily.temperature_2m_max et daily.temperature_2m_min (les températures max et min). Même ordre = le premier jour correspond à la première température.

Tu construis ensuite le widget dans une boucle :

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

Et un peu de CSS pour que ça ressemble à un vrai 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;
}

À toi 💪

Ajoute un widget météo là où ça a du sens dans ton projet :

🏫 Site web d'école – solution

Sur la page des événements scolaires : « Météo pour la sortie scolaire. » Mets les coordonnées de la destination – les enfants et les parents apprécieront de savoir quoi emporter.

🙋 Site web personnel – solution

Dans l’en-tête ou le pied de page : la météo dans ta ville comme touche personnelle (« Il fait 18 °C ici dans ma ville aujourd’hui »).

🌍 Journal de voyage – solution

Pour chaque voyage prévu, un widget avec la prévision à la destination. Change juste les coordonnées pour l’emplacement du voyage.

⚽ Site web de club – solution

Sur la page du match : « Météo pour le match de samedi. » Trouve les coordonnées du terrain sur une carte. Bonus : si la pluie est prévue, affiche « Apporte un imperméable ! »

💡

Où trouver les coordonnées ? Sur un service de cartes, clic droit sur un endroit → « Qu’y a-t-il ici ? » – les coordonnées s’affichent en haut.

✅

Vérifie : Ton site web a un widget avec une vraie prévision sur 3 jours, stylisé pour correspondre à ton design. Les données se chargent en direct depuis l’API.

Ce que tu retiens de cette leçon

Tu dis à une adresse API ce que tu veux avec la partie après le point d’interrogation (paramètres).
Tu construis des données de listes en HTML avec une boucle for.
Les nombres en JSON deviennent un vrai widget – tu fournis le design.

Cette leçon fait partie d'un niveau payant

Montre-moi : transformer les données en widget

À toi 💪

Ce que tu retiens de cette leçon