Mini-Build: Countdown Timer App
Build a countdown timer that counts down to a target date - showing days, hours, minutes, and seconds. Uses setInterval, Date math, and DOM updates. This pattern is used for sale timers, event countdowns, and launch pages.
Timer Features
- Set target date - Calculate difference from now
- Live countdown - Update every second with setInterval
- Display - Days, hours, minutes, seconds breakdown
- Complete - Stop timer when countdown reaches zero
- Reusable - Class-based for multiple timers
Countdown Timer Code
// Countdown Timer
class CountdownTimer {
constructor(targetDate, label = "Countdown") {
this.targetDate = new Date(targetDate);
this.label = label;
this.intervalId = null;
}
getTimeRemaining() {
const total = this.targetDate - new Date();
if (total <= 0) return { total: 0, days: 0, hours: 0, minutes: 0, seconds: 0 };
return {
total,
days: Math.floor(total / (1000 * 60 * 60 * 24)),
hours: Math.floor((total / (1000 * 60 * 60)) % 24),
minutes: Math.floor((total / (1000 * 60)) % 60),
seconds: Math.floor((total / 1000) % 60),
};
}
display() {
const t = this.getTimeRemaining();
const pad = (n) => String(n).padStart(2, "0");
console.log(
`⏳ ${this.label}: ${t.days}d ${pad(t.hours)}h ${pad(t.minutes)}m ${pad(t.seconds)}s`
);
return t;
}
start() {
console.log(`🚀 ${this.label} started!`);
this.display();
this.intervalId = setInterval(() => {
const t = this.display();
if (t.total <= 0) {
this.stop();
console.log(`🎉 ${this.label} - Time's up!`);
}
}, 1000);
}
stop() {
if (this.intervalId) {
clearInterval(this.intervalId);
this.intervalId = null;
console.log("Timer stopped");
}
}
}
// Demo - countdown to New Year 2027
const newYear = new CountdownTimer("2027-01-01T00:00:00", "New Year 2027");
newYear.display();
// Quick 5-second countdown
const quickTimer = new CountdownTimer(
new Date(Date.now() + 5000), // 5 seconds from now
"Quick Timer"
);
// quickTimer.start(); // uncomment to see live countdown
// Multiple timers
const timers = [
new CountdownTimer("2026-12-25", "Christmas 2026"),
new CountdownTimer("2026-08-15", "Independence Day"),
];
timers.forEach(t => t.display());Tip
Tip
Always clear intervals in a cleanup function. In vanilla JS, clear on stop/destroy. In React, clear in useEffect's return function. This prevents memory leaks and phantom timers running after navigation.
Delay is minimum, not exact. Always clean up.
Common Mistake
Warning
Updating the DOM too frequently in timer callbacks. Instead of updating every millisecond, update every 100ms or use requestAnimationFrame for visual updates. The human eye can't perceive changes faster than ~60fps.
Practice Task
Note
Extend the timer: (1) Add lap tracking that records split times. (2) Save the best time to localStorage. (3) Add a countdown mode that alerts when finished. (4) Add keyboard shortcuts (Space to start/stop).
Quick Quiz
Key Takeaways
- Build a countdown timer that counts down to a target date - showing days, hours, minutes, and seconds.
- Set target date - Calculate difference from now
- Live countdown - Update every second with setInterval
- Display - Days, hours, minutes, seconds breakdown