Vrijeme na tvojoj web stranici

Napravi lijep widget s vikend prognozom – korisna stvar za bilo koji od četiri projekta.

Open-Meteo može dati i prognozu za nadolazeće dane. Samo dodaj što želiš u adresu:

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

U odgovoru ćeš pronaći daily.time (popis dana), daily.temperature_2m_max i daily.temperature_2m_min (najviše i najniže temperature). Isti redoslijed = prvi dan odgovara prvoj temperaturi.

Widget zatim gradiš u petlji:

<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 malo CSS-a da izgleda kao pravi 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;
}

Sad si ti na redu 💪

Dodaj widget s vremenom gdje ima smisla u tvom projektu:

🏫 Web stranica škole – rješenje

Na stranici školskih događaja: “Vrijeme za školski izlet.” Postavi koordinate na odredište – djeca i roditelji će cijeniti znati što ponijeti.

🙋 Osobna web stranica – rješenje

U zaglavlju ili podnožju: vrijeme u tvom gradu kao osobni dodir (“Danas je ovdje u mom gradu 18 °C”).

🌍 Putni dnevnik – rješenje

Za svako planirano putovanje widget s prognozom na odredištu. Samo promijeni koordinate za lokaciju putovanja.

⚽ Web stranica kluba – rješenje

Na stranici utakmice: „Vrijeme za subotnju utakmicu.“ Pronađi koordinate terena na karti. Bonus: ako se očekuje kiša, prikaži „Ponesi kišobran!“

💡

Odakle koordinate? Na karti desni klik na lokaciju → „Što je ovdje?“ – koordinate će se pojaviti na vrhu.

✅

Provjera: Tvoja web stranica ima widget s pravom 3-dnevnom prognozom, stiliziran prema tvom dizajnu. Podaci se učitavaju uživo iz API-ja.

Što ćeš ponijeti iz ove lekcije

API adresi kažeš što želiš dijelom nakon upitnika (parametri).
Podatke iz popisa gradiš u HTML petljom for.
Brojevi u JSON-u postaju pravi widget – dizajn daješ ti.

Ova lekcija je dio plaćene razine

Pokazat ću ti: pretvaranje podataka u widget

Sad si ti na redu 💪

Što ćeš ponijeti iz ove lekcije