script.js

const apiKey= "bcef13e0f46932d3fe851cbbc534b99a";   //api key only
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");

//Here the data object is containing the whole json content.
async function checkWeather(city){

    //fetch is a built-in function needs the whole url with apiKey.
    const response= await fetch(apiUrl + city + `&appid=${apiKey}`);

    //Invalid city handling.
    if(response.status== 404){
        document.querySelector(".error").style.display= "block";
        document.querySelector(".weather").style.display= "none";
        return;
    }

    var data= await response.json();                          //fetch is used to make HTTP requests( like Call API)

    console.log(data);  //await is used to wait for a promise to finish and then get results. work only inside async function
    
    //changing inner contrnt of element with id temp.
    document.querySelector(".temp").innerHTML= Math.round(data.main.temp) + "°C";

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

    //Changing the weather icon at different weather.
    if(data.weather[0].main== "Clouds"){
        weatherIcon.src= "images/clouds.png";
    }
    else if(data.weather[0].main== "Clear"){
        weatherIcon.src= "images/clear.png";
    }
    else if(data.weather[0].main== "Rain"){
        weatherIcon.src= "images/rain.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";
    }

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

}

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