open_in_new content_copy 
<!DOCTYPE html>
<html>
<head>
  <title>Weather Data</title>
</head>
<body>
  <h2>Weather Info</h2>
  <input type="text" id="city" placeholder="Enter city name">
  <button onclick="getWeather()">Get Weather</button>

  <table border="1" id="weatherTable">
    <tr><th>City</th><th>Min Temp</th><th>Max Temp</th><th>Humidity</th></tr>
  </table>

  
        <script>
  async function getWeather() {
    const city = document.getElementById('city').value.trim();
    const apiKey = '36f9af4e269fe80b4cda0e7e8af0809d'; // Make sure this is valid

    if (!city) {
      alert("Please enter a city name.");
      return;
    }

    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

    try {
      const response = await fetch(url);
      const data = await response.json();
      if (response.ok) {
        const table = document.getElementById("weatherTable");
        const row = table.insertRow();
        row.innerHTML = `<td>${data.name}</td>
                         <td>${data.main.temp_min}°C</td>
                         <td>${data.main.temp_max}°C</td>
                         <td>${data.main.humidity}%</td>`;
      } else {
        alert(`Error: ${data.message}`);
      }
    } catch (error) {
      alert("Failed to fetch weather data. Please try again later.");
      console.error(error);
    }
  }
</script>

</body>
</html>