56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Weather Forecast</title>
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
</head>
|
|
<body>
|
|
<h1>10-Day Weather Forecast</h1>
|
|
|
|
<!-- Input for location -->
|
|
<div class="location-input">
|
|
<label for="location">Enter a location (city or coordinates):</label>
|
|
<input type="text" id="location" placeholder="City or coordinates">
|
|
<button onclick="loadWeatherData()">Get Weather</button>
|
|
</div>
|
|
|
|
<!-- Weather display -->
|
|
<div class="weather-container" id="weather-container"></div>
|
|
|
|
<script>
|
|
async function loadWeatherData() {
|
|
const location = document.getElementById('location').value;
|
|
if (!location) {
|
|
alert('Please provide a location.');
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(`/api/weather?location=${location}`);
|
|
const data = await response.json();
|
|
|
|
const container = document.getElementById('weather-container');
|
|
container.innerHTML = ''; // Clear previous data
|
|
|
|
if (data.error) {
|
|
container.innerHTML = `<p>Error: ${data.error}</p>`;
|
|
return;
|
|
}
|
|
|
|
data.forEach(day => {
|
|
const dayDiv = document.createElement('div');
|
|
dayDiv.className = 'weather-day';
|
|
dayDiv.innerHTML = `
|
|
<h3>Date: ${day.date}</h3>
|
|
<p>Temperature: ${day.temperature_air_mean_200} °C</p>
|
|
<p>Precipitation: ${day.precipitation_height} mm</p>
|
|
<p>Wind Speed: ${day.wind_speed} km/h</p>
|
|
`;
|
|
container.appendChild(dayDiv);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|