Create a Pomodoro Timer using HTML CSS and JavaScript

Last Updated : 28 Apr, 2025

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

Output:

Create a Pomodoro Timer using HTML CSS and JavaScript

pankaj_gupta_gfg

Improve

Article Tags :

Create a Pomodoro Timer using HTML CSS and JavaScript

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?