Weather
// script.js
const apiKey = “0e0d82113da1d73bf96fbbca4cea0956”; // Replace with your API key
const cityInput = document.getElementById(“cityInput”);
const getWeatherButton = document.getElementById(“getWeather”);
const cityNameElement = document.getElementById(“cityName”);
const temperatureElement = document.getElementById(“temperature”);
const descriptionElement = document.getElementById(“description”);
const weatherIconElement = document.getElementById(“weatherIcon”);
const errorElement = document.getElementById(“error”);
const weatherDataElement = document.getElementById(“weatherData”);
getWeatherButton.addEventListener(“click”, () => {
const city = cityInput.value;
if (city) {
getWeatherData(city);
} else {
errorElement.textContent = “Please enter a city name.”;
weatherDataElement.style.display = ‘none’;
}
});
async function getWeatherData(city) {
try {
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`; // Use metric units
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error(“City not found”);
}
const data = await response.json();
// Extract data
const cityName = data.name;
const temperature = data.main.temp;
const description = data.weather[0].description;
const iconCode = data.weather[0].icon;
const iconUrl = `https://openweathermap.org/img/wn/${iconCode}@2x.png`;
// Update the UI
cityNameElement.textContent = cityName;
temperatureElement.textContent = `Temperature: ${temperature}°C`;
descriptionElement.textContent = `Description: ${description}`;
weatherIconElement.src = iconUrl;
weatherIconElement.alt = description;
// Show the weather data and clear any previous errors
weatherDataElement.style.display = ‘block’;
errorElement.textContent = “”;
} catch (error) {
console.error(“Error fetching weather data:”, error);
errorElement.textContent = error.message; // Display the error message
weatherDataElement.style.display = ‘none’;
}
}
