Now that we are familiar with the Date object, we have to animate the hands so that it works like a real clock. In order to do this we are going to use the CSS property transform. And on transform we need to rotate the hand. Since the transform-origin default property is set to 50%, that makes it rotate in the middle instead at the end like how we want it. So all we have to do is set transform-origin to 100% to achieve what we want.
One last thing we can’t forget to talk about is the setInterval method. This repeats a given function at every given time-interval. For this project, we have to set the time to 1 sec. This will run the code (rotating the hand) every second. This will give us the ticking functionality and make our clock functional.
Here is the source code for this project and link to see the finished project.