One of the best projects for learning CSS and JavaScript is an analog clock. Creating an analog clock teaches you how to use absolute position and transform in many different ways. It also forces you to learn how to modify your CSS with JavaScript. Lastly, it is a beginner friendly project which makes it perfect for anyone.
In this video we will be covering CSS position, and transform extensively. We will also use CSS variables to make the JavaScript integration much easier. By the end of this quick video you will have a fully functional clock and more importantly increased your CSS and JavaScript skills significantly.
📚 Materials/References:
CSS Position Tutorial: https://youtu.be/jx5jmI0UlXU
GitHub Code: https://github.com/WebDevSimplified/JavaScript-Clock
Code Pen Code: https://codepen.io/WebDevSimplified/pen/WBbyPW
🧠 Concepts Covered:
– How to use CSS variables in JavaScript
– JavaScript date object
– How to use CSS transform to center elements
– How to use CSS transform to rotate elements on an axis
– Using data attributes as selectors in JavaScript
– Basic CSS pseudo element usage
🌎 Find Me Here:
Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#Clock #JavaScript #CSS
Original source
38 responses to “Build A Clock With JavaScript”
Free tickets to my first concert for anyone that can guess the song I butchered in the intro. 🎫
very nice explanation!! thank you!!
I am getting an error-…. document is not defined…. can someone tell how to correct it
Great video… Not at all complecated..
Can use
Transtion : 1s ; under hand class
For better animation
why u dont use ; in js code
pls help
the hands are not rotating in mine
Thanks for this useful tutorial. I am trying to use Emmet in Sublime to do the abbreviation that you used. I have installed Emmet but I cannot seem to activate it. My document is saved as .html but when I type div.number.number$*12{$}*12 nothing happens. Any ideas?
Hey nice but how can we make the numbers rotated at 0 degrees but distributed evenly. Usually each number is upright in an analogue clock
This is great tutorial, I really enjoyed it. But the lack of semicolons in JS file makes me very anxious :D.
Is it possible with sublime text?
In JavaScript at line no 18 a error is occur cant read the property of "style" null" any one explain this?
Thank you! Man, it's such a small JS file, yet just looking at it makes me feel dumb. lol Gotta get better at math. Great tutorial, as always!
Great video on the way that HTML, CSS and JS work so beautifully together.
A really nice, enjoyable project. I was expecting it to contain some complex drawing in the JavaScript file. It was very surprising to see that almost all of the work is actually done in the CSS file! Many thanks and really well presented.
This make so much sense and can relate to it a lot and see what you mean. But do not understand a lot from what your saying so wish to understand more
I absolutely love the sketch at the beginning, perfect 👌😹😹😹
Although I do see the solution nice, some things would just fail miserably in older browsers, especially in IE. It should be tested there also, otherwise it's not complete.
Introducing some humour,….. I like it
Need some code to flip/rotate numbers 3 through 9 so they don't look kooky.
Awesome. A lot of learning packed into the shortest time.
I still had to manually write the numbers
For me its showing element is null. what should I do?
why your six is looking like nine ?
How can I have the second hand in a linear animation please ?
Thank you for the tutorial. Very helpful
Anyone know how to use scss variables with js? Having trouble implementing my scss variable when we .setProperty
thanks for the tutorial. How do I change the 3,6 and 9 so they are aligned up. thanks
Only thing I can really say is for you to consider transform: translate(-50%, -50%) instead of only using translateX. Or is there a specific reason you just use translateX?
Need help with this: when I try to add in the hands, it pushes all the numbers off my clock and I just have a blank circle. Thanks!
My top favorite web dev channels
1. Web Dev Simplified
2. Dev Ed
3. Kevin Powell
4. Darkcode
Think there is a prob with translateX. for windows edge. Works fine in chrome.
Very good project to learn how HTML, CSS, and JavaScript work together.
Thank you for your tutorials. They're awesome because they're short, to the point and very understandable.
I watched this one and learned a few things, and I took the liberty to fool around a little with the code and combine it with a code I already had learned. The result can be seen here: http://www.liveyourdreams.be/tests/analogclock.php
Feel free to comment tips on how I can improve my code. Thanks again, you rock
7K Views!? That’s UNDERRATED!
It would be nice if the numbers could be positioned at their respective rotational angles while remaining upright. I ended up using an image for the clock face and front bezel, but used the rest of your code as the basis for my clock. Thanks for this!
Great job Web Dev. I really like the pacing of your videos.
I am having some issues with this one, if anyone can help. I went through the tutorial and typed and double checked with no errors but no hand rotation. I then copied/pasted it from CodePen for the HTML/CSS/Javascript, in case i missed something. My styles and script links are correct ?????? Still no hand movement 🙁
cool intro🤣