HTML5 | How to create an Analog Clock using HTML5 CSS3 and JavaScript

In this video we will learn to create an analog clock using HTML5 CSS3 and JavaScript

In this video I am using Brackets. Its an open source free software and you can download it from

Complete Code:

And if you want to add calendar to the project then check this

Don't forget to comment share and subscribe.
have fun coding!

stay happy and keep smiling :-)

Complete Playlist:

[Durkee]

Thanks for sharing! this was a fun experience

[wbqv]

Thanks for sharing. It's a very useful and informative piece. You are a star!

[supajay]

Excellent tutorial, easy to follow and got the job done. Thank you

[albertgalvez]

Thanks for the tutorial, I smiled when I've seen mine move. ;)

[AliRaza-sxpz]

thanks Sir for sharing, its very helpful, thanks again

[rohitsisaudia]

love the tutorial. Adding audio would be a plus +YusufShakeel

[KOTHAABHISHEK]

your tutorial is awesome please add voice or any background music thanks for the tutorial

[RiefvanAchmadMasrury]

Thx for sharing the code. Could you please add the tutorial for changing the size of the clocks etc.

[abhik]

+Yusuf Shakeel can we add timezones in a dropdown toolbar and update the same ????

[KOTHAABHISHEK]

can we use this code in canvas or only in svg

[rohinisrivastava]

hey, if i want to insert the number 1, 2, 4, 5, 7, 8, 10.11
may i know the x and y axis for that..

[dinesheswaramoorthy]

please explain when you program it that will be more helpful to students like us

[sivamca]

Awesome. one help how to drag hours and minit could you help me?

[taylorwininger-sieve]

+Yusuf Shakeel How can I operate the html clock?

[skandam]

can i knw which text editor u have used...?

[aleksandarereman]

Coud you tell me how to make the clock run 5x, 10x or 20x times faster?

[jimmy]

may i know what's your text editor ?

[zinmoe]

Thanks you for sharing these codes!
The following codes are not understand very well, so please explain me to understand more clearly
function setAttr(id, val){
    var v = 'rotate(' + val + ', 70, 70)';
     document.getElementById(id).setAttribute('transform', v);
};