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. ApproachCreate 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: Comment More infoAdvertise with us Next Article Create a Pomodoro Timer using HTML CSS and JavaScript P pankaj_gupta_gfg Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Projects Similar Reads JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav 11 min read Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De 5 min read React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications 15+ min read JavaScript Interview Questions and Answers JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. Both front-end and back-end developers need to have a strong command of JavaScript, as 15+ min read React Tutorial React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.Applications are built using reusable compon 8 min read Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w 8 min read NodeJS Interview Questions and Answers NodeJS is one of the most popular runtime environments, known for its efficiency, scalability, and ability to handle asynchronous operations. It is built on Chromeâs V8 JavaScript engine for executing JavaScript code outside of a browser. It is extensively used by top companies such as LinkedIn, Net 15+ min read HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML 14 min read What is an API (Application Programming Interface) In the tech world, APIs (Application Programming Interfaces) are crucial. If you're interested in becoming a web developer or want to understand how websites work, you'll need to familiarize yourself with APIs. Let's break down the concept of an API in simple terms.What is an API?An API is a set of 10 min read Introduction of Firewall in Computer Network A firewall is a network security device either hardware or software-based which monitors all incoming and outgoing traffic and based on a defined set of security rules it accepts, rejects, or drops that specific traffic. It acts like a security guard that helps keep your digital world safe from unwa 10 min read Like