Vreme na tvoji strani

Zgradi lep pripomoček s tedensko napovedjo – koristno za vse štiri projekte.

Pokažem ti: podatke v pripomoček

Open-Meteo lahko da tudi napoved za prihodnje dni. V naslov samo dodaš, kar hočeš:

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

V odgovoru najdeš daily.time (seznam dni), daily.temperature_2m_max in daily.temperature_2m_min (najvišje in najnižje temperature). Enak vrstni red = prvi dan ustreza prvi temperaturi.

Pripomoček zgradiš v zanki:

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

In malo CSS, da izgleda kot pravi pripomoček:

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

Zdaj si na vrsti 💪

Dodaj pripomoček za vreme tja, kjer ima smisel v tvojem projektu:

🏫 Šolska stran – rešitev

Na strani dogodkov: “Vreme za šolski izlet.” Nastavi koordinate destinacije – otroci in starši bodo hvaležni, da vedo, kaj vzeti s seboj.

🙋 Osebna stran – rešitev

V glavi ali nogi: vreme v tvojem mestu kot osebni dotik (“It’s 18 °C here in my town today”).

🌍 Potovalni dnevnik – rešitev

Za vsako načrtovano potovanje pripomoček z napovedjo na destinaciji. Koordinate samo spremeniš za lokacijo potovanja.

⚽ Klubska stran – rešitev

Na strani tekme: “Vreme za sobotno tekmo.” Koordinate igrišča najdi na zemljevidu. Bonus: če se pričakuje dež, pokaži “Bring a raincoat!”

💡

Kje dobim koordinate? Na zemljevidu desni klik na lokacijo → “What’s here?” – koordinate se pokažejo zgoraj.

✅

Preveri se: Tvoja stran ima pripomoček s pravo 3-dnevno napovedjo, oblikovan po tvojem dizajnu. Podatki se nalagajo v živo iz API-ja.

Kaj si vzameš iz te lekcije

API-ju poveš, kaj hočeš, z delom naslova za vprašajem (parametri).
Podatke iz seznamov zgradiš v HTML z zanko for.
Številke v JSON postanejo pravi pripomoček – dizajn dodaš ti.

Ta lekcija je del plačljive stopnje

Pokažem ti: podatke v pripomoček

Zdaj si na vrsti 💪

Kaj si vzameš iz te lekcije