CODE KATA #4

CODE KATA 🧗‍♂️

2021/12/24/00:00 까지 남은 날짜, 시간, 분, 초를 출력하는 페이지를 만들어보자.

요구조건

Try your hardest

해결과정

getTime()함수 내에서 Date()를 이용하여, xmasDay를 지정하고 now에 현재 시간을 저장한 후, gap을 선언하여 밀리초 단위의 차이를 각각 24시간, 60분, 60초로 나눈 몫과 나머지를 통해 크리스마스 이브까지 얼마의 시간이 남았는지 innerText를 통해 표현하며, 시간의 변화를 업데이트 하기 위해 setInterval(getTime,1000)을 통해 매초 갱신하도록 구상했다.

Divide & Conquer

앞서 언급한 대로의 진행을 위하여, html 파일내에는 <h1 id="js-clock"></h1>을 통해 추후 innerText를 통해 수정할 수 있도록 하였고, 해당 tag를 const clock = document.querySelector("#js-clock");을 통해 js파일 내부에 사전에 정의해주었다. 또한, 현재 시간과 크리스마스 이브까지의 시간차이를 계산하는 함수 getTime()과 페이지의 시작과 함께 실행되는 함수 init()을 선언하였다.

getTime()

getTime() 함수가 실행되고 가장 먼저 진행하는 것은 const now = new Date()를 통해 현재 시간을 받아오는 것이다. console.log(now)를 통해 확인하면 아래와 같다.
이후, const xmasDay = new Date("2021-12-24:00:00:00+0900");를 통해 크리스마스 이브를 선언해주었고, xmasDay와 now의 차이를 변수 gap에 저장하였다. 하지만, gap에는 밀리초 단위의 시간차이가 저장되어있기 때문에, 계산의 편리를 위해 초단위로 저장하였다. 현재까지 진행된 내용의 코드는 아래와 같다.

function getTime() {
  const now = new Date();
  const xmasDay = new Date("2021-12-24:00:00:00+0900");
  let gap = Math.floor((xmasDay - now) / 1000);
}

이후에는 daysToX를 gap을 86400(1년을 초로 변환) 으로 나누어준 몫을 저장해주고, gap을 gap에서 86400과 daysToX를 곱한 값을 빼준 값으로 최신화하여, 이후의 시간과 분,초가 남은 시간을 중복으로 체크하지 않도록 하였다. 이후에는 같은 방식으로 3600,60 (1시간을 초로 변환, 1분을 초로 변환) 을 이용하여 hoursToX와 minutesToX를 선언해주었다. minutesToX를 계산한 후 gap을 다시 최신화하면, 아래 내용이 성립함을 확인할 수 있다.

최초의 gap = daysToX + hoursToX + minutesToX + 마지막 gap

따라서, 해당 내용을 innerText를 통해 최신화 해주면 되는데, 이 과정에서 2자리의 단위가 출력되다가 셋 중 하나라도 한 자리의 숫자로 바뀌게 되면 통일성을 해쳐 보기 좋지 않은데, 한 자리의 숫자가 출력되는 경우 - 예를 들어 10분 9초인 경우 10분 09초로 출력이 되도록 innerText를 정의하도록 했다.

  const daysToX = Math.floor(gap / 86400);
  gap = gap - daysToX * 86400;
  const hoursToX = Math.floor(gap / 3600);
  gap = gap - hoursToX * 3600;
  const minutesToX = Math.floor(gap / 60);
  gap = gap - minutesToX * 60;
  clock.innerText = `${daysToX < 10 ? `0${daysToX}` : daysToX}d ${
    hoursToX < 10 ? `0${hoursToX}` : hoursToX
  }h ${minutesToX < 10 ? `0${minutesToX}` : minutesToX}m ${
    gap < 10 ? `0${gap}`: gap
  }s`;

따라서 위와 같은 코드를 작성하였고, 실행의 결과는 아래와 같다.