script.js

const apiKey = '8fde8d1e067a82ff125840cbc591f0d5'
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather?units=metric&q='

const searchInput = document.querySelector('.search input')
const searchbtn = document.querySelector('.search button')
const weatherIcon = document.querySelector('.weather-icon')

async function checkWeather(city) {
  const trimmedInput = city.trim()

  const response = await fetch(apiUrl + trimmedInput + `&appid=${apiKey}`)

  if (response.status == 404) {
    document.querySelector('.error').style.display = 'block'
    document.querySelector('.weather').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 = Math.round(data.wind.speed) + 'Km/h'

    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'
    } else if (data.weather[0].main == 'Snow') {
      weatherIcon.src = 'images/snow.png'
    }

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

searchInput.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    event.preventDefault()
    checkWeather(searchInput.value)
  }
})

searchbtn.addEventListener('click', () => {
  checkWeather(searchInput.value)
})