Countdown Timer

[gringrape]

Countdown Timer

Tier: 1-Beginner

We all have important events we look forward to in life, birthdays, anniversaries, and holidays to name a few. Wouldn't it be nice to have an app that counts down the months, days, hours, minutes, and seconds to an event? Countdown Timer is just that app!

The objective of Countdown Timer is to provide a continuously decrementing display of the he months, days, hours, minutes, and seconds to a user entered event.

Constraints

• Use only builtin language functions for your calculations rather than relying on a library or package like MomentJS. This assumes, of course, that the language of your choice has adequate date and time manipulation functions built in.
• You may not use any code generators such as the Counting Down To site. You should develop your own original implementation.

User Stories

• [x] User can see an event input box containing an event name field, an date field, an optional time, and a 'Start' button.
• [x] User can define the event by entering its name, the date it is scheduled to take place, and an optional time of the event. If the time is omitted it is assumed to be at Midnight on the event date in the local time zone.
• [x] User can see a warning message if the event name is blank.
• [x] User can see a warning message if the event date or time are incorrectly entered.
• [x] User can see a warning message if the time until the event data and time that has been entered would overflow the precision of the countdown timer.
• [x] User can click on the 'Start' button to see the countdown timer start displaying the days, hours, minutes, and seconds until the event takes place.
• [x] User can see the elements in the countdown timer automatically decrement. For example, when the remaining seconds count reaches 0 the remaining minutes count will decrement by 1 and the seconds will start to countdown from 59. This progression must take place from seconds all the way up to the remaining days position in countdown display.

Bonus features

• [ ] User can save the event so that it persists across sessions
• [ ] User can see an alert when the event is reached
• [ ] User can specify more than one event.
• [ ] User can see a countdown timers for each event that has been defined.

Useful links and resources

• Images of analog tube-based countdown timers can be found here
• clearInterval MDN
• setInterval MDN
• Date MDN

Example projects

Simple Clock/Countdown Timer Countdown Timer built with React

[gringrape]

작업 1. 디자인

작업목표

• 디자인 툴을 사용해서 대략적인 스케치를 작성한다.

  작업결과

  

[gringrape]

작업 2. 컴포넌트 설계

작업 목표

• 디자인에 맞춰서 적절한 크기로 컴포넌트를 나눈다.

  컴포넌트 설계

• App - 상태를 관리한다.
• Page - 요소들을 배치한다.
• Form - 이름과 날짜를 입력한다.
• List - 할 일의 목록을 관리한다.
• Item - 남은날짜를 표시한다.

[gringrape]

작업 3. UI 만들기

작업목표

• 디자인에 맞게 요소들을 배치한다.

  작업개요

• 색은 신경쓰지 않는다.
• Page 에서 요소들의 위치를 조절한다.
• 각 컴포넌트에서 기본적인 요소를 생성한다.
• 각 컴포넌트에서 기본적인 요소의 위치를 조절한다.

  작업계획

• [x] Page Component - 글자 크기 설정, 요소배치
• [x] Form Component - html tag 활용해서 입력 폼 만들기, 반응형으로 만들기, 배치하기
• [x] Item Component - 시계 아이콘, 날짜, 입력 버튼

  어려웠던 것

• input 과 button 의 세로위치가 잘 안맞았다. vertical align 속성을 input 에 적용해 어느정도 해소 했지만, 완벽한 해결책이 되지 못했다. 같은 영역안에서 세로위치를 통일하는 좋은 방법은 없을까?
• 반응형 디자인을 적용하는 과정에서 css 가 금방 지저분해졌다. 이것을 고치고 싶다. 어떻게 하면 좋을까?
• 보기 좋게 만들기위해서는 치수를 잘 맞춰주어야 한다. 치수를 잘 맞춰주려면 디자인 단계에서 요소의 크기와 위치가 이미 결정되어 있어야 한다.

[gringrape]

작업 4. 상태 추가

작업 내용

• 입력중인 이벤트 정보, 저장된 이벤트 정보가 필요.
• newEvent - {name, date, time}
• events - [{id, name, datetime} ... ]

[gringrape]

작업 5. 정적인 상태에서 UI 동작 구현

작업 목표

• 상태가 정적으로 존재할때, 어플리케이션 동작을 구현

  작업 계획

  1. events 가 존재할때

• [x] events 들이 갯수 만큼 표시된다.
• [x] events 들 각각이 현재로부터 얼마나 남았는지 표시된다.
• [x] 시간이 진행된다

[gringrape]

작업 4.5

작업목표

• 두개의 날짜가 주어질때, 두 날짜의 차이를 구하는 유틸을 작성한다.

  작업계획

• [x] 두개의 Date 객체가 주어질때, 그 차이가 어떻게 계산되는지 확인한다.
• [x] 계산된 결과를 활용할 수 있는 방법을 찾는다

  작업방법

• 두 Date 객체의 차이가 milisecond 단위임을 이용한다.

[gringrape]

작업 4.6

작업목표

시간이 흘러가도록 하기

작업방향설정

어떻게 re-render 하게 할 것인가?

• 타이머가 변하는 것은 본질적으로 상태가 변하는 것은 아님.
• 본질적 상태가 변하지 않을때도 re-render 하게 만들어야 한다.

  방법1. 무기명 상태를 만들어서 rerender 하고 싶을때, 상태가 업데이트 되도록 한다.

  출처: https://chaewonkong.github.io/posts/react-forceUpdate.html

• [x] 리듀서로 무기명 상태와 업데이터를 받는다.
• [x] setInterval 을 통해서 업데이터를 실행한다.

[gringrape]

미구현 내용

• [x] 오차범위에 있는 값이 시간으로 들어올때 경고하기
• [ ] 시간이 다 된 아이템 알람울리거나 삭제

구현 후기

• statless component 를 강제로 업데이트 하는 것 말고 타이머를 구현할 수 있는 방법이 궁금하다.
• 코드가 개판이다. 일단 만드는게 좀 더 숙련되면 코드도 신경써야겠다.
• handleSubmit 을 form 에 달아주어야 하는걸 착각해서 시간을 오래썼다. 의도했던 대로 동작이 안되면 form 스펙을 mdn 에서 찾아봤어야 했다.
• utils 에서 타이머를 구하는 방식이 매우 거칠다. 나우를 상수로 하고, 나머지 값만 받으면 더 좋았을것 같다. 무언가 계속 중복된다면 개선의 여지가 있다는 뜻이다.