Skip to content

Commit 4016d2f

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1914 from jks1111/fix
[issue#1720]Added Pomodoro and Fixed the bug[ssoc2.0]
2 parents ca925e9 + b9bc900 commit 4016d2f

3 files changed

Lines changed: 203 additions & 0 deletions

File tree

‎Projects/Pomodoro/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Pomodoro Timer</title>
9+
</head>
10+
<body>
11+
<h1>Pomodoro Timer 🍎</h1>
12+
<div id="container">
13+
<p id="work" class="label">Work:</p><p id="break" class="label">Break:</p><p id="cycles" class="label">Cycles:</p>
14+
15+
<div id="work-timer" class="timer">
16+
<p id="w_minutes">25</p><p class="semicolon">:</p><p id="w_seconds">00</p>
17+
</div>
18+
19+
20+
<p id="counter" class="timer">0</p>
21+
22+
23+
<div id="break-timer" class="timer">
24+
<p id="b_minutes">05</p><p class="semicolon">:</p><p id="b_seconds">00</p>
25+
</div>
26+
<button id="start" class="btn">Start</button>
27+
<button id="stop" class="btn">Pause</button>
28+
<button id="reset" class="btn">Reset</button>
29+
</div>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎Projects/Pomodoro/script.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
var start = document.getElementById('start');
2+
var stop = document.getElementById('stop');
3+
var reset = document.getElementById('reset');
4+
5+
var wm = document.getElementById('w_minutes');
6+
var ws = document.getElementById('w_seconds');
7+
8+
var bm = document.getElementById('b_minutes');
9+
var bs = document.getElementById('b_seconds');
10+
11+
12+
var startTimer;
13+
14+
start.addEventListener('click', function(){
15+
if(startTimer === undefined){
16+
startTimer = setInterval(timer, 1000)
17+
} else {
18+
alert("Timer is already running");
19+
}
20+
})
21+
22+
reset.addEventListener('click', function(){
23+
wm.innerText = 25;
24+
ws.innerText = "00";
25+
26+
bm.innerText = 5;
27+
bs.innerText = "00";
28+
29+
document.getElementById('counter').innerText = 0;
30+
stopInterval()
31+
startTimer = undefined;
32+
})
33+
34+
stop.addEventListener('click', function(){
35+
stopInterval()
36+
startTimer = undefined;
37+
})
38+
39+
40+
41+
function timer(){
42+
43+
if(ws.innerText != 0){
44+
ws.innerText--;
45+
} else if(wm.innerText != 0 && ws.innerText == 0){
46+
ws.innerText = 59;
47+
wm.innerText--;
48+
}
49+
50+
51+
if(wm.innerText == 0 && ws.innerText == 0){
52+
if(bs.innerText != 0){
53+
bs.innerText--;
54+
} else if(bm.innerText != 0 && bs.innerText == 0){
55+
bs.innerText = 59;
56+
bm.innerText--;
57+
}
58+
}
59+
60+
61+
if(wm.innerText == 0 && ws.innerText == 0 && bm.innerText == 0 && bs.innerText == 0){
62+
wm.innerText = 25;
63+
ws.innerText = "00";
64+
65+
bm.innerText = 5;
66+
bs.innerText = "00";
67+
68+
document.getElementById('counter').innerText++;
69+
alert("Congratulations! You completed a Pomodoro!");
70+
}
71+
}
72+
73+
74+
function stopInterval(){
75+
clearInterval(startTimer);
76+
}

‎Projects/Pomodoro/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
html {
2+
background-image: radial-gradient(circle, rgb(253, 121, 138), rgb(250, 50, 76), rgb(222, 4, 4));
3+
4+
height: 100%;
5+
font-family: Arial, Helvetica, sans-serif;
6+
7+
}
8+
9+
h1 {
10+
color: #f5efef;
11+
font-family: Arial, Helvetica, sans-serif;
12+
text-align: center;
13+
}
14+
15+
#container {
16+
height: 200px;
17+
width: 700px;
18+
background-color: #f36666;
19+
margin: 0 auto;
20+
border: 5px solid #070706;
21+
border-radius: 7%;
22+
display: grid;
23+
grid-template-columns: repeat(5, 1fr);
24+
grid-template-rows: repeat(3, 1fr);
25+
}
26+
27+
28+
.label {
29+
align-self: center;
30+
justify-self: center;
31+
32+
font-size: 30px;
33+
font-weight: bold;
34+
}
35+
36+
#work {
37+
grid-area: 1 / 2 / 1 / 2;
38+
}
39+
#break {
40+
grid-area: 1 / 4 / 1 / 4;
41+
}
42+
#cycles {
43+
grid-area: 1 / 3 / 1 / 3;
44+
}
45+
46+
.timer {
47+
display: flex;
48+
align-self: center;
49+
justify-self: center;
50+
51+
font-size: 30px;
52+
font-weight: bold;
53+
}
54+
55+
p {
56+
margin: 0;
57+
padding: 0;
58+
}
59+
60+
#counter {
61+
grid-area: 2 / 3 / 2 / 3;
62+
color: red;
63+
}
64+
65+
#work-timer {
66+
grid-area: 2 / 2 / 2 / 2;
67+
}
68+
69+
#break-timer {
70+
grid-area: 2 / 4 / 2 / 4;
71+
}
72+
73+
74+
75+
.btn {
76+
align-self: center;
77+
justify-self: center;
78+
border-radius: 50px;
79+
width: 100px;
80+
height: 30px;
81+
82+
font-size: 20px;
83+
}
84+
85+
#start {
86+
grid-area: 3 / 2 / 3 / 2;
87+
}
88+
89+
#reset {
90+
grid-area: 3 / 3 / 3 / 3;
91+
}
92+
93+
#stop {
94+
grid-area: 3 / 4 / 3 / 4;
95+
}

0 commit comments

Comments
 (0)