Create a Pomodoro Timer using HTML CSS and JavaScript

Last Updated : 19 Dec, 2023

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"> 
          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();