[JavaScript] 운동 관리 타이머(Workout Timer) Side Project

728x90

💪

Click! 👉 https://github.com/DasolPark/Dasol_JS_WorkoutTimer

JavaScript와 반응형 CSS를 사용하여 데스크톱 또는 모바일에서 사용할 수 있는 운동 도우미 타이머 어플리케이션입니다.

📌운동 종목과 종목의 세트를 상세히 작성할 수 있으며, ⏳각 세트별로 완료한 시간을 체크해줍니다.
💡운동 종목과 세트는 추가 또는 삭제가 가능하며, 운동을 완료하면 완료된 시간을 수정할 수 없습니다.

Date Object를 이용하여 현재 시간을 표시하도록 만들었으며, 브라우저 Local Storage에 닉네임을 저장할 수 있도록 했습니다.
스탑워치는 setTimeout()을 이용하여 시간이 계속 증가될 수 있도록 하였습니다.
또한, DOM을 이용하여 종목이나 세트 element가 추가되거나 삭제될 수 있도록 제작하였습니다.

시작 화면과 운동이 입력된 화면

운동 시간을 체크하며 진행되는 화면

데스크톱 전체 화면

 

저작자표시

'Project > Side-Project' 카테고리의 다른 글

[CSS] 웹&모바일 앱 디자인(Web and Mobile Application Design)  (0)	2020.02.19
[ReactJS] Navigator와 OpenWeatherMapAPI를 이용한 날씨 정보 페이지  (0)	2020.02.15
[JS] 로컬 스토리지를 이용해 '게시판' 만들어 보기  (0)	2020.01.25
[JS] 나만의 모멘텀 만들기(Momentum Clone) Side-Project  (0)	2020.01.23
[CSS] 왓츠앱 디자인 패턴 복제하기(WhatsApp Design Clone) Side Project  (0)	2020.01.20
[JavaScript] 운동 관리 타이머(Workout Timer) Side Project  (2)	2020.01.16