A flip-clock countdown to an arbitrary target date, written in dependency-free, modern JavaScript.
Serve the directory with any static file server, e.g.:
python3 -m http.server 8765then open http://localhost:8765/.
Change the target date by editing the data-target attribute
on the <html> element in index.html:
<html lang="en" data-target="2027-01-01T00:00">Any value accepted by new Date() works.
countdown.js is an ES module that exports a Countdown class:
import { Countdown } from "./countdown.js"
const clock = new Countdown("2027-01-01T00:00", document.getElementById("countdown"))
clock.start()
// clock.stop()The constructor builds the DOM inside the given container.
The display is laid out as DDD:HH:MM:SS (days, hours, minutes, seconds).
index.html— entry markup, loadsindex.jsas a moduleindex.js— boots the countdowncountdown.js—Countdownclass with the flip animation logicstyle.css— visual stylesimg/— the digit images (up_0.png–up_9.png,down_0.png–down_9.png), background, and favicon