Understanding countdowns
The slow approach of a fixed moment.
A countdown isn't a clock running backwards — it's the calendar reminding you of the gap.
Countdowns versus timers.
A countdown is anchored to an absolute moment — New Year's Eve, a launch date, a deadline. The remaining time shrinks as real time passes, and it's the same number of seconds for everyone watching, regardless of which device they're on or how long their tab has been open. A timer, by contrast, runs from a starting point on this device and counts up. Confusing the two makes for fragile code: a timer that pauses when the laptop sleeps; a countdown that doesn't.
remaining = target − now
Why we re-read the clock every tick.
The naive countdown decrements a counter every second. Looks fine — runs poorly. Decrement-based countdowns drift whenever the browser throttles inactive tabs (which happens after a few seconds of being out of focus), whenever the device sleeps, and whenever setTimeout's scheduling is imprecise (it always is, by ten or twenty milliseconds). The countdown above asks the system clock anew on every render — so even if the page freezes for an hour, the next paint resumes with the right number.
Time zones and the "midnight" trap.
A target like "midnight on 1 January" is meaningless without a zone. Midnight UTC, Sydney midnight, and New York midnight are three different moments — you'll see them count down in turn, west-to-east-to-west, on the night of the new year. The calendar above interprets the date and time you pick in your own local zone, which matches the way most people think about deadlines and launches.
The URL hash is the share link.
The target moment and label are stored in the page URL's hash (the part after the #). That gives you a clean, shareable link without sending anything to a server — copy the URL and the recipient sees the same countdown ticking down to the same moment, in their own time zone. The hash updates as you change the target, so any URL you share is always current.
Years, months, days — and total seconds.
The remaining time is shown twice: a calendar breakdown ("3 months, 12 days") and a raw seconds figure. They describe the same gap but in different units. The calendar breakdown is what humans want to read; the seconds figure is what code uses. When the two seem to disagree, it's because months have variable length — the day count above accounts for that faithfully.
What happens at zero.
When the target moment passes, the digits don't go negative — they flip into "Reached" mode and start counting up the time since. That's the right behaviour for most use cases (a launch that already happened, a deadline that's been missed) and it means a shareable countdown URL stays meaningful even after the moment is in the past.