jwu-ice / pomodoro-timer

Pomodoro-timer on Vanila JS

🍊 사이트주소

데모 링크

🍎 이런 기능이 있어요

• 타이머 기능을 통해 시간을 관리한다.

  • 좌측 옵션을 통해 타이머를 조정할 수 있다.
  • 타이머의 시간은 반복되며 반복 될 때마다 화면바뀜과 소리로 집중시간 / 휴식시간을 표시한다.

• 투두리스트의 기능을 통해 작업을 관리한다.

  • 작업 리스트를 적는다.
  • 마무리 한 작업은 체크를 통해 아래로 내려보낼 수 있다.
  • 작업을 강조할 수 있다. (타이머페이지 상단에 표시됨)

• 상단과 하단의 네비게이션바를 통해 쉽게 타이머페이지 / 투두리스트페이지를 오갈 수 있다.

---

🍋 만들기 전 스케치

🥭 주제: 뽀모도로 타이머와 todolist

계획

• 월요일 : 타이머기능 & 뼈대 css
• 화요일 : 투두 리스트 & 스크롤 내릴 시
• 수요일 : 못한 부분 정리, 추가 기능 개발

완성 기능

• 타이머 (시작, 일시정지, 초기화)
• 타이머 시간 바꾸기
• Todo List (추가, 삭제, 완료한 것 체크, 포커스)
• 스크롤에 따라 Fixed된 헤더 이동
• 옵션 사이드바

---

1일차

• 크롱과 면담 진행

• 내용 : 관상학적으로... 좋은 얼굴이다.. 흠? 잘하고 계시다고 했다. 칸과 비슷한 주제라 같이 열심히 해야겠다!

• 25분 지나고 쉬는 시간 5분을 가져야 할 때, 그 상황에서 일시정지와 정지,

• 공부시간과 쉬는시간 외적인 차이를 두어야하는데 .. 5초 남았을 때 시간색 바꿈, 포커스되고 있는 todo를 break time으로 잠시 변경

→ 오늘은 기능적인 요소를 주로 만들생각. → 시간이 된다면 추가적으로 외적으로는 음악요소, 애니메이션 기능적으로는 투두리스트 정렬기능, 타이머시간 바꾸기 넣을거다!

2일차

• Todo List를 다 만들어야한다..!!! 체크하면 밑으로 가는것도 괜찮을듯. 추가, 수정, 삭제, 체크박스, 포커스

• 스크롤 이벤트 추가 스크롤 내릴 시 렌더링. 어느 시점. 올리면 다시 display:none ?

• middle칸을 bottom fixed로 하고 클릭시 위아래이동(애니메이션), 하면 다시 top fixed

• setTimeInterval은 자바스크립트엔진 내 지연되는 시간 때문에 정확히 시간을 재지 않기 때문에 정확한 시간을 재려면 setTimeout을 통한.. 로직이 있어야 할 것 같다.

• insertAdjacentHTML ....................... 끝에 Html이라고 적어놓고 한참동안이나 오류를 찾고 다녔다. 받는 엘리먼트가 잘못된건지 여러개를 받아서 그런건지 생각했었는데.. 왜 카멜표기법이아니라 HTML일까 ..?

• 칸의 오류를 새벽 내내 잡았다. 서너시간이 지나고 잡긴했지만,,, 사실 내 시간쓰는건 상관없지만, 빠른 시간 내에 오류를 못잡은 내 머리가 답답했다... 설명도 잘 못하고.. 누군가를 알려줄만큼의 능력이 부족한 걸 느꼈다.. 언넝 열심히 하자

내일 해야할 것!

1. 타이머는 시간이 정확해야함
2. 타이머시간바꾸는 옵션
3. 로컬스토리지저장
4. 효과음이나 노래 넣기도 해보자.

3일차

• 일단... focus하는거 해야하고, check된것은 focus아예 안되게 막아놓고. check된 것 css랑 rod 줄 수정해야함.

• 스크롤 이벤트 추가 스크롤 내릴 시 렌더링. 어느 시점. 올리면 다시 display:none ?

• middle칸을 bottom fixed로 하고 클릭시 위아래이동(애니메이션), 하면 다시 top fixed

• 추가적인 기능 1. 로컬스토리지저장 (필요없는 기능이라 안함.. 시간때문아님!) 2. 타이머 시간바꾸는 옵션

3. 타이머 지연시간 11초정도를 0.1초로 만들어보자.
4. 효과음이나 노래 넣기도 해보자.

---

회고

• 스크롤이벤트가 두 개가 겹치는 현상이 있어 한 가지를 비동기로 두어 해결했다. ⇒ setTimeout을 0으로 두어 비동기함수로 콜스택에 쌓인 함수를 전부 실행하고 나중에 실행하게 두었는데 변화가 없었다.. 알고보니 스크롤 내릴 때 하나하나에 비동기이벤트가 발생해 어느정도의 시간 텀을 더 줘야했던 것 같다. ⇒ 0ms → 10ms로 바꾸니 잘 됐다!
• 모델과 뷰, 구분을 지었지만 로직이나 계산 등 대부분을 뷰에서 해결하려고 한 것 같다.
• 하고 싶은 기능은 많고, 할 수 있을거라 생각했다. 하기 전까지는.. 부족해서 많이 만들지 못했다. 어제 컨퍼런스에서 이전 기수 빠삐코가 말한 것 처럼 시간 안에 만들기 위해 어느정도 구체적인 계획을 세우는게 중요한 것 같다.
• 로컬스토리지 저장이 잘 안됐다. 만들 떄 부터 고려했으면 좋았을텐데 너무 지저분해져있어서 오류를 못 찾았다.. ㅜ

크롱의 코코아 에서의 마지막 말씀

• 프로그래밍 하나를 깊게 보는게 좋다.
• 알고리즘에 매달릴 필요는 없다. 물론 중요하지만
• 도구나 프레임워크를 익히려고 한다기보단 적어도 6개월동안 바닐라로 배웠으면 좋겠다.

---

12/3 Update

• LocalStorage 저장
• Focus 시 삭제, 수정 시 풀리는 버그 수정