Bootstrap Countdown Timer Banner — Free JS Snippet

A countdown banner has one real technical risk: drifting or breaking as it counts down, especially around the moment it hits zero. This snippet avoids drift entirely by never storing "seconds remaining" as a decrementing counter — instead, TARGET is a fixed millisecond timestamp computed once at load time, and every tick of setInterval(tick, 1000) recalculates remaining = TARGET - Date.now() from scratch. That means a slow tab, a throttled background timer, or a paused browser tab can never cause the displayed time to fall out of sync with the real target — the next tick always self-corrects because it's measuring against the actual system clock, not counting down from a stored number.

The banner itself is a real Bootstrap alert alert-dark element with role="alert" for accessibility, laid out with flexbox utilities (d-flex align-items-center justify-content-center flex-wrap gap-4) so the four time boxes wrap gracefully on narrow screens instead of overflowing. Each unit — Days, Hours, Minutes, Seconds — is rendered inside a .bsct-box div styled with a semi-transparent white background, rounded corners, and font-variant-numeric: tabular-nums, a CSS property that gives every digit the same fixed width so the numbers don't visually jitter left and right as they change each second (a subtle but noticeable polish detail easy to miss).

tick() converts the remaining milliseconds into whole seconds, then derives days, hours, minutes, and seconds using integer division and modulo against 86400, 3600, and 60 — standard duration math, but written so each unit's remainder feeds the next smaller unit correctly rather than each being computed independently and potentially double-counting. Every value is passed through a pad() helper using String.padStart(2, '0') so single-digit values always display as two digits ("05" not "5"), keeping the box widths visually stable.

The non-obvious edge case this snippet explicitly handles is the transition at zero: rather than just displaying "00:00:00:00" forever, tick() checks remaining <= 0, calls clearInterval(intervalId) to stop the timer from continuing to run in the background, hides the #bsctBoxes element, and reveals a #bsctDone message instead — a real state swap rather than a frozen countdown. The dismiss button is a genuine Bootstrap btn-close btn-close-white control that also clears the interval before hiding the banner, so closing it doesn't leave an orphaned timer still running and updating hidden DOM nodes every second.

The intervalId returned by setInterval is stored in module scope specifically so both exit paths — the natural zero-completion inside tick() and the manual dismiss button — can reach the same handle and call clearInterval() on it. Keeping a single named reference, rather than letting each path create or track its own, is what guarantees the timer is stopped exactly once and never double-cleared or left dangling under either exit route.