(ignore the 6 in the binary cover photo...)
It is February 15th, and we are stripping away the comfort of the standard decimal system. Your mission is to build a clock that only a true nerd (or a computer) could love.
The Mission 🚀
Create a functional Binary Clock that displays the current time using bits (0s and 1s) or "lit" vs "unlit" circles.
The Rules 🚫
NO JavaScript Allowed: You cannot use
new Date(),setInterval, or any script-based time tracking.Pure CSS/HTML only: You must use CSS animations (
@keyframes) to sync the "bits" to real-time.No Interactivity: The clock must "run" automatically without the user clicking anything. ### The Goal 🏆 Each column (Hours, Minutes, Seconds) should correctly increment using CSS animation delays. > Pro Tip: Think about the math! A "seconds" bit needs to toggle every 1s, but the next bit needs to toggle every 2s, 4s, 8s, etc.
How to enter:
Drop your CodePen or GitHub Repo in the comments!
-
Bonus Points: If you include a "Toggle Decimal" button that reveals the human-readable time (still using only CSS).
- Extra Credit: If you make the UI look like a high-tech cyberpunk terminal. 📟
Have fun!
Top comments (0)