Analog clock

CSS

I split my css file into parts so that i knew what was what and it would also look better.

Clock face

• .outer-clock-face: Outer circle with a pink border.
• .inner-clock-face: Inner circle as the background.
• Hour markings at 12, 3, 6, and 9 o’clock are positioned using CSS rotate() and translateY().

Clock hands

All hands rotate from one end using transform-origin: 100%.

• Hour hand: short and thick hour-hand
• Minute hand: longer min-hand
• Second hand: thin and pink second-hand
• Smooth movement is achieved with transition: all 0.05s ease-in-out.

design

• I made everything pink 😝🩷
• I chose to only add 4 hour marks so that everything would look more simple.

JavaScript

Time calculation

features

• Outer and inner clock faces with hour markings at 12, 3, 6, and 9.
• Hour, minute, and second hands with smooth movement.
• Fully functional using only CSS and JavaScript.

How it works

The JavaScript moves the hands based on system time

• Gets the current hours, minutes, and seconds from the system.
• Calculates how much each hand should rotate:
  • Second hand → rotates based on seconds.
  • Minute hand → rotates based on minutes plus a small adjustment for seconds for smooth movement.
  • Hour hand → rotates based on hours plus a small adjustment for minutes for gradual movement.
  • An extra 90° is added so that 12 o’clock points straight up.
• Applies the rotation using CSS transform.
• Updates every second using setInterval.
• Sets the initial position immediately so the clock shows the correct time on page load.