script.js

const apikey = "39cd926c3643252b986abaef595cb3b7";
const apiurl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

const searchBox = document.querySelector(".search-bar input");
const searchBtn = document.querySelector(".search-bar button");
const weatherIcon = document.querySelector(".weather-icon");

async function checkweather(city){
    const response = await fetch(apiurl + city + `&appid=${apikey}`);
    if(response.status == 404){
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    }else{

    
    
    var data = await response.json();

document.querySelector(".city").innerHTML = data.name;
document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
document.querySelector(".wind").innerHTML = data.wind.speed + " km/h";

if(data.weather[0].main == 'Clouds'){
    weatherIcon.src = "images/clouds.png";
}
else if(data.weather[0].main == 'Rain'){
    weatherIcon.src = "images/rain.png";
}
else if(data.weather[0].main == 'Clear'){
    weatherIcon.src = "images/clear.png";
}
else if(data.weather[0].main == 'Drizzle'){
    weatherIcon.src = "images/drizzle.png";
}
else if(data.weather[0].main == 'Mist'){
    weatherIcon.src = "images/mist.png";
}
else if(data.weather[0].main == 'Snow'){
    weatherIcon.src = "images/snow.png";
}

document.querySelector(".weather").style.display = "block";
document.querySelector(".error").style.display = "none";
    }

}

searchBtn.addEventListener("click",()=>{
    checkweather(searchBox.value);

});



checkweather();