Day 58: Consuming Open Weather API

I worked on updating weather data on my webpage. I'm consuming the data from open weather API. I was hoping I'd set up an autocomplete with Spott API but since It is not working yet, I'll use OpenWeather API to search cities.

The code:

const input = document.getElementById("input");
input.addEventListener('keyup', async (event) => {
    event.preventDefault();
    if (event.keyCode === 13) {
        const typedString = document.getElementById("input").value;

        await axios(`https://api.openweathermap.org/data/2.5/weather?q=${typedString}&APPID=72a730baaa2ebd7a0edabe3d09b870c2`, {
            "method": "GET"
        }).then(response => {
            let data = response.data
            console.log(data);

            const city = document.querySelector('.city');
            city.textContent = `${data.name},`

            const country = document.querySelector('.country');
            country.textContent = data.sys.country

            const weather = document.querySelector('.weather');
            weather.textContent = data.weather[0].description

            const temp = document.querySelector('.degrees')
            temp.textContent = `${Math.round(data.main.temp - 273.15)}°`;

            const humidity = document.querySelector('#humidityRate')
            humidity.textContent = `${data.main.humidity}%`

            const cloudRate = document.querySelector('#cloudRate');
            cloudRate.textContent = `${data.clouds.all}%`

        }).catch(err => {
            console.log(err);
        });
    }
})

The code explained:
I am attaching an event listener to the input element: keyup which will fire when a key is released. Since I do not want the event to keep firing every other time. I have specified that I only want the event to fire when the user hits enter, keyCode 13. Next, I am making a get request to Open weather API then updating the data received to my page. I switched to Axios because I had a hard time working with JSON while using fetch. Axios on the other hand automatically transforms JSON which makes it easier for me to work with.

Here is the repo: Weather App Repository.

I am also updating the date and time with javascript:

let today = new Date()

const day = document.querySelector('#day');
day.textContent = `${today.getDate()}th`

const month = document.querySelector('#month');
month.textContent = today.toLocaleString('default', { month: 'long' })

const year = document.querySelector('#year');
year.textContent = today.getFullYear()

That was all for the day.
Day 58