58일차: Open Weather API 사용

웹페이지에서 날씨 데이터를 업데이트하는 작업을 했습니다. 개방형 날씨 API에서 데이터를 사용하고 있습니다. Spott API로 자동 완성을 설정하고 싶었지만 아직 작동하지 않기 때문에 OpenWeather API를 사용하여 도시를 검색합니다.

코드:

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);
        });
    }
})

코드는 다음과 같이 설명했습니다.
입력 요소에 이벤트 리스너를 연결하고 있습니다. keyup 키를 놓으면 발생합니다. 이벤트가 다른 시간에 계속 실행되는 것을 원하지 않기 때문입니다. 사용자가 키 코드 13을 입력할 때만 이벤트가 실행되도록 지정했습니다. 다음으로 Open weather API에 대한 get 요청을 만든 다음 내 페이지에 수신된 데이터를 업데이트합니다. fetch를 사용하면서 JSON으로 작업하는데 어려움이 있어서 Axios로 바꿨습니다. 반면 Axios는 JSON을 자동으로 변환하므로 작업하기가 더 쉽습니다.

리포지토리는 다음과 같습니다. Weather App Repository .

또한 자바 스크립트로 날짜와 시간을 업데이트하고 있습니다.

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()

그것이 오늘의 전부였습니다.
58일차