index.js

const api =  {
  key:"28fd15358cdecbc1a1dfef367e71acef",
  base: "api.openweathermap.org/data/2.5/"
}

const search = document.querySelector(".search");
const btn = document.querySelector(".button-submit");
btn.addEventListener("click", getInput);

function getInput (event) {
    event.preventDefault();
    if (event.type == "click") {
        getData(search.value);
        //console.log(search.value);
        //console.log(`${api.base}weather?q=${search.value}&units=metric&appid=${api.key}`);
    }
}

function getData () {
    fetch(`https://${api.base}weather?q=${search.value}&units=metric&appid=${api.key}`)
        .then(response => {
            return response.json();
        }).then(displayData);

}

function displayData (response) {
    console.log(response);
        if (response.cod === "404") {
            const error = document.querySelector(".error");
            error.textContent = "Please enter a valid city";
            search.value = "";
        } else {
            const error = document.querySelector(".error");
            error.textContent = "";
            const city = document.querySelector(".city");
            city.innerText = `${response.name}, ${response.sys.country}`;

            const today = new Date();
            const date = document.querySelector(".date");
            date.innerText = dateFunction(today);

            const temp = document.querySelector(".temp");
            temp.innerHTML = `Temp: ${Math.round(response.main.temp)} <span>°C</span>`;

            const weather = document.querySelector(".weather");
            weather.innerText = `Weather: ${response.weather[0].main}`;

            const tempRange = document.querySelector(".temp-range");
            tempRange.innerText = `Temp Range: ${Math.round(response.main.temp_min)}°C / ${Math.round(response.main.temp_max)}°C`;

            search.value = "";
          }
}

function dateFunction (d) {
    let months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
    let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

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

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