In this article, we will see how to design Pomodoro Timer with the help of HTML CSS, and JavaScript. The Pomodoro Technique is a time management method that involves breaking your work into focused intervals, typically 25 minutes, followed by short breaks. After completing four cycles, take a longer break. This technique aims to enhance productivity by maintaining concentration during work intervals and providing regular breaks for renewal.
Approach
- Create HTML structure with title, header, and main div; include timer circle and control buttons.
- Style the main container and timer circle with a rounded appearance, border, and centered text.
- Apply CSS to control buttons for a responsive design with hover effects.
- Set up a JavaScript file with variables for timer, minutes, seconds, pause status, and entered time.
- Implement functions for starting the timer, updating the display, formatting time, toggling pause/resume, restarting, and choosing a custom time.
- Handle timer completion with alert and clearInterval; validate user input for custom time.
- Call ‘start timer’ on page load; add event listeners to control buttons for corresponding functions.
Example: In this example, we will create a Pomodoro timer with the help of HTML CSS, and JavaScript.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Pomodoro Timer</title>
<link rel="stylesheet" href="style.css">
<script src=
crossorigin='anonymous'>
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<div class="main">
<div class="timer-circle" id="timer">15:00
</div>
<div class="control-buttons">
<button onclick="togglePauseResume()">
Pause
</button>
<button onclick="restartTimer()">
Restart
</button>
<button onclick="chooseTime()">
Choose Time
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
|
CSS
/* style.css*/body { display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
line-height: 1.5;
min-height: 100vh;
background: #f3f3f3;
flex-direction: column;
margin: 0;
} .main { background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 10px 20px;
transition: transform 0.2s;
width: 500px;
height: 400px;
text-align: center;
} .timer-circle {
border-radius: 50%;
width: 200px;
height: 200px;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
color: crimson;
border: 8px solid #3498db;
} .control-buttons { margin-top: 75px;
display: flex;
justify-content: space-evenly;
} .control-buttons button { background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
} .control-buttons button:hover { background-color: #266094;
transition: background-color 0.3s;
} |
Javascript
// script.js let timer; let minutes = 15; let seconds = 0; let isPaused = false;
let enteredTime = null;
function startTimer() {
timer = setInterval(updateTimer, 1000);
} function updateTimer() {
const timerElement =
document.getElementById('timer');
timerElement.textContent =
formatTime(minutes, seconds);
if (minutes === 0 && seconds === 0) {
clearInterval(timer);
alert('Time is up! Take a break.');
} else if (!isPaused) {
if (seconds > 0) {
seconds--;
} else {
seconds = 59;
minutes--;
}
}
} function formatTime(minutes, seconds) {
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
} function togglePauseResume() {
const pauseResumeButton =
document.querySelector('.control-buttons button');
isPaused = !isPaused;
if (isPaused) {
clearInterval(timer);
pauseResumeButton.textContent = 'Resume';
} else {
startTimer();
pauseResumeButton.textContent = 'Pause';
}
} function restartTimer() {
clearInterval(timer);
minutes = enteredTime || 15;
seconds = 0;
isPaused = false;
const timerElement =
document.getElementById('timer');
timerElement.textContent =
formatTime(minutes, seconds);
const pauseResumeButton =
document.querySelector('.control-buttons button');
pauseResumeButton.textContent = 'Pause';
startTimer();
} function chooseTime() {
const newTime = prompt('Enter new time in minutes:');
if (!isNaN(newTime) && newTime > 0) {
enteredTime = parseInt(newTime);
minutes = enteredTime;
seconds = 0;
isPaused = false;
const timerElement =
document.getElementById('timer');
timerElement.textContent =
formatTime(minutes, seconds);
clearInterval(timer);
const pauseResumeButton =
document.querySelector('.control-buttons button');
pauseResumeButton.textContent = 'Pause';
startTimer();
} else {
alert('Invalid input. Please enter'+
' a valid number greater than 0.');
}
} startTimer(); |
Output: