Create Analog Clock with HTML, CSS and Javascript

Опубликовано: 24 Октябрь 2024
на канале: Code Hub

256

In this video, we'll create beautiful analog clock with HTML, CSS and Javascript.

We'll create it completely from scratch with using any svg or icons. Every design will be created in CSS.

Also Watch:
Create Glowing Digital Clock With HTML, CSS and Javascript:    • Create Glowing Digital Clock With HTM...

-------------------------------------------------------------------------------------
Equations:
Hour Hand Rotation Formula:
12 hours = 360 deg
1 hour = 360 deg / 12 = 30 deg
H hours = 30 * H = 30H

As hour hand also moves with minutes hand so if in 1 hour “hour hand” moves 30 deg then we can say:
60 minutes = 30 deg

if hour hand moves 30 deg in 60 minutes then we can also say that:
1 minute = 30 / 60 = 1 / 2

As, in 1 minute hour hand moves “1 / 2 deg”. So, we can also say that:
M minutes = (1 / 2) * M = M / 2

So, Hour hand’s rotation formula will be:
H hour = 30H + M / 2

Minutes Hand Rotation Formula:
60 minutes = 360 deg
1 minute = 360 / 60 = 6 deg
M deg = 6 * M = 6M

Seconds Hand Rotation Formula:
60 seconds = 360 deg
1 second = 360 / 60 = 6 deg
S deg = 6 * S = 6S

-------------------------------------------------------------------------------------
Source Code: https://github.com/FLDevelopers/Analo...

-------------------------------------------------------------------------------------
I hope, you'll like this video. If you have any question related to this video then ask in comments section without any hesitation.

Also Don't forget to like this video and also share it with your friends. Also don’t forget to subscribe our channel and also hit that notification bell to get the notification of our latest video.

-------------------------------------------------------------------------------------
Join WhatsApp Channel: https://whatsapp.com/channel/0029VaE0...
Check out our website: https://www.freetrained.com/
Facebook Page Link:   / free_trained
Facebook Group Link:   / 1746009532359857

Please Subscribe Our YouTube Channel For More interesting Videos And Don't Forget To Share Our Channel With Your Friends.

Note: *Please Turn Off Any Ad Blocker Software or add-on to support us.

#analogclock #html #css #javascript #tutorial #viral