Analog Clock

clock.jh.codes

Overview

A simple analog clock with various designs and settings to accommodate user preferences.

I created this project to practice my CSS and design skills and to satiate my interest in time and how we visualize it.

Demo

Features

Themes:

• Light: A white clockface with black numbers, black hands, and a yellow second hand set on a light gray background.
• Dark: A dark gray clockface with white numbers, white hands, and a blue second hand set on a black background.
• Night: Primarily black with red numbers, hands, and highlights, designed to reduce strain on eyes and preserve night in low light environments.
• Vintage: A vintage themed clock with an oak wood clockface, roman numerals, and brown foreground colors.

Other Settings:

• Show/Hide Second Hand: An option to toggle the visibility of the second hand.
• Ticking/Sweeping Second Hand Motion: A choice between a ticking or sweeping second hand.

Technologies

• HTML
• CSS
• JavaScript

Note

Visit live site at clock.jh.codes.