29. Countdown Timer

Junghyun Park·2020년 12월 20일
0

Javascript30

목록 보기
2/30
post-thumbnail

프로젝트 소개

  • 잠시 자리 비움 시간을 알리기 위한 카운트다운 화면 구현
  • 구체적으로, 미리 정해진 시간 단위 버튼 or 직접 입력 시간(분)에 대한 카운트다운 화면 구현
  • 화면 상에는 카운트다운 숫자와 최종 돌아올 시간(카운트다운 종료시간)을 텍스트로 보여줌

코드 작성 계획

  1. 지정한 카운트다운 시간을 더한 미래시점과 현재 시점의 차이를 setInterval로 업데이트하여 카운트 다운 구현
  2. 계속 업데이트되는 시간를 화면에 표시, 돌아올 시간을 화면에 표시
  3. 버튼 이외, 직접 form을 통해 입력시간의 경우도 세팅 시간만 value값을 받는 부분만 수정해서 이벤트 핸들러 제작

배운 내용

최종 코드

내 코드

const timerButtons = document.querySelectorAll('.timer__button');
const specTime = document.querySelector('form');
const timeLeft = document.querySelector('.display__time-left');
const endTimeText = document.querySelector('.display__end-time');
// setInterval 실행 중 다른 버튼 눌렀을때 초기화해야하므로 global 변수 필요
let countdown;

function timeSet() {
  clearInterval(countdown);
  // const timeForSet = ;
  countdownF(this.dataset.time);
}

function countdownF(timeForSet) {
  const start = Date.now();
  countdown = setInterval(() => {
    const timeElapsed = Math.floor((Date.now() - start) / 1000);
    const timeLeftNum = timeForSet - timeElapsed;

    if (timeLeftNum >= 0) {
      if (timeLeftNum > 60) {
        const minLeft = Math.floor(timeLeftNum / 60);
        const secLeft = timeLeftNum % 60;
        timeLeft.textContent = `${minLeft}:${secLeft}`;
      } else {
        timeLeft.textContent = timeLeftNum;
      }
      //Date.now()는 70년 1월 1일 0초부터의 milliseconds 총 합산이므로, new Date()의 인자로 넣어서 미래 시간의 날짜로 새로운 변수 만들어야 함
      const end = new Date(start + timeForSet * 1000);
      const hour = end.getHours();
      const min = end.getMinutes();
      endTimeText.textContent = `Be Back At ${hour}시 ${min}분`;
    } else clearInterval(countdown);
  }, 1000);
}

function spectimeSet(e) {
  e.preventDefault();
  console.log(this);
  const mins = this.minutes.value;
  const secs = mins * 60;
  this.reset();
  countdownF(secs);
}

timerButtons.forEach((timerButton) =>
  timerButton.addEventListener('click', timeSet)
);
//qeurySelector로 따로 지정하지 않아도 document.name 속성명으로도 접근 가능
specTime.addEventListener('submit', spectimeSet);

정답코드

const timerButtons = document.querySelectorAll('.timer__button');
const specTime = document.querySelector('form');
const timeLeft = document.querySelector('.display__time-left');
const endTimeText = document.querySelector('.display__end-time');
// setInterval 실행 중 다른 버튼 눌렀을때 초기화해야하므로 global 변수 필요
let countdown;

function timeSet() {
  clearInterval(countdown);
  // const timeForSet = ;
  countdownF(this.dataset.time);
}

function countdownF(timeForSet) {
  const start = Date.now();
  countdown = setInterval(() => {
    const timeElapsed = Math.floor((Date.now() - start) / 1000);
    const timeLeftNum = timeForSet - timeElapsed;

    if (timeLeftNum >= 0) {
      if (timeLeftNum > 60) {
        const minLeft = Math.floor(timeLeftNum / 60);
        const secLeft = timeLeftNum % 60;
        timeLeft.textContent = `${minLeft}:${secLeft}`;
      } else {
        timeLeft.textContent = timeLeftNum;
      }
      //Date.now()는 70년 1월 1일 0초부터의 milliseconds 총 합산이므로, new Date()의 인자로 넣어서 미래 시간의 날짜로 새로운 변수 만들어야 함
      const end = new Date(start + timeForSet * 1000);
      const hour = end.getHours();
      const min = end.getMinutes();
      endTimeText.textContent = `Be Back At ${hour}시 ${min}분`;
    } else clearInterval(countdown);
  }, 1000);
}

function spectimeSet(e) {
  e.preventDefault();
  console.log(this);
  const mins = this.minutes.value;
  const secs = mins * 60;
  this.reset();
  countdownF(secs);
}

timerButtons.forEach((timerButton) =>
  timerButton.addEventListener('click', timeSet)
);
//qeurySelector로 따로 지정하지 않아도 document.name 속성명으로 접근 할 수도 있음
specTime.addEventListener('submit', spectimeSet);

느낀 점/ 기억할 점

  • Date.now()는 1970.1.1 0시부터 현재까지 milisecond를 반환, new Date()는 오늘 일시를 반환
  • 해당 객체 접근 시에, querySelector로 접근하는 방법 이외에, document.name 속성명.name 속성명 식으로 접근 가능
  • 코드 길이만 놓고보면 내 코드가 정답 코드 비해 10줄 정도 짧지만, 정답코드가 기능별로 function이 잘게 쪼개져 있어 유지보수나 업데이트에 유리할 것 같음
profile
21c Carpenter

0개의 댓글