Leonardo Devai
df19a2bbb9
Pinned 2026 toolchains (Go 1.26, Rust 1.98/edition 2024, Python 3.14 + uv, Node 24, Zig 0.16, NixOS 26.05), postgres 18 / mongo 8, lockfiles built from, non-root runtimes, .dockerignore, per-project LICENSE, READMEs with the git.devai.io clone line, checkout@v7 CI. Security fixes in the legacy Rust APIs (any-password login, self-assigned admin, hard-coded JWT secret), JWT alg/exp/sub enforcement across the blog series, safe markdown links in the frontends, and many smaller bugs — every project was built, run and exercised end to end. Adds scripts/publish.sh + a CI publish job that splits every folder into its own repo at git.devai.io/templates/<folder>. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01128fhuZbgivaSJvtMf4s1G
1.9 KiB
countdown-timer
A live countdown to any moment you pick — days, hours, minutes and seconds,
ticking away. It's your first look at doing something on a timer with
setInterval, and at doing arithmetic with dates.
Run
Get it: git clone https://git.devai.io/templates/countdown-timer.git
Double-click index.html — it opens in your browser and works. Nothing to
install, no build step.
Or serve it like production:
docker compose up --build
Then open http://localhost:8080.
How it works
setInterval(tick, 1000) asks the browser to run tick() every second. Each
tick subtracts two dates — target - new Date() gives the milliseconds between
them — and splits that gap into days (86,400 seconds), hours (3,600), minutes
and seconds with Math.floor and % (the remainder).
setInterval returns an id; clearInterval(id) stops it. The code clears the
old timer before starting a new one whenever you pick a date, and stops the
clock for good when it reaches zero. It counts down to next New Year until you
choose something else.
Try it: count down to your birthday with new Date("2027-05-01"), add a
"Reset to New Year" button, or make the seconds pulse by toggling a CSS class
on each tick.
Layout
index.html the date picker and the four number boxes
app.js tick(), start(), and the interval they share
styles.css the look; follows your system's light or dark mode
Deploy
Push to your own GitHub repo and the shipped workflow
(.github/workflows/ci.yml) tests the compose stack, publishes the image to
GHCR, and — once you set the DEPLOY_HOST / DEPLOY_USER variables and
DEPLOY_KEY secret — deploys it to your server over ssh.
Part of devai.io — the Web Basics track: HTML, CSS & JavaScript, one concept at a time. Next up: dark-mode-toggle.