JS) Date() 사용해보기(D-Day)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

https://velog.io/@dev-hannahk/js-d-day
https://laycoder.tistory.com/180

내가 작성한 코드를 저장해보자 🎁
기본 개념이나 막히는 부분은 위의 레퍼런스를 참고했다.

const h2 = document.querySelector("h2");

function getChristmas() {
  const christmasEve = new Date("2023-12-25T00:00:00+0900"); //크리스마스

  const now = new Date(); //오늘

  const result = christmasEve.getTime() - now.getTime(); //크리스마스 - 오늘

  const date = Math.floor(result / (1000 * 60 * 60 * 24));
  const hours = Math.floor((result % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((result % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((result % (1000 * 60)) / 1000);

  const info = `${date}d ${hours}h ${minutes}m ${seconds}s`;

  //여기서 innerHTML을 사용한다고 바로 화면에 뜨지 않는다.
  //함수 getChristmas()를 호출해야 나옴!
  h2.innerHTML = info;
}

//1초마다 갱신
function setIntervalFunc() {
  getChristmas();
  setInterval(getChristmas, 1000);
}

setIntervalFunc();

조만간 Date()를 사용해서 캘린더도 직접 만들어봐야겠다.