Počasí na tvém webu

Postavíš hezký widget s předpovědí na víkend – užitečná věc pro každý ze čtyř projektů.

Open-Meteo umí i předpověď na další dny. Stačí do adresy přidat, co chceme:

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

V odpovědi najdeš daily.time (seznam dní), daily.temperature_2m_max a daily.temperature_2m_min (nejvyšší a nejnižší teploty). Stejné pořadí = první den patří k první teplotě.

Widget pak poskládáš v cyklu:

<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('cs-CZ', { 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, ať to vypadá jako opravdový 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;
}

Teď ty 💪

Přidej widget počasí tam, kde v tvém projektu dává smysl:

🏫 Stránky školy – řešení

Na stránku školních akcí: „Počasí na školu v přírodě”. Souřadnice nastav na místo, kam se jede – děti i rodiče ocení, co sbalit.

🙋 Osobní stránky – řešení

Do záhlaví nebo patičky: počasí v tvém městě jako osobní vizitka („U nás v Táboře je dnes 18 °C”).

🌍 Cestovatelský deník – řešení

Ke každému plánovanému výletu widget s předpovědí v cíli. Stačí změnit souřadnice podle místa výletu.

⚽ Web klubu – řešení

Na stránku zápasů: „Počasí na sobotní zápas”. Souřadnice hřiště najdeš na mapě. Bonus: když má pršet, vypiš „Vezmi si pláštěnku!”.

💡

Kde vzít souřadnice? Na mapy.cz klikni pravým tlačítkem na místo → „Co je zde?” – souřadnice se ukážou nahoře.

✅

Kontrola: Na webu máš widget se skutečnou předpovědí na 3 dny, nastylovaný k tvému designu. Data se načítají živě z API.

Co si z téhle lekce odnést

API adresě se říká, co chceš, pomocí částí za otazníkem (parametry).
Data ze seznamů skládáš do HTML cyklem for.
Z čísel v JSON je poctivý widget – design dodáváš ty.

Tato lekce je součástí placené úrovně

Ukaž mi to: z dat uděláme widget

Teď ty 💪

Co si z téhle lekce odnést