Open In App

Create a Pomodoro Timer using HTML CSS and JavaScript

Last Updated : 28 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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 JavaScript

Output:

asd

Next Article

Similar Reads