Pomodoro Timer with HTML, CSS, and JavaScript

on

 

Pomodoro Timer with HTML, CSS, and JavaScript

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. It uses a timer to break work into intervals, traditionally 25 minutes in length, separated by short breaks. This simple yet effective technique helps maintain focus and productivity while preventing burnout.

In this blog post, we’ll walk through creating an elegant, functional Pomodoro Timer web application using HTML, CSS, and JavaScript. Our timer will feature three modes — Pomodoro, Short Break, and Long Break — each with its own distinctive color scheme and timing settings.

Understanding the Pomodoro Technique

Before diving into the code, let’s briefly understand the Pomodoro workflow:

  1. Pomodoro Session: 25 minutes of focused work
  2. Short Break: 5 minutes to relax
  3. Long Break: 15 minutes to recharge (typically taken after completing four Pomodoro sessions)

This cycle helps maintain mental freshness and sustained productivity throughout your workday.

Project Overview

Our Pomodoro Timer application will include the following features:

  • Three timer modes with different durations
  • Visual indication of the current mode through color themes
  • Start/Pause functionality
  • Reset option
  • Clean, responsive design

HTML Structure

Let’s start with the core HTML structure that forms the skeleton of our application:

<!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>
    <!-- CSS will go here -->
</head>
<body>
    <div class="container pomodoro" id="container">
        <div class="tabs">
            <button class="tab active" data-mode="pomodoro">Pomodoro</button>
            <button class="tab" data-mode="short-break">Short Break</button>
            <button class="tab" data-mode="long-break">Long Break</button>
        </div>
        
        <div class="time" id="time">25:00</div>
        
        <button class="btn" id="start-btn">START</button>
        
        <div class="timer-controls">
            <button class="timer-btn" id="reset-btn">⟳</button>
        </div>
    </div>
    <!-- JavaScript will go here -->
</body>
</html>

This structure creates a container with three main sections:

  1. Navigation tabs for switching between timer modes
  2. A large time display
  3. Control buttons for managing the timer

Styling with CSS

Next, let’s style our timer to make it visually appealing. We’ll use different color themes for each mode to provide clear visual feedback:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
}
.container {
    width: 400px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}
/* Timer display styling */
.time {
    font-size: 120px;
    margin: 20px 0;
    color: white;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* Themes for different modes */
.pomodoro {
    background-color: #4E8AF7; /* Blue */
}
.short-break {
    background-color: #22A699; /* Teal */
}
.long-break {
    background-color: #7B66FF; /* Purple */
}

The CSS creates a centered container with a clean, modern look. We’ve defined three color themes that will be applied when switching between the Pomodoro, Short Break, and Long Break modes. The large timer display is styled to be easily readable with a contrasting white color against our themed backgrounds.

JavaScript Functionality

Finally, let’s implement the timer functionality with JavaScript:

document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('container');
    const timeDisplay = document.getElementById('time');
    const startBtn = document.getElementById('start-btn');
    const resetBtn = document.getElementById('reset-btn');
    const tabs = document.querySelectorAll('.tab');
    
    let timer;
    let minutes = 25;
    let seconds = 0;
    let isRunning = false;
    
    // Mode durations in minutes
    const modes = {
        'pomodoro': 25,
        'short-break': 5,
        'long-break': 15
    };
    
    // Initialize timer display
    updateDisplay();
    
    // Tab click event
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const mode = tab.dataset.mode;
            
            // Remove active class from all tabs
            tabs.forEach(t => t.classList.remove('active'));
            
            // Add active class to clicked tab
            tab.classList.add('active');
            
            // Change container class for styling
            container.className = `container ${mode}`;
            
            // Reset timer
            clearInterval(timer);
            isRunning = false;
            minutes = modes[mode];
            seconds = 0;
            startBtn.textContent = 'START';
            
            // Update display
            updateDisplay();
        });
    });
    
    // Helper function to update time display
    function updateDisplay() {
        timeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }
});

This JavaScript code sets up event listeners for the tab buttons, allowing users to switch between different timer modes. When a tab is clicked, the timer resets to the appropriate duration for that mode, and the container’s class changes to apply the corresponding color theme.

Timer Functionality

The core timing functionality is implemented with JavaScript’s setInterval() method:

// Start/Pause button click event
startBtn.addEventListener('click', () => {
    if (isRunning) {
        // Pause timer
        clearInterval(timer);
        isRunning = false;
        startBtn.textContent = 'START';
    } else {
        // Start timer
        isRunning = true;
        startBtn.textContent = 'PAUSE';
        
        timer = setInterval(() => {
            // Decrease time
            if (seconds === 0) {
                if (minutes === 0) {
                    // Timer complete
                    clearInterval(timer);
                    isRunning = false;
                    startBtn.textContent = 'START';
                    
                    // Play sound
                    const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
                    audio.play();
                    
                    return;
                }
                minutes--;
                seconds = 59;
            } else {
                seconds--;
            }
            
            updateDisplay();
        }, 1000);
    }
});

This code toggles between starting and pausing the timer when the user clicks the start/pause button. When the timer is running, it decrements the seconds and updates the display every 1000 milliseconds (1 second). When the timer reaches zero, it plays a notification sound to alert the user.

User Experience Enhancements

Our timer includes several UX enhancements:

  1. Visual Feedback: The container’s background color changes to indicate the current mode
  2. Responsive Design: The timer looks good on both desktop and mobile devices
  3. Interactive Elements: Buttons have hover effects to indicate they are clickable
  4. Intuitive Controls: Simple start/pause and reset functionality

Conclusion

This Pomodoro Timer project demonstrates how to create a functional, attractive web application using HTML, CSS, and JavaScript. The application helps users implement the Pomodoro Technique for improved productivity and focus.

Comments

Post a Comment