Create a Pomodoro Timer using HTML CSS and JavaScript
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 = 'https://kit.fontawesome.com/a076d05399.js' crossorigin = 'anonymous' > </ script > </ head > < body > < h1 style = "color:green" > w3wiki </ 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 : 100 vh; 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.2 s; 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.3 s; } |
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:
Contact Us