Väder på din webbplats

Bygg en snygg widget med helgprognos – något användbart för alla fyra projekten.

Open-Meteo kan också ge prognos för kommande dagar. Lägg bara till det du vill ha i 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 hittar du daily.time (en lista med dagar), daily.temperature_2m_max och daily.temperature_2m_min (högsta och lägsta temperatur). Samma ordning = första dagen matchar första temperaturen.

Sedan bygger du widgeten i en loop:

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

Och lite CSS så den ser ut som en riktig 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 är det din tur 💪

Lägg till en väderwidget där det passar i ditt projekt:

🏫 Skolwebbplats – lösning

På sidan med skolevenemang: “Väder för skolutflykten.” Sätt koordinaterna till destinationen – barn och föräldrar uppskattar att veta vad de ska packa.

🙋 Personlig webbplats – lösning

I headern eller footern: väder i din stad som en personlig touch (“Det är 18 °C här i min stad idag”).

🌍 Resejournal – lösning

För varje planerad resa, en widget med prognos på destinationen. Byt bara koordinaterna för resans plats.

⚽ Klubbwebbplats – lösning

På matchsidan: “Väder för lördagens match.” Hitta planens koordinater på en karta. Bonus: om regn väntas, visa “Ta med regnkläder!”

💡

Var får jag koordinater? På en karttjänst, högerklicka på en plats → “What’s here?” – koordinaterna dyker upp upptill.

✅

Kolla: Din webbplats har en widget med en riktig 3-dagarsprognos, stylad efter din design. Datan laddas live från API:et.

Det här tar du med dig från lektionen

Du säger till ett API-adress vad du vill ha med delen efter frågetecknet (parametrar).
Du bygger data från listor till HTML med en for-loop.
Tal i JSON blir en riktig widget – du levererar designen.

Den här lektionen ingår i en betald nivå

Jag visar: göra data till en widget

Nu är det din tur 💪

Det här tar du med dig från lektionen