Skip to content

Commit eccd251

Browse files
ishaa1304ishaa1304
committed
Added Pomodoro Timer
1 parent 7b05683 commit eccd251

4 files changed

Lines changed: 285 additions & 0 deletions

File tree

‎Projects/Pomodoro-Timer/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Pomodoro Timer
2+
The pomodoro timer is a management tool that helps with productivity.
3+
It is about working with short intervals of time.
4+
# Tech stack
5+
- HTML
6+
- CSS
7+
- JS
8+
9+
# Project Contributor
10+
Isha Deo
11+
12+

‎Projects/Pomodoro-Timer/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Pomodoro Timer</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
10+
11+
</head>
12+
13+
<body>
14+
<div class="pomodoro-container">
15+
16+
17+
<div class="pomodoro-item">
18+
<div id="labelSessionBreak" class="label">Session</div>
19+
<div class="row-pomodoro">
20+
<div id="timeLeft">25:00</div>
21+
</div>
22+
</div>
23+
24+
25+
<div class="pomodoro-item">
26+
<div class="label">Duration</div>
27+
<div class="row-pomodoro">
28+
<button id="sessionDecrement" class="btn-updown">-</button>
29+
<div id="sessionLength" class="row-pomodoro lengthTime">25</div>
30+
<button id="sessionIncrement" class="btn-updown">+</button>
31+
</div>
32+
</div>
33+
34+
35+
<div class="pomodoro-item">
36+
<div class="label">Break Length</div>
37+
<div class="row-pomodoro">
38+
<button id="breakDecrement" class="btn-updown">-</button>
39+
<div id="breakLength" class="row-pomodoro lengthTime">5</div>
40+
<button id="breakIncrement" class="btn-updown">+</button>
41+
</div>
42+
</div>
43+
44+
45+
<div class="pomodoro-item playerButton">
46+
<div class="row-pomodoro buttonRow">
47+
<button id="buttonPlay" class="btn-controller">
48+
<i id="playIcon" class="fas fa-play" aria-hidden="true"></i>
49+
</button>
50+
<button id="buttonReset" class="btn-controller">
51+
<i class="fas fa-sync" aria-hidden="true"></i>
52+
</button>
53+
</div>
54+
</div>
55+
56+
</div>
57+
58+
<!-- Sound -->
59+
<audio id="beep" src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3"></audio>
60+
<script src="scripts.js"></script>
61+
</body>
62+
</html>

‎Projects/Pomodoro-Timer/scripts.js‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
const buttonPlay = document.getElementById('buttonPlay');
2+
const playIcon = document.getElementById('playIcon');
3+
const buttonReset = document.getElementById('buttonReset');
4+
const timeLeftDOM = document.getElementById('timeLeft');
5+
const labelSessionBreak = document.getElementById('labelSessionBreak');
6+
const sessionLengthDOM = document.getElementById('sessionLength');
7+
const breakLengthDOM = document.getElementById('breakLength');
8+
const sessionDecrement = document.getElementById('sessionDecrement');
9+
const sessionIncrement = document.getElementById('sessionIncrement');
10+
const breakDecrement = document.getElementById('breakDecrement');
11+
const breakIncrement = document.getElementById('breakIncrement');
12+
13+
14+
const arrayTime = timeLeftDOM.innerText.split(":");
15+
let timeLeft = parseInt(arrayTime[0] * 60) + parseInt(arrayTime[1]);
16+
let playIsClicked = true;
17+
let isSession = false;
18+
let breakLength = 5*60;
19+
let timeLength = 25*60;
20+
21+
function convertSeconds(seconds) {
22+
return {
23+
minutes: Math.floor(seconds / 60),
24+
seconds: seconds % 60
25+
}
26+
}
27+
28+
let interval;
29+
30+
buttonPlay.addEventListener('click', () => {
31+
32+
if(playIsClicked) {
33+
34+
if(interval) {
35+
clearInterval(interval)
36+
}
37+
interval = setInterval(handleTime, 1000);
38+
39+
40+
playIcon.classList.remove('fa-play');
41+
playIcon.classList.add('fa-pause');
42+
43+
function handleTime() {
44+
45+
if(timeLeft <= 0) {
46+
47+
if(isSession) {
48+
labelSessionBreak.innerText = "Session";
49+
timeLeft = timeLength;
50+
}
51+
52+
53+
else {
54+
labelSessionBreak.innerText = "Break";
55+
timeLeft = breakLength;
56+
57+
58+
}
59+
isSession = !isSession;
60+
}
61+
62+
63+
else if(playIsClicked) {
64+
clearInterval(interval);
65+
}
66+
67+
68+
else {
69+
timeLeft--;
70+
const minutesAndSeconds = convertSeconds(timeLeft);
71+
timeLeftDOM.innerText = `${('0'+minutesAndSeconds.minutes).slice(-2)}:${('0'+minutesAndSeconds.seconds).slice(-2)}`;
72+
}
73+
}
74+
}
75+
76+
77+
else {
78+
79+
playIcon.classList.add('fa-play');
80+
playIcon.classList.remove('fa-pause');
81+
}
82+
playIsClicked = !playIsClicked;
83+
});
84+
85+
86+
buttonReset.addEventListener('click', () => {
87+
breakLength = 5*60;
88+
timeLength = 25*60;
89+
timeLeft = timeLength;
90+
breakLengthDOM.innerText = "5";
91+
sessionLengthDOM.innerText = "25";
92+
timeLeftDOM.innerText = "25:00";
93+
if(!playIsClicked) {
94+
buttonPlay.click();
95+
}
96+
});
97+
98+
99+
function handleLengthButton(lengthValue, htmlElement, isAddition, isBreakLength) {
100+
let result = 1;
101+
if(isAddition) {
102+
result = ++lengthValue;
103+
htmlElement.innerText = result;
104+
} else {
105+
if(lengthValue != 1) {
106+
result = --lengthValue;
107+
htmlElement.innerText = result;
108+
}
109+
}
110+
if(!playIsClicked) {
111+
buttonPlay.click();
112+
}
113+
let resultSeconds = result * 60;
114+
if(!isBreakLength) {
115+
timeLength = resultSeconds;
116+
117+
if(labelSessionBreak.innerText === 'SESSION') {
118+
timeLeftDOM.innerText = ('0'+result).slice(-2) + ":00";
119+
timeLeft = resultSeconds;
120+
}
121+
} else {
122+
breakLength = resultSeconds;
123+
124+
if(labelSessionBreak.innerText === 'BREAK') {
125+
timeLeftDOM.innerText = ('0'+result).slice(-2) + ":00";
126+
timeLeft = resultSeconds;
127+
}
128+
}
129+
return resultSeconds;
130+
}
131+
sessionDecrement.addEventListener('click', () => {
132+
handleLengthButton(parseInt(sessionLengthDOM.innerText), sessionLengthDOM, false, false);
133+
});
134+
sessionIncrement.addEventListener('click', () => {
135+
handleLengthButton(parseInt(sessionLengthDOM.innerText), sessionLengthDOM, true, false);
136+
});
137+
breakDecrement.addEventListener('click', () => {
138+
breakLength = handleLengthButton(parseInt(breakLengthDOM.innerText), breakLengthDOM, false, true);
139+
});
140+
breakIncrement.addEventListener('click', () => {
141+
breakLength = handleLengthButton(parseInt(breakLengthDOM.innerText), breakLengthDOM, true, true);
142+
});

‎Projects/Pomodoro-Timer/styles.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
body {
5+
margin: 0px;
6+
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
7+
background-color: #1c1c1c;
8+
color: #fff;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
}
14+
.pomodoro-container {
15+
display: flex;
16+
flex-flow: row wrap;
17+
18+
19+
padding: 20px;
20+
width: 225px;
21+
}
22+
.pomodoro-item {
23+
width: 100%;
24+
}
25+
.label {
26+
font-size: 1rem;
27+
font-weight: bold;
28+
text-transform: uppercase;
29+
color: #bb437e;
30+
}
31+
.row-pomodoro {
32+
margin: 8px 0 16px 0;
33+
text-align: center;
34+
}
35+
.playerButton {
36+
border-top: solid 3px #bb437e;
37+
padding-top: 12px;
38+
}
39+
.buttonRow {
40+
display: flex;
41+
justify-content: space-around;
42+
}
43+
.lengthTime {
44+
display: inline-block;
45+
padding: 0 20px 0 20px;
46+
font-size: 35px;
47+
}
48+
.btn-updown {
49+
font-size: 1.5rem;
50+
width: 30px;
51+
border: none;
52+
border-radius: 50%;
53+
cursor: pointer;
54+
color: #fff;
55+
background: transparent;
56+
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
57+
}
58+
.btn-controller {
59+
border: none;
60+
cursor: pointer;
61+
font-size: 1.5rem;
62+
background-color: transparent;
63+
color: #fff;
64+
}
65+
66+
#timeLeft {
67+
font-size: 3rem;
68+
font-weight: 700;
69+
}

0 commit comments

Comments
 (0)