File size: 2,676 Bytes
fc8f5a2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
function displayWeather(data) {
const weatherDiv = document.getElementById("weatherResult");
const rain = data.rain ? data.rain["1h"] || data.rain["3h"] || 0 : 0;
weatherDiv.innerHTML = `
<h3>${data.name}, ${data.sys.country}</h3>
<p>Temperature: ${data.main.temp} °C</p>
<p>Humidity: ${data.main.humidity} %</p>
<p>Weather: ${data.weather[0].description}</p>
<p>Rain (last hour): ${rain} mm</p>
<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="weather icon">
`;
}
function getWeather(city = null, lat = null, lon = null) {
const apiKey = "8b578569eecee3ba36ea02c94b036ebc";
let url = "";
if (city) {
url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
} else if (lat && lon) {
url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;
} else {
document.getElementById("weatherResult").innerText = "No city or coordinates provided";
return;
}
fetch(url)
.then(response => {
if (!response.ok) throw new Error("City not found");
return response.json();
})
.then(displayWeather)
.catch(error => {
document.getElementById("weatherResult").innerText = error.message;
});
}
function getWeatherByCity() {
const city = document.getElementById("cityInput").value;
if (city.trim() !== "") {
getWeather(city);
} else {
document.getElementById("weatherResult").innerText = "Please enter a city name.";
}
}
// Auto-detect on page load
window.onload = function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
getWeather(null, position.coords.latitude, position.coords.longitude);
},
() => {
document.getElementById("weatherResult").innerText = "Geolocation permission denied.";
}
);
} else {
document.getElementById("weatherResult").innerText = "Geolocation not supported.";
}
// 🌓 Load saved theme preference
const savedTheme = localStorage.getItem("theme") || "light";
document.body.classList.add(savedTheme);
};
// 🌓 Theme toggle functionality
document.getElementById("toggleTheme").addEventListener("click", () => {
if (document.body.classList.contains("light")) {
document.body.classList.remove("light");
document.body.classList.add("dark");
localStorage.setItem("theme", "dark");
} else {
document.body.classList.remove("dark");
document.body.classList.add("light");
localStorage.setItem("theme", "light");
}
});
|