DEV Community

Cover image for Daily Challenge #3 : The "Binary Clock" 🕰️
bingkahu
bingkahu

Posted on

Daily Challenge #3 : The "Binary Clock" 🕰️

(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 🚫

  1. NO JavaScript Allowed: You cannot use new Date(), setInterval, or any script-based time tracking.

  2. Pure CSS/HTML only: You must use CSS animations (@keyframes) to sync the "bits" to real-time.

  3. 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)