728x90

프로젝트 개요

Time Timer

Time Timer는 구글의 업무 프로세스 '스프린트'에 사용되고 있고 사용 시 업무 집중력 향상에 도움을 준다고 알려져 있습니다.

 

이 Time Timer를 구매해서 사용하는 방법도 있지만 간단하게 확장 프로그램을 이용해서 사용하면 좋지 않을까라는 생각으로 프로젝트를 시작하게 되었습니다.

제작기간

2020. 03. 18 ~ 2020. 03. 19

관련 링크

크롬 확장프로그램 Time Timer 개발하기 - 1

 

크롬 확장프로그램 Time Timer 개발하기 - 1

google에 google chrome extension getting started라고 검색을 해줍니다. 검색결과에서 가장 상단의 링크로 들어가줍니다. 위 페이지는 크롬 확장프로그램을 만드는 방법에 대해 나와 있습니다. 이제 본인이 사..

1d1cblog.tistory.com

크롬 확장프로그램 Time Timer 개발하기 - 2

 

크롬 확장프로그램 Time Timer 개발하기 - 2

먼저 부채꼴 모양을 띄워보도록 하겠습니다. popup.html의 head 태그 안에 script를 추가해줍니다.

<h..< p=""> </h..<>

 

1d1cblog.tistory.com

크롬 확장프로그램 Time Timer 개발하기 - 3

 

크롬 확장프로그램 Time Timer 개발하기 - 3

이제 시간을 입력하고 시작버튼을 누르면 타이머가 동작되도록 해보겠습니다. popup.html은 변경없이 script.js에 코드를 추가해주겠습니다. 버튼 클릭 시 타이머가 실행되고 1초마다 바탕원을 다시 그리고 새로운..

1d1cblog.tistory.com

크롬 확장프로그램 Time Timer 개발하기 - 4

 

크롬 확장프로그램 Time Timer 개발하기 - 4

이제 만들어진 시계 타이머 둘레에 숫자를 입력해보겠습니다. 현재 만든 시계의 좌표는 아래와 같습니다. 이 원의 둘레 주변에 1 ~ 12의 숫자를 넣어주려고 합니다. 우선 간단하게 12시에만 숫자를 추가해보겠습..

1d1cblog.tistory.com

Github Link

https://github.com/psy1064/TimeTimer

 

psy1064/TimeTimer

Time Timer in chrome extension. Contribute to psy1064/TimeTimer development by creating an account on GitHub.

github.com

 

728x90

+ Recent posts