[Pomodoro]progress bar 기능을 하는 UI만들기

사실 html 자체에 내장된 멋진 <progress> 엘리먼트가 있지만은.

좀더 커스텀한 ui를 만들어보고 싶다 할 수 있겠다.

카카오톡으로 뭘 공유할거냐 했을 때 이걸 이용해

무언가 재밌는걸 할 수 있지않을까 싶다.

---

1. 조사

구글 검색 시작.

달팽이 귀엽군

검색 1분만에 맘에 드는게 있어 결정해버렸다.

깔끔쓰

체크 표시로 한 섹션의 완료를 명확히 확인할 수 있는 이것으로 결정.

자 그럼 만들어볼까.

 

2. 계획

한 섹션의 시간이 끝나면 저 빈 동그라미에 체크표시와 색이 채워져야한다.

 

데이터를 어떻게 활용할 것인지 생각해보자.

아래는 처음 Home화면에 들어왔을 때 세팅되는 데이터의 모습이다.

remainingTime에 있는 프로퍼티들을 이용하여 화면이 그려진다.

900초가 100%의 기준점이 되어야하고, 1초가 줄어들 때