app.js

//api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

const weatherApi = {
    key: "edc3111acea643fcf9bb488ba8158a90",
    baseUrl: "https://api.openweathermap.org/data/2.5/weather"
}
//Event Listener Function on keypress
const searchInputBox = document.getElementById('input-box');

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


//Get Weather Report
function getWeatherReport(city){
    fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`)
    .then(weather =>{
        return weather.json();
    }).then(showWeatherReport);
}
//Show Weather Report
function showWeatherReport(weather){
    console.log(weather);

    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.round(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(weatherType.textContent == 'Clear'){

        document.body.style.backgroundImage = "url(images/clear.jpg)";

    }
    else if(weatherType.textContent == 'Clouds'){

        document.body.style.backgroundImage = "url(images/cloud.jpg)";

    }
    else if(weatherType.textContent == 'Haze'){

        document.body.style.backgroundImage = "url(images/cloud.jpg)";

    }
    else if(weatherType.textContent == 'Rain'){

        document.body.style.backgroundImage = "url(images/rain.jpg)";

    }
    else if(weatherType.textContent == 'sunny'){

        document.body.style.backgroundImage = "url(images/sunny.jpg)";

    }
    else if(weatherType.textContent == 'Snow'){

        document.body.style.backgroundImage = "url(images/snow.jpg)";

    }
    else if(weatherType.textContent == 'Thunderstorm'){

        document.body.style.backgroundImage = "url(images/thunderstorm.jpg)";

    }
    else{

        document.body.style.backgroundImage = "url(images/bg.jpg)";

    }
}
//Date Manage

function dateManage(dataArg){
    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 = dataArg.getFullYear();
    let month = months[dataArg.getMonth()];
    let date = dataArg.getDate();
    let day = days[dataArg.getDay()];

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

}