How to make a simple analog clock using HTML, CSS, and Javascript ?

by keshav

---

---

In this article, we will learn how to make a simple analog clock using HTML, CSS, and Javascript. It will show the current system time of your computer. 

The underlying logic for this analog clock is very simple. What we have done is we obtained the system time using the Javascript Date object Date() and its functions getHours(), getMinutes(), and getSeconds(). Then the time is converted into the angle of rotation for the hour, minute, and second hand. 

To create the frame of the clock we used an image of the clock without hands. To create hour, minute, and second hand we have made three divs with black background color and different lengths and thicknesses. we have adjusted the position of these divs in such a way that their bottom coincides with the center of the clock frame. For the rotating movement of clock hands, we have set the transform-origin of the hands (i.e divs) to the bottom. 

Following is the code to make the analog clock using HTML, CSS, and Javascript:

We recommend you to watch this video along with the code. It will help you to understand the code better:

CODE:

See the Pen
analog clock uisng html by Vidyasheela (@_vidyasheela)
on CodePen.

Download link - here.

Also Read:

• How to make Sticky Nav Bar Using HTML and CSS?
• How To Make Show Password Button Using Javascript
• How to make a simple HTML Color Code Picker

---