웹 개발을 이제 막 시작하고 나서
적당히 로직 연습도 되고 디자인도 적당히 되는 그런 주제를 고민하다 나온 주제다.
Pomodoro(뽀모도로?)라고 부르는 이 친구는 이탈리아의 프란체스코 치릴로 라는 경영 컨설턴트가 제안한 방법론이다.
꽤 유명한 시간 관리 방법론인데,
25분의 작업 시간과 5분의 휴식시간으로 이루어져 있고
이를 작업이 끝날 때 까지 계속 반복하는 것이다.
이 방법대로 하면 작업시간에 높은 집중력을 유지할 수 있어서
자주 쉬는 것 같지만 전체 작업시간이 단축되는 효과를 볼 수 있다.
기능 자체가 많지 않고 단순히 25분과 5분 타이머를 무한 반복하고 이를 세는 프로그램이다.
일단 기능 정리부터 해보았다.
큰 프로젝트라면 노션에 표라도 만들어서 그럴듯하게 적어야 하지만
그냥 작은 기능 하나이기에 메모장에 작성하였다.
<p>
1. 디자인
ㄱ. POMODORO 타이틀
ㄴ. 타이머 시계
ㄷ. 타이머 진행 바
ㄹ. 시작/정지 버튼
ㅁ. 리셋버튼
ㅂ. 연속 POMODORO 카운터
2. 기능
ㄱ. 시작 버튼으로 타이머 작동
ㄴ. 정지 버튼으로 타이머 정지
ㄷ. 리셋 버튼으로 타이머 초기화, 카운터 초기화
ㄹ. 타이머 25 -> 5 -> 25 -> 5 무한 반복
ㅁ. 타이머 진행도에 따른 progress바 작동
</p>
디자인
그냥 큰거 없이 기획 순서대로 요소 배치를 진행했다.
코드는 다음과 같다.
<body>
<div class = "container-pomodoro">
<h1>Pomodoro</h1>
<h2 class = "pomodoro-text">25:00</h2>
<div class="progress-container">
<div class="progress"></div>
</div>
<div class = "container-button">
<button id="button-startstop">start!</button>
<button class="button-reset">Reset!</button>
</div>
<div class="pomodoro-cnt-container">
<h2 class="pomodoro-cnt-text">POMODORO Run</h2>
<h3 class="pomodoro-cnt">0</h3>
</div>
</div>
</body>실무에서 해본적이 없어 그럴듯하게 클래스 지정하고 했는데,
어차피 하나만 쓸거면 아이디로 해도 똑같지 않나... 하는 생각이 들었다.
사실 저 Progress는 아이디어만 갖고 있지 실 구현은 아직 어려웠다.
그래서 구글의 도움을 빌렸고 매우 좋은 CSS 애니메이션 사이트를 찾을 수 있었다.
https://freefrontend.com/javascript-progress-bars/
32 JavaScript Progress Bars
Collection of hand-picked free vanilla JavaScript progress bar code examples. Update of January 2020 collection. 16 new items.
freefrontend.com
이중에 내가 사용한 프로그레스 바는
See the Pen Progress Bar by The Programming Expert (@theprogrammingexpert) on CodePen.
보기에 깔끔하고 직관적인 것을 골랐다.
여기에 일단 js파일과 css 파일을 연결 시키고,
css 파일을 작성해 나름 괜찮은 느낌으로 만들어 보았다.
<!--pomodoro.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pomodoro</title>
<link rel="stylesheet" href="css/pomodoro-style.css">
</head>
<body>
<div class = "container-pomodoro">
<h1>Pomodoro</h1>
<h2 class = "pomodoro-text">25:00</h2>
<div class="progress-container">
<div class="progress"></div>
</div>
<div class = "container-button">
<button id="button-startstop">start!</button>
<button class="button-reset">Reset!</button>
</div>
<div class="pomodoro-cnt-container">
<h2 class="pomodoro-cnt-text">POMODORO Run</h2>
<h3 class="pomodoro-cnt">0</h3>
</div>
</div>
<script src="js/pomodoro.js"></script>
</body>
</html>/* pomodoro-style.css */
body {
background-color: beige;
}
h1 {
font: 40px sans-serif;
}
.container-button {
display: flex;
justify-content: center;
align-items: center;
height: 70px;
padding: 5px;
flex-direction: row;
}
.pomodoro-text {
font: 20px sans-serif;
color: green;
}
#button-startstop {
padding: 10px;
margin: 10px;
background-color: red;
color: white;
border: none;
cursor: pointer;
}
.start{
background-color: green;
}
.stop{
background-color: red;
}
.button-reset {
padding: 10px;
margin: 10px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
}
.pomodoro-cnt-container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
flex-direction: column;
}
.pomodoro-cnt-text {
font: 20px sans-serif;
}
.pomodoro-cnt{
font: 30px sans-serif;
}
.container-pomodoro {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
flex-direction: column;
}
.progress-container {
height: 0.8rem;
width: 32rem;
border-radius: 0.4rem;
background: #000;
}
.progress-container .progress {
height: 100%;
width: 0;
border-radius: 0.4rem;
background: #ff4754;
transition: width 0.1s ease;
}
여기까지의 결과물은 다음과 같다.
내가봐도 맘에 안들긴 하는데 일단 밀어붙여놨다.
코드 작성
작동이나 시키자는 생각에 일단 js 부터 썼다.
일단 요소부터 가져오고
const ButtonClick = document.querySelector('#button-startstop');
const ButtonReset = document.querySelector('.button-reset');
const PomodoroText = document.querySelector('.pomodoro-text');
const PomodoroCnt = document.querySelector('.pomodoro-cnt');
const progressbar = document.querySelector(".progress");
progressbar 코드 자체는 매우 심플하다.
저기에 setInterval로 1씩 늘려서 실행하면 될것 같았다.
function changeProgress(progress){
progressbar.style.width = `${progress}%`;
};
실행 시 첫 세팅을 설정해주었다.
function setTimerText(time){
const minutes = Math.floor(time / 60);
const seconds = time % 60;
PomodoroText.textContent = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}
작업 시간, 휴식시간 타이머
function workTimer(){
time--;
if(time % 15 === 0){
progress++;
changeProgress(progress);
}
setTimerText(time);
if (time < 0) {
clearInterval(timer);
time = 300;
isWorking = false;
PomodoroText.textContent = "Break Time";
PomodoroText.style.color = "red";
timer = setInterval(breakTimer, 1000);
}
}
function breakTimer(){
time--;
if(time % 3 === 0){
progress++;
changeProgress(progress);
}
setTimerText(time);
if (time < 0) {
clearInterval(timer);
time = 1500;
isWorking = true;
PomodoroText.textContent = "25:00";
PomodoroText.style.color = "green";
cnt++;
PomodoroCnt.textContent = cnt;
timer = setInterval(workTimer, 1000);
}
}
이걸 작동시키는 시작/정지 버튼과 리셋 버튼
function startStop(){
isRunning = !isRunning;
if(isRunning){
ButtonClick.textContent = "Stop";
timer = setInterval(workTimer, 1000);
}else{
ButtonClick.textContent = "Start";
clearInterval(timer);
}
}
function reset(){
clearInterval(timer);
isRunning = false;
isWorking = true;
time = 1500;
cnt = 0;
progress = 0;
changeProgress(progress);
PomodoroText.textContent = "25:00";
PomodoroText.style.color = "green";
PomodoroCnt.textContent = cnt;
ButtonClick.textContent = "Start";
}
ButtonClick.addEventListener('click', startStop);
ButtonReset.addEventListener('click', reset);
이렇게 완성했다.
앞으로 Small Project는 일단 깃허브 사이트에 올릴 예정이다.
https://oncloudzz.github.io/WebGame/index.html
onCloud-page
oncloudzz.github.io
원래 웹 게임 올릴 예정이었는데 그냥 이것저것 올리면서 겸사겸사 웹 게임도 넣고 할 예정이다.
'Web > Small Projects' 카테고리의 다른 글
| Only Small Project (0) | 2024.07.10 |
|---|
