Weather on your website

Build a nice widget with a weekend forecast – a useful thing for any of the four projects.

Open-Meteo can also give a forecast for the coming days. Just add what you want to the address:

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

In the response you’ll find daily.time (a list of days), daily.temperature_2m_max, and daily.temperature_2m_min (the highest and lowest temperatures). Same order = the first day matches the first temperature.

You then build the widget in a loop:

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

And a bit of CSS so it looks like a real 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;
}

Your turn 💪

Add a weather widget wherever it makes sense in your project:

🏫 School website – solution

On the school events page: “Weather for the school field trip.” Set the coordinates to the destination – kids and parents will appreciate knowing what to pack.

🙋 Personal website – solution

In the header or footer: weather in your city as a personal touch (“It’s 18 °C here in my town today”).

🌍 Travel journal – solution

For each planned trip, a widget with the forecast at the destination. Just change the coordinates for the trip’s location.

⚽ Club website – solution

On the match page: “Weather for Saturday’s game.” Find the field’s coordinates on a map. Bonus: if rain is expected, show “Bring a raincoat!”

💡

Where do I get coordinates? On a map service, right-click on a location → “What’s here?” – the coordinates will show up at the top.

✅

Check: Your website has a widget with a real 3-day forecast, styled to match your design. The data loads live from the API.

What to take away from this lesson

You tell an API address what you want using the part after the question mark (parameters).
You build data from lists into HTML with a for loop.
Numbers in JSON become a real widget – you provide the design.

This lesson is part of a paid level

Show me: turning data into a widget

Your turn 💪

What to take away from this lesson