Inspiration

I just wanted a clock that feels mine. Not the boring ones you see everywhere, but something clean, simple, and customizable without dragging in a whole framework. The idea was that if I’m going to stare at the time all day, it better look good.

What it does

LOCK IN is basically your personal clock, but upgraded as you can switch between light, dark, or auto theme, pick any accent color & font size you want, show only analog, only digital, or both. Choose your time zone & 12/24 hr format, show or hide seconds, change how the date looks, set alarms with a beep. Saves all your settings so you don’t have to redo them every time, export your setup if you want to share or back it up.

How we built it

HTML for the skeleton. CSS for styling, themes, and smooth hand movement. JavaScript for all the logic, updates, and settings handling.

Challenges we ran into

Making the clock hands move smoothly without any jitter, handling 12/24 hour switch without breaking the analog clock, alarms in different time zones, keeping the design responsive and still looking clean in every mode.

Accomplishments that we're proud of

Full settings system with instant preview and save, alarm that’s not just a beep but also gives a visual cue, a design that’s minimal but still feels nice to use.

What we learned

How powerful Intl.DateTimeFormat actually is, managing user preferences with localStorage, updating the DOM efficiently for smooth animations, packing a lot of customization into a small, simple codebase.

What's next for LOCK IN

More themes and ready-made color palettes Subtle background animations (day/night, gradients, etc.) Maybe add weather & mini calendar right on the clock

Built With

Share this project:

Updates