Countdown Timer

Create a countdown timer

JavaScriptIntermediate
JavaScript
// Method 1: Simple countdown
function countdown(targetDate, callback) {
    const interval = setInterval(() => {
        const now = new Date().getTime();
        const distance = targetDate.getTime() - now;
        
        if (distance < 0) {
            clearInterval(interval);
            callback({ expired: true });
            return;
        }
        
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        callback({
            days,
            hours,
            minutes,
            seconds,
            total: distance
        });
    }, 1000);
}

const target = new Date(Date.now() + 86400000); // 1 day from now
countdown(target, (time) => {
    if (time.expired) {
        console.log('Countdown expired!');
    } else {
        console.log(`${time.days}d ${time.hours}h ${time.minutes}m ${time.seconds}s`);
    }
});

// Method 2: Countdown class
class CountdownTimer {
    constructor(targetDate, onUpdate, onComplete) {
        this.targetDate = targetDate;
        this.onUpdate = onUpdate;
        this.onComplete = onComplete;
        this.interval = null;
    }
    
    start() {
        this.update();
        this.interval = setInterval(() => this.update(), 1000);
    }
    
    stop() {
        if (this.interval) {
            clearInterval(this.interval);
            this.interval = null;
        }
    }
    
    update() {
        const now = new Date().getTime();
        const distance = this.targetDate.getTime() - now;
        
        if (distance < 0) {
            this.stop();
            if (this.onComplete) this.onComplete();
            return;
        }
        
        const time = {
            days: Math.floor(distance / (1000 * 60 * 60 * 24)),
            hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
            minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
            seconds: Math.floor((distance % (1000 * 60)) / 1000),
            total: distance
        };
        
        if (this.onUpdate) this.onUpdate(time);
    }
    
    getRemaining() {
        const now = new Date().getTime();
        const distance = this.targetDate.getTime() - now;
        return distance > 0 ? distance : 0;
    }
}

const timer = new CountdownTimer(
    new Date(Date.now() + 3600000), // 1 hour
    (time) => console.log(`${time.minutes}m ${time.seconds}s`),
    () => console.log('Timer complete!')
);
timer.start();

Output

23h 59m 59s
59m 59s

Countdown timers show remaining time.

Implementation

  • Calculate time difference
  • Update every second
  • Format days/hours/minutes/seconds
  • Handle expiration

Countdown Class

  • Encapsulate logic
  • Start/stop methods
  • Update callback
  • Complete callback

Time Calculation

  • Total milliseconds
  • Convert to units
  • Handle negative (expired)

Use Cases

  • Event countdowns
  • Sale timers
  • Deadline reminders
  • Game timers

Best Practices

  • Clear interval on unmount
  • Handle expiration
  • Format nicely
  • Pause/resume support