열린 날씨 데이터에서 요일을 자동 업데이트합니다.

드디어 날씨 앱의 마지막 버그를 수정했습니다! 목표는 현재 날짜에서 요일을 업데이트하는 것이었습니다.

정적 사이트:

코드:

const nextDay = [document.querySelectorAll('#nextDay')]
const daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

let dayOftheWeek = nextDay[0]
for (i = 0; i < 7; i++) {
        let timeInUnix = data[i].dt
        let dateFromUnix = new Date(timeInUnix * 1000)

        dayOftheWeek[i].innerText = daysOfTheWeek[dateFromUnix.getDay()]

if(i === 0 ){
            dayOftheWeek[i].innerText = 'Tommorrow';
        }
}

코드는 다음과 같이 설명했습니다.
모든 카드 요소의 ID는 #nextDay 입니다. 저는 document.querySelectorAll()를 사용하여 모두 가져오고 배열에 저장합니다. 오늘부터 올바른 요일을 업데이트하면서 이 배열을 반복할 것입니다. open weather API에서 데이터를 가져오고 있는데 dt 속성은 open weather에서 받은 데이터의 일부입니다. 주간 데이터를 가져오고 있기 때문에 7개의 dt 속성이 있으므로 그에 따라 속성을 업데이트하는 속성을 반복해야 합니다.

dt 속성은 Unix에 있으며 1000을 곱하여 밀리초로 변환한 다음 값을 날짜 개체에 전달합니다. 날짜 객체는 날짜를 반환합니다. 날짜에서 요일을 0과 6 사이의 정수로 반환하는 함수getDay()를 첨부합니다. 여기서 0은 일요일입니다. 요일 배열로 변수를 선언했습니다. 요일의 이름을 얻으려면 getDay() 함수에 의해 생성된 정수를 내 daysOfTheWeek[] 배열의 인덱스로 전달합니다.

코드의 출력:


앱 링크: Weather app

오늘의 핵심 교훈은 문서를 읽어보세요! 도움을 요청할 때까지 dt 속성이 존재하는지 몰랐습니다.

74일째입니다.
내일 다시 하자