main.js

// hello dear;

const apiKey = "d0972356b06b45546154fb445e6db7e8";
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( ".city" ).innerHTML = "invalid City"
    document.querySelector( ".temp" ).style.display="none"
    document.querySelector( ".humidity" ).style.display="none"
    document.querySelector( ".wind" ).style.display="none"
  } else {
    var data = await response.json();
    console.log( data );
    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`;
    document.querySelector( ".temp" ).style.display = "block";
    document.querySelector( ".humidity" ).style.display = "block";
    document.querySelector( ".wind" ).style.display = "block"
  }
  
  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"
  }

}
searchbtn.addEventListener( "click", () => {
  checkWeather(searchBox.value);
  
} );
// the end