JS30-Countdown Timer

JS30 29강을 진행하면서 배운 내용을 정리해두려 합니다. 

---

1. HTML 요소에 name 어트리뷰트가 있으면 document에서 메소드 가져오는것 처럼 선택이 가능함.

      ...
      <form name="customForm" id="custom">
        <input type="text" name="minutes" placeholder="Enter Minutes">
      </form>
      ...
      
      //queryselector를 쓰지않고 document에서 바로 부를수 있다. 
      document.customForm.addEventListener(
      ...
      const mins = this.minutes.value; //form 안의 input 엘리먼트도 name 속성이 있어서 바로 선택이 가능함. 
      ...
      
      ) 
      

2. 시간 구하기 관련 구현

//내가 구현한 방식.

...

let timeInput;
let seconds= 0;
let minutes = 0;
let id;

function startTimer(e) {
    e.preventDefault();
    clearInterval(id);
    if (this.dataset.time) {
        timeInput = this.dataset.time
    } else {
        timeInput = this[0].value * 60;
    }
    let now = new Date().getTime();
    now += (timeInput * 1000);
    now = new Date(now);
    calculateTime();
    id = setInterval(calculateTime, 1000);
    endTime.innerText = `Come back at ${now.getHours()}:${(now.getMinutes() < 10) ? ('0' + now.getMinutes) : now.getMinutes()}`;
}

...

내가 구현한 방식의 잘못된점으로 생각되는 부분은 역시 전역변수를 넘 많이 썻다는 점이다. 전역변수로 설정해두면 나중에 네임스페이스가 겹져서 분명 그렇게 좋지는 않을거 같다. 

이하는 영상에서 구현했던 방식인데 전역변수를 쓰지않고 setInterval의 콜백이 호출할때마다 date.now()를 불러서 남은시각을 구했다. 나도 이런식으로 효율적으로 코드를 작성해야하는데 자꾸 모든 데이터를 일일히 하드코딩하려는게 큰 문제점인거 같다. 

let countdown; //전역변수는 인터벌 함수의 아이디저장용으로 한개만. 

function timer(seconds) {
    clearInterval(countdown);
    const now = Date.now();
    const then = now + seconds * 1000;
    displayTimerLeft(seconds);
    displayEndTime(then);

    countdown = setInterval(() => {
        const secondsLeft = Math.round((then - Date.now()) / 1000); //이렇게 하면 더 코드가 깔끔한거 같다.
        if (secondsLeft < 0) {
            clearInterval(countdown);
            return;
        }
        displayTimerLeft(secondsLeft);
    }, 1000)
};