[프로젝트] Time-ToDo: 시간 관리 플래너

바닐라JS 복습 프로젝트

노마드 코더의 바닐라JS 강의를 통해 Javascript를 복습하면서 구현해본 프로젝트.

노마드 코더의 강의는 투두리스트만 구현하는 것이었지만 이왕 투두리스트 만들 거면 타이머 기능까지 추가해서 더 쓸모있게 만들어 보자했다.

요즘 인스타그램 @soyang.log에 공부와 개발 내용들을 기록하고 있다. 그래서 이번 기회에 좀 더 예쁘게 한 일들을 기록하기 위해 정사각형에 알맞게 들어갈 수 있는 타이머 플래너를 구현했다.

다크한 테마보다는 항상 하얗고 밝은 느낌을 선호해왔는 데, 심슨 오프닝에 바트가 칠판에 낙서하는 모습을 보고 칠판 느낌을 내고 싶어졌다.

배경을 어두운 남색으로 주었다. 다크 테마라고 #000의 검정으로 주면 너무 답답해지기 때문!

컴퓨터공학! 우리는 개발자! 그렇다면?!

약간의 VSCode적인 느낌을 주기 위해 전체 text color는 밝은 하늘색으로 통일했다. 그래도 커서가 어떤 element를 가리키고 있는 지는 확인되야 하므로 todo list의 hover로 노란 계열을 주었다.

아! 내가 만들어서 완전히 내 취향 범벅이다. 너무 예쁘고 마음에 든다!

간단하게 기능을 설명해보자면,

1. 사용자 이름
   : 처음 시작할 때 사용자 이름을 입력받아 상단에 표시한다.
2. 일명 투두리스트
   : 할 일 목록을 정리할 수 있다!
3. 타이머
   : 각 할 일별로 타이머로 소요된 시간을 측정하고 저장할 수 있다!
4. 명언
   : 하단에 명언을 5초마다 출력한다.
5. 날씨 & 위치
   : 명언 아래에 현재 위치에 따른 날씨와 기온을 출력한다.

이렇게 적고나니 정말 별 거 없어 보인다. 하지만 열심히 만들었고 마음에 든다!

기술 스택

vanilla JS와 HTML, CSS만으로 구현했다.

복습과 동시에 구현해서 이틀만에 빠르게 완성했다.

Chrome Extensions

manifest.json을 작성해서 크롬 확장프로그램으로도 사용할 수 있게 했다.

웹 프로젝트는 꽤 해왔지만 크롬 확장은 처음 만들어 본다. 실행까지 확인 완료했고 extensions store에 배포할 계획이었으나
개발자 등록을 위해서는 $5를 결제해야 한다...

난 돈없는 대학생이다. 5달러 결제를 선뜻 결정하기엔 좀 힘들었다. 그래서 이 부분은 좀 더 고민해보려 한다.
(앞으로 공부하면서 배포할 일이 꽤 있을 거라 생각하므로 아마 곧 결제할 듯 하다.)

생각보다 너무마음에 들어서 시간날 때마다 계속 업데이트 해주려 한다!

• 프로젝트 깃헙 링크: https://github.com/kimsoyeong/momentum
• 프로젝트 데모 링크: https://kimsoyeong.github.io/momentum/