Počasie na tvojom webe

Postav pekný widget s víkendovou predpoveďou – užitočná vec pre ktorýkoľvek zo štyroch projektov.

Open-Meteo vie dať aj predpoveď na najbližšie dni. Stačí pridať do adresy, čo chceš:

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

V odpovedi nájdeš daily.time (zoznam dní), daily.temperature_2m_max a daily.temperature_2m_min (najvyššie a najnižšie teploty). Rovnaké poradie = prvý deň sedí s prvou teplotou.

Widget potom postavíš v slučke:

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

A trochu CSS, aby to vyzeralo ako skutočný 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;
}

Teraz ty 💪

Pridaj widget s počasím tam, kde to dáva zmysel v projekte:

🏫 Web školy – riešenie

Na stránke školských akcií: „Počasie na školský výlet.” Nastav súradnice cieľa – deti a rodičia ocenia, čo si zobrať.

🙋 Osobný web – riešenie

V hlavičke alebo pätičke: počasie v tvojom meste ako osobný dotyk („Dnes je u mňa v meste 18 °C”).

🌍 Cestovný denník – riešenie

Pre každý plánovaný výlet widget s predpoveďou v cieli. Stačí zmeniť súradnice podľa miesta výletu.

⚽ Web klubu – riešenie

Na stránke zápasu: „Počasie na sobotňajší zápas.” Nájdi súradnice ihriska na mape. Bonus: ak sa očakáva dážď, ukáž „Bring a raincoat!”

💡

Odkiaľ zobrať súradnice? Na mapovej službe pravý klik na miesto → „What’s here?” – súradnice sa zobrazia hore.

✅

Skontroluj sa: Tvoj web má widget so skutočnou 3-dňovou predpoveďou, nastylovaný podľa dizajnu. Dáta sa načítavajú naživo z API.

Čo si z tejto lekcie odnášaš

Adrese API povieš, čo chceš, cez časť za otáznikom (parametre).
Dáta zo zoznamov skladáš do HTML v slučke for.
Čísla v JSON sa menia na skutočný widget – dizajn dodáš ty.

Táto lekcia je súčasťou plateného levelu

Ukážem ti: premena dát na widget

Teraz ty 💪

Čo si z tejto lekcie odnášaš