script.js

const apiKey = "1c9950fd35005ad76c7f0c16afaf40a3"
const apiUrl ="https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
const searchBox=document.querySelector(".search input");
const searchBtn =document.querySelector(".search 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 = "imges required/clouds.png"
    }
    else if(data.weather[0].main==="Clear"){
        weatherIcon.src = "imges required/clear.png"
    }
    else if(data.weather[0].main==="Rain"){
        weatherIcon.src = "imges required/rain.png"
    }
    else if(data.weather[0].main==="Drizzle"){
        weatherIcon.src = "imges required/drizzle.png"
    }
    else if(data.weather[0].main==="Mist"){
        weatherIcon.src = "imges required/mist.png"
    }
    else if(data.weather[0].main==="Snow"){
        weatherIcon.src = "imges required/snow.png"
    }
    document.querySelector(".weather").style.display = "block";
    document.querySelector(".error").style.display = "none";
    }
  
}

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

searchBox.addEventListener("keypress",()=>{
    if (event.key === "Enter") { // Check if Enter key is pressed
event.preventDefault(); 

checkWeather(searchBox.value);
}
   
})