script.js

let input = document.querySelector('.input')
let qidir = document.getElementById('qidir')

const kalit = '882611258dc8283040b97c27fee779fd'

function Soat() {
    const soat = new Date()
    return soat.toLocaleDateString('uz-UZ', {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
        year: 'numeric'
    })
}
function bulutTanla(id) {
    if (200 >= id && id < 300) return "⛈️"
    if (300 >= id && id < 400) return "🌦️"
    if (500 >= id && id < 600) return "🌧️"
    if (600 >= id && id < 700) return "❄️"
    if (700 >= id && id < 800) return "🌫️"
    if (id === 800) return "☀️"
    if (id === 801) return "🌥️"
    if (id === 802) return "☁️"
    return "🌡️"
}

function Qidirish() {
    let shahar = input.value.trim()
    if (!shahar) return
    document.querySelector('.loading').classList.add('show')
    document.querySelector('.namuna').style.display = 'none'
    document.querySelector('.error').classList.remove('show')
    document.querySelector('.card').classList.remove('show')


    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${shahar}&appid=${kalit}&units=metric`)
        .then(malumot => malumot.json())
        .then(data => {
            console.log(data);
            document.querySelector('.shahar').innerText = `${data.name},${data.sys.country}`
            document.querySelector('.soat').innerText = Soat()
            document.querySelector('.temp').innerHTML = `${Math.round(data.main.temp)}<sup>°C</sup>`
            document.querySelector('.bulut').innerText = bulutTanla(data.weather[0].id)
            document.querySelector('.tur').innerText = data.weather[0].description
            document.querySelector('.namlik').innerText = `${Math.round(data.main.humidity)}%`
            document.querySelector('.shamol').innerText = `${Math.round(data.wind.speed)}m/s`
            document.querySelector('.kurish').innerText = `${(data.visibility / 1000).toFixed(2)}km`
            document.querySelector('.aniq-temp').innerText = `${Math.round(data.main.feels_like)}°C`

            document.querySelector('.loading').classList.remove('show')
            document.querySelector('.card').classList.add('show')
        })
        .catch(err => {
            document.querySelector('.loading').classList.remove('show')
            document.querySelector('.error').classList.add('show')
        })
}

qidir.addEventListener('click', Qidirish)