main.js

const weatherApi = {
    key: "9060c81002ddd912a4458b84d181dbdd",
    baseUrl: "https://api.openweathermap.org/data/2.5/weather?"
}

const searchInputBox = document.getElementById("input-box");
const warmsg = document.querySelector(".warmsg");
let time = 1;

searchInputBox.addEventListener("keypress", (event) => {
    if(event.keyCode == 13) {
        console.log(searchInputBox.value);      
        getWeatherReport(searchInputBox.value);
        document.querySelector(".weather-body").style.display = "block";        
    }
});

function getWeatherReport(city) {
    fetch(`${weatherApi.baseUrl}q=${city}&appid=${weatherApi.key}&units=metric`)
    .then(weather => {        
        return weather.json();
    }).then(showWeatherReport);
}

function showWeatherReport(weather) {
    console.log(weather);

    if(weather.cod === "404"){
        document.querySelector(".weather-body").style.display = "none";
        if(time == 1){
        warmsg.classList.add("error");
        warmsg.innerHTML = "City Not Found";
        time++;
        }
        else
        document.getElementById("error").style.display = "block";       
    }

    else{
    
        document.getElementById("error").style.display = "none";

        let city = document.getElementById("city");
        city.innerText = `${weather.name}, ${weather.sys.country}`;

        let temperature = document.getElementById("temp");
        temperature.innerHTML = `${Math.round(weather.main.temp)}°C`;

        let minMaxTemp = document.getElementById("min-max");
        minMaxTemp.innerHTML =  `${Math.floor(weather.main.temp_min)}°C (min)/ ${Math.ceil(weather.main.temp_max)}°C (max)`

        let weatherType = document.getElementById("weather");
        weatherType.innerText = `${weather.weather[0].main}`;

        let date = document.getElementById("date");
        let todayDate = new Date();
        date.innerText = dateManage(todayDate);
    }

    

    if(Math.round(weather.main.temp) < 10){
        document.body.style.backgroundImage = "url(images/cold.jpg)";
    }
    else if(Math.round(weather.main.temp) >= 10 && Math.round(weather.main.temp) <= 35){
        document.body.style.backgroundImage = "url(images/moderate.jpg)";
    }
    else if(Math.round(weather.main.temp) > 35){
        document.body.style.backgroundImage = "url(images/hot.jpg)";
    }
}

function dateManage(dateArg) {
    let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    let year = dateArg.getFullYear();
    let month = months[dateArg.getMonth()];
    let date = dateArg.getDate();
    let day = days[dateArg.getDay()];

    return `${date} ${month} (${day}), ${year}`;
}