Pomodoro Timer - Code Explanation

HTML STRUCTURE

<div class="timer-display">
    <div class="timer-value" id="timerDisplay">25:00</div>
    <div class="timer-label" id="timerLabel">Work Session</div>
</div>

<div class="controls">
    <button onclick="startTimer()">Start</button>
    <button onclick="pauseTimer()">Pause</button>
    <button onclick="resetTimer()">Reset</button>
</div>

<div class="settings">
    <input type="number" id="workDuration" value="25" min="1" max="60">
    <input type="number" id="breakDuration" value="5" min="1" max="30">
    <button onclick="updateSettings()">Update Settings</button>
</div>

JAVASCRIPT CODE

let isWorkSession = true;
let timeLeft = 25 * 60;
let workDuration = 25;
let breakDuration = 5;
let isRunning = false;
let sessions = [];
let timerInterval;

function updateDisplay() {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    document.getElementById('timerDisplay').textContent = 
        (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    document.getElementById('timerLabel').textContent = isWorkSession ? 'Work Session' : 'Break Time';
}

function startTimer() {
    if (isRunning) return;
    isRunning = true;
    
    timerInterval = setInterval(() => {
        timeLeft--;
        updateDisplay();
        
        if (timeLeft === 0) {
            sessions.push(new Date().toLocaleTimeString().slice(0, 5));
            displaySessions();
            isWorkSession = !isWorkSession;
            timeLeft = isWorkSession ? workDuration * 60 : breakDuration * 60;
            updateDisplay();
        }
    }, 1000);
}

function pauseTimer() {
    isRunning = false;
    clearInterval(timerInterval);
}

function resetTimer() {
    isRunning = false;
    clearInterval(timerInterval);
    isWorkSession = true;
    timeLeft = workDuration * 60;
    updateDisplay();
}

KEY FEATURES

✓ Work & Break Session Toggle
✓ Start/Pause/Reset Controls
✓ Adjustable Duration Settings
✓ Session History Tracking
✓ Real-time Display Update
✓ Automatic Session Switching
✓ Time Display Formatting (MM:SS)

LEARNING CONCEPTS

• setInterval() for Timer Loop
• clearInterval() for Stopping Timer
• Math.floor() for Conversion
• Template String Formatting
• Boolean Toggle Logic
• Time Calculations (seconds to minutes)
• Array for Session Storage
• localStorage Integration (Optional)

← Back to Project