4 c
Sun Apr 06 2025 17:52:53 GMT+0000 (Coordinated Universal Time)
Saved by
@exam3
<!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>
content_copyCOPY
Comments