Skip to content

Commit d22c1e8

Browse files
simonwsimonw
committed
Pomodoro Timer
https://gist.github.com/simonw/34eb6f6a6338c0e81308912b9ec2ffbc
1 parent 4983cff commit d22c1e8

File tree

1 file changed

+141
-0
lines changed

1 file changed

+141
-0
lines changed

‎pomodoro.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
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+
<title>Pomodoro Timer</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
margin: 0;
15+
background-color: #f0f0f0;
16+
}
17+
.container {
18+
text-align: center;
19+
background-color: white;
20+
padding: 2rem;
21+
border-radius: 10px;
22+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23+
}
24+
#timer {
25+
font-size: 4rem;
26+
margin-bottom: 1rem;
27+
}
28+
button, select {
29+
font-size: 1rem;
30+
padding: 0.5rem 1rem;
31+
margin: 0.5rem;
32+
border: none;
33+
border-radius: 5px;
34+
cursor: pointer;
35+
transition: background-color 0.3s;
36+
}
37+
#startBtn {
38+
background-color: #4CAF50;
39+
color: white;
40+
}
41+
#startBtn:hover {
42+
background-color: #45a049;
43+
}
44+
#resetBtn {
45+
background-color: #f44336;
46+
color: white;
47+
}
48+
#resetBtn:hover {
49+
background-color: #da190b;
50+
}
51+
select {
52+
background-color: #3498db;
53+
color: white;
54+
}
55+
select:hover {
56+
background-color: #2980b9;
57+
}
58+
</style>
59+
</head>
60+
<body>
61+
<div class="container">
62+
<h1>Pomodoro Timer</h1>
63+
<div id="timer">25:00</div>
64+
<select id="durationSelect">
65+
<option value="5">5 minutes</option>
66+
<option value="10">10 minutes</option>
67+
<option value="15">15 minutes</option>
68+
<option value="20">20 minutes</option>
69+
<option value="25" selected>25 minutes</option>
70+
<option value="30">30 minutes</option>
71+
<option value="45">45 minutes</option>
72+
<option value="60">60 minutes</option>
73+
</select>
74+
<br>
75+
<button id="startBtn">Start</button>
76+
<button id="resetBtn">Reset</button>
77+
</div>
78+
79+
<script>
80+
const timerDisplay = document.getElementById('timer');
81+
const startBtn = document.getElementById('startBtn');
82+
const resetBtn = document.getElementById('resetBtn');
83+
const durationSelect = document.getElementById('durationSelect');
84+
85+
let timer;
86+
let timeLeft = 25 * 60; // Default to 25 minutes in seconds
87+
let isRunning = false;
88+
89+
function updateDisplay() {
90+
const minutes = Math.floor(timeLeft / 60);
91+
const seconds = timeLeft % 60;
92+
timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
93+
}
94+
95+
function startTimer() {
96+
if (!isRunning) {
97+
isRunning = true;
98+
startBtn.textContent = 'Pause';
99+
durationSelect.disabled = true;
100+
timer = setInterval(() => {
101+
timeLeft--;
102+
updateDisplay();
103+
if (timeLeft === 0) {
104+
clearInterval(timer);
105+
isRunning = false;
106+
startBtn.textContent = 'Start';
107+
durationSelect.disabled = false;
108+
alert('Pomodoro session complete!');
109+
}
110+
}, 1000);
111+
} else {
112+
clearInterval(timer);
113+
isRunning = false;
114+
startBtn.textContent = 'Resume';
115+
}
116+
}
117+
118+
function resetTimer() {
119+
clearInterval(timer);
120+
isRunning = false;
121+
timeLeft = parseInt(durationSelect.value) * 60;
122+
updateDisplay();
123+
startBtn.textContent = 'Start';
124+
durationSelect.disabled = false;
125+
}
126+
127+
function changeDuration() {
128+
if (!isRunning) {
129+
timeLeft = parseInt(durationSelect.value) * 60;
130+
updateDisplay();
131+
}
132+
}
133+
134+
startBtn.addEventListener('click', startTimer);
135+
resetBtn.addEventListener('click', resetTimer);
136+
durationSelect.addEventListener('change', changeDuration);
137+
138+
updateDisplay();
139+
</script>
140+
</body>
141+
</html>

0 commit comments

Comments
 (0)