script.js

const apikey = 'bf592f49316d07c10c1bdc588a1587ac'
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather?units=metric&q='
const btn = document.querySelector('.btn')
const search = document.querySelector('.search-bar')
async function checkWeather(city) {
    const response = await fetch(apiUrl + city + `&appid=${apikey}`)
    if(response.status == 404){
        document.querySelector('.error').style.display = 'block'
        return;
    }
    else{
        document.querySelector('.error').style.display = 'none'
    }
    var data = await response.json()
    document.querySelector('.cityName').innerHTML = data.name
    document.querySelector('.temperature').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'){
        document.querySelector('.weather-icon').src = 'weather-img/images/clouds.png'
    }
    else if(data.weather[0].main == 'Clear'){
        document.querySelector('.weather-icon').src = 'weather-img/images/clear.png'
    }
    else if(data.weather[0].main == 'Rain'){
        document.querySelector('.weather-icon').src = 'weather-img/images/rain.png'
    }
    else if(data.weather[0].main == 'Drizzle'){
        document.querySelector('.weather-icon').src = 'weather-img/images/drizzle.png'
    }
    else if(data.weather[0].main == 'Mist'){
        document.querySelector('.weather-icon').src = 'weather-img/images/mist.png'
    }
    else if(data.weather[0].main == 'Snow'){
        document.querySelector('.weather-icon').src = 'weather-img/images/snow.png'
    }
}

btn.addEventListener('click', () => {
    checkWeather(search.value)
})