Pogoda na twojej stronie

Zbuduj ładny widget z prognozą na weekend – przydatna rzecz w każdym z czterech projektów.

Open-Meteo potrafi też dać prognozę na kolejne dni. Wystarczy dopisać w adresie, czego chcesz:

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

W odpowiedzi znajdziesz daily.time (listę dni), daily.temperature_2m_max i daily.temperature_2m_min (najwyższą i najniższą temperaturę). Ta sama kolejność = pierwszy dzień pasuje do pierwszej temperatury.

Widget budujesz potem w pętli:

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

I trochę CSS, żeby wyglądało jak prawdziwy 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 💪

Dodaj widget pogody tam, gdzie ma sens w twoim projekcie:

🏫 Strona szkoły – rozwiązanie

Na stronie szkolnych wydarzeń: „Pogoda na szkolną wycieczkę.” Ustaw współrzędne na cel wycieczki – dzieci i rodzice będą wdzięczni, że wiedzą, co spakować.

🙋 Strona osobista – rozwiązanie

W nagłówku albo stopce: pogoda w twoim mieście jako osobisty akcent („Dziś u mnie w mieście jest 18 °C”).

🌍 Dziennik podróży – rozwiązanie

Przy każdej planowanej wycieczce widget z prognozą w miejscu docelowym. Wystarczy zmienić współrzędne na lokalizację wyjazdu.

⚽ Strona klubu – rozwiązanie

Na stronie meczu: „Pogoda na sobotni mecz.” Znajdź współrzędne boiska na mapie. Bonus: jeśli ma padać, pokaż „Weź kurtkę przeciwdeszczową!”

💡

Gdzie wziąć współrzędne? W serwisie mapowym kliknij prawym przyciskiem w miejsce → „Co tu jest?” – współrzędne pojawią się u góry.

✅

Sprawdź się: Na twojej stronie jest widget z prawdziwą prognozą na 3 dni, stylowany pod twój design. Dane ładują się na żywo z API.

Co wyniesiesz z tej lekcji

Adresowi API mówisz, czego chcesz, częścią po znaku zapytania (parametry).
Dane z list budujesz w HTML pętlą for.
Liczby z JSON stają się prawdziwym widgetem – design dajesz ty.

Ta lekcja jest częścią płatnego poziomu

Pokażę ci: z danych robi się widget

Teraz ty 💪

Co wyniesiesz z tej lekcji