ajaybains / analog-clock

Analog-Clock

A simple anlaog clock application.
Day 2 of free Javascript 30 course online
Analog created by a clean simple CSS and JS logic
Create a simple html clock with three hands (one each,Hour,minute and second)
for starting let the clock hands be positioned above each other
change the transfrom -origin property to 100 %( for hand to rotate from its end)
if you want for aesthetics and good ux you can use transition-timing-function property(on clock hands) and set it to cubic bezier to have a lil springy click effect.

JS part

Create a function for doing folllowing steps

Select hands by DOM manipulation(can be done outside the fn too)

find current hour minute and seconds using inbuilt JS functions

convert the time from above step to degrees (time/60)*360 for minute and second and (time/12)*360 for hours

rotate the time hand by corresponding degrees

Call the function created above at regular intervals.

And Voila You have an analog clock ready

https://analogclocknew.netlify.app/ checkout for reference