script.js

const container = document.querySelector('.container');
const search = document.querySelector('.search-box button');
const weatherBox = document.querySelector('.weather-box');
const weatherDetails = document.querySelector('.weather-details');
const notFoundError = document.querySelector('.not-found');

search.addEventListener("click", () => {
    const APIKey = "3bdab85fdb8dbdaff2ad841669434044";
    const city = document.querySelector(".search-box input").value;

    if (city === "") return;

    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIKey}`)
        .then(response => response.json()).then(json => {

            if (json.cod === "404") {
                container.style.height = "400px";
                weatherBox.style.display = "none";
                weatherDetails.style.display = "none";
                notFoundError.style.display = "block";
                notFoundError.classList.add("fadeIn");
                return;
            }

            notFoundError.style.display = "none";
            notFoundError.classList.remove("fadeIn");

            const image = document.querySelector(".weather-box img");
            const temperature = document.querySelector(".weather-box .temperature");
            const description = document.querySelector(".weather-box .description");
            const humidity = document.querySelector(".weather-details .humidity span");
            const wind = document.querySelector(".weather-details .wind span");
            console.log(json.weather[0].main);
            switch (json.weather[0].main) {
                case "Clear":
                    image.src = "images/clear.png";
                    break;

                case "Rain":
                    image.src = "images/rain.png";
                    break;

                case "Snow":
                    image.src = "images/Snow.png";
                    break;

                case "Clouds":
                    image.src = "images/cloud.png";
                    break;

                case "Haze":
                    image.src = "images/Haze.png";
                    break;

                default:
                    image.src = "";
            }

            temperature.innerHTML = `${parseInt(json.main.temp)}<span>°C</span>`;
            description.innerHTML = `${json.weather[0].description}`;
            humidity.innerHTML = `${json.main.humidity}%`;
            wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`;

            weatherBox.style.display = '';
            weatherDetails.style.display = '';
            weatherBox.classList.add('fadeIn');
            weatherDetails.classList.add('fadeIn');
            container.style.height = '590px';

        })


})