Countdown Timer

About Countdown Timer

This countdown timer provides a visual way to track time remaining for any activity. Set your duration in minutes and seconds, start the countdown, and monitor the MM:SS display. A message appears when time expires.

Timer Algorithm

The countdown logic follows these steps:

1. Parse input: Read minutes and seconds from form fields
2. Convert: Total seconds = (minutes × 60) + seconds
3. Start interval: setInterval() calls decrement function every 1000ms
4. Decrement: remaining = remaining - 1
5. Format display: MM:SS with zero-padding (padStart(2, "0"))
6. Check completion: If remaining ≤ 0, clearInterval() and show message

JavaScript Countdown Implementation:

var tid = null;        // Timer interval ID
var remaining = 0;     // Seconds remaining
var original = 0;      // For reset functionality

function start() {
  if (tid) return;  // Already running

  var min = parseInt(document.getElementById("min").value) || 0;
  var sec = parseInt(document.getElementById("sec").value) || 0;
  remaining = (min * 60) + sec;
  original = remaining;

  tid = setInterval(function() {
    remaining--;
    if (remaining <= 0) {
      clearInterval(tid);
      tid = null;
      document.getElementById("msg").innerText = "Time's up!";
    }
    updateDisplay();
  }, 1000);
}

function updateDisplay() {
  var m = Math.floor(remaining / 60);
  var s = remaining % 60;
  var mm = String(m).padStart(2, "0");
  var ss = String(s).padStart(2, "0");
  document.getElementById("display").innerText = mm + ":" + ss;
}

Duration Conversion Reference

Browser Timer Throttling Behavior

Modern browsers reduce timer frequency in background tabs to save battery:

Timer Accuracy Factors

• JavaScript single-threading: setInterval callbacks queue behind other page tasks—heavy DOM updates or scripts can delay execution by milliseconds
• System sleep: If the computer enters sleep mode, the timer pauses and resumes on wake, causing drift
• CPU throttling: Power-saving modes reduce CPU frequency, potentially affecting timer precision
• Tab visibility: Background tabs experience more throttling than foreground tabs
• Drift compensation: Advanced timers track expected vs actual elapsed time and adjust—but this simple implementation does not

Time Display Format (MM:SS)

The timer uses zero-padded MM:SS format for consistent visual width:

Format: MM:SS (minutes:seconds, zero-padded)

Examples:
  0 seconds  → 00:00
  5 seconds  → 00:05
  60 seconds → 01:00
  125 seconds → 02:05
  3661 seconds → 61:01

JavaScript zero-padding:
  String(5).padStart(2, "0")  → "05"
  String(30).padStart(2, "0") → "30"

Common Timer Use Cases

• Pomodoro Technique: 25-minute work sessions with 5-minute breaks
• Workout intervals: HIIT (30s work / 30s rest), Tabata (20s / 10s), plank holds
• Cooking: Baking, boiling eggs, microwave heating, resting meat
• Speaking practice: Elevator pitches (60s), presentations, interview answers
• Games: Turn timers, trivia rounds, speed challenges, chess clocks
• Breaks: Limit coffee breaks, screen time, social media scrolling
• Meditation: Timed breathing exercises, mindfulness sessions
• Testing: Simulate time-limited scenarios, UX studies with task limits

Timer Limitations

• No audio alert: Visual message only—no sound plays when time expires
• No system notifications: Does not trigger desktop/mobile notifications
• No pause/resume: Stop resets to original duration; cannot resume from paused state
• No lap tracking: Does not record intermediate times
• Single timer: Cannot run multiple concurrent countdowns