TIL 20. Countdown(D-day)

👨🏻‍💻 4월부터 정식으로 WeCode에 갈 생각을 하면서 자기소개 페이지에 D-day countdown을 구현해보았다.(이쯤되면 자기소개 페이지가 아닌 내가 만들고 싶은 것들을 하나하나 구현하는 playground..ㅎ)

1. Date Class로 현재 날짜와 D-day를 받아온다.

2. getTime()으로 받아온 값은 날짜가 아니라 날짜를 초단위로 변환되어 나온 값이다.
   D-day의 getTime과 현재날짜의 getTime의 차는 남은 날짜의 getTime!

3. 그렇게 남은 날짜의 getTime을 다시 날짜로 바꾸기 위해서는 출력된 값을 (1000 60 60 * 24)의 값을 나누면 된다.(1000은 seconds, 분으로 환산하기 위해서는 60의 곱, 그 값을 시간으로 환산하기 위해서 다시 60의 곱, 마지막 하루로 환산하기 위해서 24를 곱한 값을 나누면 남은 day와 시간들..

4. 하루 단위로 끊어 출력하기 위해서 남은 값들을 버리는 함수 Math.floor를 사용하였다.

const DdayDay = document.querySelector('.D-day__time');
const DdayDivider = document.querySelector('.D-day__divider');
const DdayInfo = document.querySelector('.D-day__info');

function counter() {
    const dday = new Date("Apr 12, 2021,10:00:00").getTime();
    setInterval(function() {
        const now = new Date();
        const distance = dday - now;
        const d = Math.floor(distance / (1000 * 60 * 60 * 24));
        if (d < 0) {
            DdayDay.innerText = `Go!!`;
            DdayInfo.innerText = `Do your Best`
        } else {
            DdayDay.innerText = `${d+1}`;
        }
    }, 1000);
}
function flow() {
    setInterval(function timeFlow() {
        const dotdot = DdayDivider.classList;
        if(dotdot.contains('timeFlow') === true){
            dotdot.remove('timeFlow');
        }   else {
            dotdot.add('timeFlow');
        }
    }, 500)
}
function init() {
    counter();
    flow();
}
init();