Abhishek Gurjar

Posted on Aug 25

Build a Pomodoro Timer Website

#html #css #javascript #pomodorotimer

Introduction

Hello, developers! I'm thrilled to introduce my latest project: a Pomodoro Timer. This project is perfect for anyone looking to enhance their time management skills or practice their front-end development. The Pomodoro Timer is a simple yet powerful tool designed to help you break your work into focused intervals, improving productivity and maintaining focus throughout the day.

Project Overview

The Pomodoro Timer is a web-based application that allows users to set a timer for focused work sessions, typically 25 minutes, followed by short breaks. This project demonstrates how to create a functional timer using JavaScript, along with a clean and responsive user interface with HTML and CSS.

Features

Simple Timer Interface: A minimalist design that displays the countdown timer and controls.
Start, Stop, Reset: Users can start, stop, and reset the timer with easy-to-use buttons.
Notification Alert: An alert is triggered when the timer reaches zero, signaling the end of a session.

Technologies Used

HTML: Provides the structure for the Pomodoro Timer.
CSS: Styles the timer, ensuring a clean and modern design.
JavaScript: Implements the core functionality of the timer, including countdown logic and user interactions.

Project Structure

Here's an overview of the project structure:

Pomodoro-Timer/
├── index.html
├── style.css
└── script.js

index.html: Contains the HTML structure for the Pomodoro Timer.
style.css: Includes CSS styles for a visually appealing and responsive design.
script.js: Manages the timer functionality, including countdown and user interactions.

Installation

To get started with the project, follow these steps:

Clone the repository:

git clone https://github.com/abhishekgurjar-in/Pomodoro-Timer.git

Open the project directory:
```
cd Pomodoro-Timer
```
Run the project:
- Open the index.html file in a web browser to use the Pomodoro Timer.

Usage

Open the website in a web browser.
Start the timer by clicking the "Start" button.
Stop or reset the timer as needed using the "Stop" and "Reset" buttons.
Focus on your work until the timer reaches zero, then take a short break before starting the next session.

Code Explanation

HTML

The index.html file defines the structure of the Pomodoro Timer, including the header, timer display, and control buttons. Here’s a snippet:

<!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="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h1 class="title">Pomodoro Timer</h1>
      <p class="timer" id="timer">25:00</p>
      <div class="button-wrapper">
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <button id="reset">Reset</button>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

CSS

The style.css file styles the Pomodoro Timer, ensuring it is visually appealing and responsive. Below are some key styles:

.container {
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
  padding: 20px;
  font-family: "Roboto", sans-serif;
}

.title {
  font-size: 36px;
  margin-bottom: 10px;
  color: #2c3e50;
}

.timer {
  font-size: 72px;
  color: #2c3e50;
}

button {
  font-size: 18px;
  padding: 10px 20px;
  margin: 10px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 0.3s ease-in-out;
}

button:hover {
  opacity: 0.7;
}

#start {
  background-color: #27ae60;
}

#stop {
  background-color: #c0392b;
}

#reset {
  background-color: #7f8c8d;
}

.footer {
  margin-top: 250px;
  text-align: center;
}

JavaScript

The script.js file contains the logic for the Pomodoro Timer, including the countdown mechanism and handling user interactions. Here's a snippet:

const startEl = document.getElementById("start");
const stopEl = document.getElementById("stop");
const resetEl = document.getElementById("reset");
const timerEl = document.getElementById("timer");

let interval;
let timeLeft = 1500;

function updateTimer() {
  let minutes = Math.floor(timeLeft / 60);
  let seconds = timeLeft % 60;
  let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds
    .toString()
    .padStart(2, "0")}`;

  timerEl.innerHTML = formattedTime;
}

function startTimer() {
  interval = setInterval(() => {
    timeLeft--;
    updateTimer();
    if (timeLeft === 0) {
      clearInterval(interval);
      alert("Time's up!");
      timeLeft = 1500;
      updateTimer();
    }
  }, 1000);
}

function stopTimer() {
  clearInterval(interval);
}

function resetTimer() {
  clearInterval(interval);
  timeLeft = 1500;
  updateTimer();
}

startEl.addEventListener("click", startTimer);
stopEl.addEventListener("click", stopTimer);
resetEl.addEventListener("click", resetTimer);

Live Demo

You can check out the live demo of the Pomodoro Timer project here.

Conclusion

Building the Pomodoro Timer was a rewarding experience that allowed me to practice essential front-end skills such as HTML, CSS, and JavaScript. This project is a great tool for improving productivity, and I hope it inspires you to create your own tools for better time management. Happy coding!

Credits

This project was developed as part of my continuous learning journey in front-end development, with a focus on creating practical and interactive web applications.

Author

Abhishek Gurjar
- GitHub Profile

DEV Community