Live Demo

30-Minute Countdown Timer

30:00

Implementation Details

This countdown timer uses clean JavaScript with responsive design principles:

Why This Approach?

Simple JavaScript with no external dependencies
Responsive design that works on all screen sizes
Visual feedback when time is running low (color change)
Small footprint with minimal code

Technical Breakdown

Timer Logic: Uses setInterval to decrement seconds and update the display
Display Formatting: Formats minutes and seconds with leading zeros using padStart
Visual Feedback: Changes text color to red when time is below 1 minute
Event Handling: Clean event listeners for start, pause, and reset functionality

Complete Implementation

Copy-paste ready code for your projects:

timer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>30-Minute Countdown Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        
        .timer-container {
            text-align: center;
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        #timer {
            font-size: 5rem;
            font-weight: bold;
            color: #333;
            margin: 20px 0;
        }
        
        .buttons {
            margin-top: 20px;
        }
        
        button {
            padding: 10px 20px;
            font-size: 1rem;
            margin: 0 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        #start {
            background-color: #4CAF50;
            color: white;
        }
        
        #pause {
            background-color: #f39c12;
            color: white;
        }
        
        #reset {
            background-color: #e74c3c;
            color: white;
        }
        
        button:hover {
            opacity: 0.9;
        }
        
        h1 {
            color: #333;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="timer-container">
        <h1>30-Minute Countdown Timer</h1>
        <div id="timer">30:00</div>
        <div class="buttons">
            <button id="start">Start</button>
            <button id="pause">Pause</button>
            <button id="reset">Reset</button>
        </div>
    </div>

    <script>
        
        let timer;
        let totalSeconds = 30 * 60; // 30 minutes in seconds
        let isRunning = false;

        const timerDisplay = document.getElementById('timer');
        const startBtn = document.getElementById('start');
        const pauseBtn = document.getElementById('pause');
        const resetBtn = document.getElementById('reset');

        function updateDisplay() {
            const minutes = Math.floor(totalSeconds / 60);
            const seconds = totalSeconds % 60;
            
            timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            // Change color when time is running low
            if (totalSeconds <= 60) {
                timerDisplay.style.color = '#e74c3c';
            } else {
                timerDisplay.style.color = '#333';
            }
        }

        function startTimer() {
            if (!isRunning && totalSeconds > 0) {
                isRunning = true;
                timer = setInterval(() => {
                    totalSeconds--;
                    updateDisplay();
                    
                    if (totalSeconds <= 0) {
                        clearInterval(timer);
                        isRunning = false;
                        alert('Time is up!');
                    }
                }, 1000);
            }
        }

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

        function resetTimer() {
            pauseTimer();
            totalSeconds = 30 * 60;
            updateDisplay();
        }

        startBtn.addEventListener('click', startTimer);
        pauseBtn.addEventListener('click', pauseTimer);
        resetBtn.addEventListener('click', resetTimer);

        // Initialize display
        updateDisplay();
        </script>
</body>
</html>

Best Practices

Clear interval when timer is paused or reset to prevent memory leaks
Visual feedback helps users understand when time is running low
Leading zeros maintain consistent formatting (e.g., 05:09)
Simple controls with start, pause, and reset cover all user needs
Responsive design ensures usability on all devices

Usage Examples

React Component

Timer.jsx

import React, { useState, useEffect, useRef } from 'react';

const Timer = () => {
  const [totalSeconds, setTotalSeconds] = useState(30 * 60);
  const [isRunning, setIsRunning] = useState(false);
  const timerRef = useRef(null);

  const updateDisplay = () => {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  };

  const startTimer = () => {
    if (!isRunning && totalSeconds > 0) {
      setIsRunning(true);
    }
  };

  const pauseTimer = () => {
    setIsRunning(false);
  };

  const resetTimer = () => {
    setIsRunning(false);
    setTotalSeconds(30 * 60);
  };

  useEffect(() => {
    if (isRunning) {
      timerRef.current = setInterval(() => {
        setTotalSeconds(prev => {
          if (prev <= 0) {
            setIsRunning(false);
            alert('Time is up!');
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    } else {
      clearInterval(timerRef.current);
    }

    return () => clearInterval(timerRef.current);
  }, [isRunning]);

  return (
    <div className="timer-container">
      <h1>30-Minute Countdown Timer</h1>
      <div id="timer" style={{ color: totalSeconds <= 60 ? '#e74c3c' : '#333' }}>
        {updateDisplay()}
      </div>
      <div className="buttons">
        <button onClick={startTimer} style={{ backgroundColor: '#4CAF50', color: 'white' }}>
          Start
        </button>
        <button onClick={pauseTimer} style={{ backgroundColor: '#f39c12', color: 'white' }}>
          Pause
        </button>
        <button onClick={resetTimer} style={{ backgroundColor: '#e74c3c', color: 'white' }}>
          Reset
        </button>
      </div>
    </div>
  );
};

export default Timer;

Vue Component

Timer.vue

<template>
  <div class="timer-container">
    <h1>30-Minute Countdown Timer</h1>
    <div id="timer" :style="{ color: timerColor }">{{ formattedTime }}</div>
    <div class="buttons">
      <button @click="startTimer" :style="{ backgroundColor: '#4CAF50', color: 'white' }">
        Start
      </button>
      <button @click="pauseTimer" :style="{ backgroundColor: '#f39c12', color: 'white' }">
        Pause
      </button>
      <button @click="resetTimer" :style="{ backgroundColor: '#e74c3c', color: 'white' }">
        Reset
      </button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      totalSeconds: 30 * 60,
      isRunning: false,
      timer: null
    }
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.totalSeconds / 60);
      const seconds = this.totalSeconds % 60;
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
    timerColor() {
      return this.totalSeconds <= 60 ? '#e74c3c' : '#333';
    }
  },
  methods: {
    startTimer() {
      if (!this.isRunning && this.totalSeconds > 0) {
        this.isRunning = true;
        this.timer = setInterval(() => {
          this.totalSeconds--;
          if (this.totalSeconds <= 0) {
            this.pauseTimer();
            alert('Time is up!');
          }
        }, 1000);
      }
    },
    pauseTimer() {
      clearInterval(this.timer);
      this.isRunning = false;
    },
    resetTimer() {
      this.pauseTimer();
      this.totalSeconds = 30 * 60;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

<style scoped>
.timer-container {
  text-align: center;
  background-color: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

#timer {
  font-size: 5rem;
  font-weight: bold;
  margin: 20px 0;
}

.buttons {
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  margin: 0 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.3s;
}

button:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  #timer {
    font-size: 3.5rem;
  }
}

@media (max-width: 576px) {
  #timer {
    font-size: 2.5rem;
  }
  
  .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  button {
    width: 100%;
    margin: 0;
  }
}
</style>

Browser Compatibility

This timer works in all modern browsers:

Chrome 58+

Firefox 52+

Safari 12.1+

Edge 16+

IE 11+