Preview:
<!DOCTYPE html>
<html>
<head>
  <title>Weather Forecast</title>
</head>
<body>
  <h2>5-Day Forecast</h2>
  <input type="text" id="forecastCity" placeholder="Enter city name">
  <button onclick="getForecast()">Get Forecast</button>

  <table border="1" id="forecastTable">
    <tr><th>Date</th><th>Temperature (°C)</th></tr>
  </table>

  <script>
    async function getForecast() {
      const city = document.getElementById('forecastCity').value;
      const apiKey = '36f9af4e269fe80b4cda0e7e8af0809d';  // Replace with your OpenWeatherMap API key
      const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}&units=metric`;

      const response = await fetch(url);
      const data = await response.json();

      const table = document.getElementById("forecastTable");
      table.innerHTML = `<tr><th>Date</th><th>Temperature (°C)</th></tr>`; // clear old rows

      data.list.forEach((item, index) => {
        if (index % 8 === 0) { // every 8th item = 24 hours
          const row = table.insertRow();
          row.innerHTML = `<td>${item.dt_txt.split(" ")[0]}</td>
                           <td>${item.main.temp}°C</td>`;
        }
      });
    }
  </script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter