JavaScript:
const apikey = "4b4d9b3f4f033f8d35cdjdf";
const weatherDataEl = document.getElementById("weather-data");
const cityInputEl = document.getElementById("city-input");
const formEl = document.querySelector("form");
formEl.addEventListener("submit", (event) => {
event.preventDefault();
const cityValue = cityInputEl.value;
getWeatherData(cityValue);
});
async function getWeatherData(cityValue) {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${cityValue}&appid=${apikey}&units=metric`
);
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
const temperature = Math.round(data.main.temp);
const description = data.weather[0].description;
const icon = data.weather[0].icon;
const details = [
`Feels like: ${Math.round(data.main.feels_like)}`,
`Humidity: ${data.main.humidity}%`,
`Wind speed: ${data.wind.speed} m/s`,
];
weatherDataEl.querySelector(
".icon"
).innerHTML = `<img src="http://openweathermap.org/img/wn/${icon}.png" alt="Weather Icon">`;
weatherDataEl.querySelector(
".temperature"
).textContent = `${temperature}°C`;
weatherDataEl.querySelector(".description").textContent = description;
weatherDataEl.querySelector(".details").innerHTML = details
.map((detail) => `<div>${detail}</div>`)
.join("");
} catch (error) {
weatherDataEl.querySelector(".icon").innerHTML = "";
weatherDataEl.querySelector(".temperature").textContent = "";
weatherDataEl.querySelector(".description").textContent =
"An error happened, please try again later";
weatherDataEl.querySelector(".details").innerHTML = "";
}
}console error
index.js:17
GET https://api.openweathermap.org/data...4b4d9b3f4f033f8d35cc6979624fdf52&units=metric 401 (Unauthorized)
- You did not specify your API key in API request.
- Your API key is not activated yet. Within the next couple of hours, it will be activated and ready to use. tikk wela blumu
Last edited:
