Build A Clock With JavaScript
ฝัง
- เผยแพร่เมื่อ 6 พ.ค. 2019
- 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: • Learn CSS Position In ...
GitHub Code: github.com/WebDevSimplified/J...
Code Pen Code: codepen.io/WebDevSimplified/p...
🧠 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: / devsimplified
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Clock #JavaScript #CSS
Free tickets to my first concert for anyone that can guess the song I butchered in the intro. 🎫
Black Sabbath - Iron Man. Just the song alone would have been enough for the like and sub, but the class too was very good and greatly helpful. Great Job!
@@BabyDespair The song is such a classic. Looks like you will be getting VIP tickets to my first concert. If you are lucky I'll play Smoke On The Water and Wonderwall.
th-cam.com/video/D2BPZR-UaYI/w-d-xo.html
Darude - Sandstorm
Man You are the BEST.I like your videos.its more easy to understand JS through your Videos.thanks for sharing your knowledge through these videos bro. Love you bro 👍
man the placement of numbers around the clock is just magic
My top favorite web dev channels
1. Web Dev Simplified
2. Dev Ed
3. Kevin Powell
4. Darkcode
me ttooo
Traversymedia?
1
2
3
4
5
6
7
8
9
10
11
12
.number {
position: absolute;
width: 100%;
height: 100%;
/*top: 0;*/
/*left: 0;*/
text-align: center;
font-size: 1.4rem;
font-weight: 700;
--rotation: 0;
transform: rotate(var(--rotation));
}
.reverse {
--reverse: 0;
transform: rotate(var(--reverse));
}
.number1 { --rotation: 30deg}
.number2 { --rotation: 60deg}
.number3 { --rotation: 90deg}
.number4 { --rotation: 120deg}
.number5 { --rotation: 150deg}
.number6 { --rotation: 180deg}
.number7 { --rotation: 210deg}
.number8 { --rotation: 240deg}
.number9 { --rotation: 270deg}
.number10 {--rotation: 300deg}
.number11 {--rotation: 330deg}
/*.number12 {--rotation: 30deg}*/
.number1 div{ --reverse: -30deg}
.number2 div{ --reverse: -60deg}
.number3 div{ --reverse: -90deg}
.number4 div{ --reverse: -120deg}
.number5 div{ --reverse: -150deg}
.number6 div{ --reverse: -180deg}
.number7 div{ --reverse: -210deg}
.number8 div{ --reverse: -240deg}
.number9 div{ --reverse: -270deg}
.number10 div{--reverse: -300deg}
.number11 div{--reverse: -330deg}
@@AbidAlWassie wow thanks man.
❤
Best acting and editing skills I have seen so far!
Thank you! *takes dramatic bow*
1
2
3
4
5
6
7
8
9
10
11
12
.number {
position: absolute;
width: 100%;
height: 100%;
/*top: 0;*/
/*left: 0;*/
text-align: center;
font-size: 1.4rem;
font-weight: 700;
--rotation: 0;
transform: rotate(var(--rotation));
}
.reverse {
--reverse: 0;
transform: rotate(var(--reverse));
}
.number1 { --rotation: 30deg}
.number2 { --rotation: 60deg}
.number3 { --rotation: 90deg}
.number4 { --rotation: 120deg}
.number5 { --rotation: 150deg}
.number6 { --rotation: 180deg}
.number7 { --rotation: 210deg}
.number8 { --rotation: 240deg}
.number9 { --rotation: 270deg}
.number10 {--rotation: 300deg}
.number11 {--rotation: 330deg}
/*.number12 {--rotation: 30deg}*/
.number1 div{ --reverse: -30deg}
.number2 div{ --reverse: -60deg}
.number3 div{ --reverse: -90deg}
.number4 div{ --reverse: -120deg}
.number5 div{ --reverse: -150deg}
.number6 div{ --reverse: -180deg}
.number7 div{ --reverse: -210deg}
.number8 div{ --reverse: -240deg}
.number9 div{ --reverse: -270deg}
.number10 div{--reverse: -300deg}
.number11 div{--reverse: -330deg}
yes. more often since then cyber native toddlers fiddle with systems online
you made so simple, no blablabla, just code and going to the point, great job
Awesome simple, straight-forward tutorial. Did this with my daughter and she loved it!
Great video bud, clear and to the point, very easy to follow along, good job and keep it up
Best programming channel I found so far for begginers,
nice videos with best projects,
keep it up!
Thank you!
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.
Thank you. I like using CSS when I can for designs since it is so fun to work with.
Great video on the way that HTML, CSS and JS work so beautifully together.
Man you definitely are underrated! i am thankful to Dev Ed for introducing me to you. I enjoy all your videos. KEEP UP THE GOOD WORK!!!
Thanks! I love Dev Ed as well. He has such a great personality.
Brother you are the best teacher I’ve ever seen a coding. you teach better than my professors
I thought it was too difficult JavaScript but this man shows me Nothing is too Hard. Thanks, man...
Completely amazing. Thank you for this tutorial
Your awkward acting at the beginning deserves the Oscar my man.
Keep it going, you're doing a great job!
Cool, man! I am new to this topic, and the Internet search did not give much results. But I came across your channel and you helped me. A huge thank you from Russia.
Nice intro with guitar WebBoi and thanks for this amazing tutorial. Finally I have my OWN watch. Time to learn JS!
You are always exactly to the point.That is what i love about you.
You nailed it man. It is a big project for me to get started in this javascript.
Geez Christ, this channel is golden!
Just Loved this it didn't even feel like 17 minutes ❤️
Absolutely brilliant tutorial for beginners in JS
This is so cool. I've only ever seen this being done using HTML Canvas but this is way better 👍🔥
Very good project to learn how HTML, CSS, and JavaScript work together.
Greeting from Bulgaria. Thank you again for the (one more) nice tutorial.
was searching for a way to add curve text or numbers inside clock , found out there is no easy way except jquery or another library, BUT then i found Web Dev Simplified, yeah Simplified
Only This due to 'defer'in script src,I troubled for hour. Finally got it.Thanks!
Good gosh, thank you so much! I'm going to read about defer now, I was so confused!
I absolutely love the sketch at the beginning, perfect 👌😹😹😹
Thank you for the tutorial. Very helpful
amazing!it's lot better than using clock svg image as background.You really made it simplified with that number transform degree property man.....loved it
this channel is amazing.......... sir you deserve a millions subs and likes
Thanks for this, all your videos are very useful, short and precise. 🙂
we can add this JavaScript to rotate numbers without writing 12 different css -
let allNum = document.querySelectorAll('.number');
for(let num of allNum){
num.style.transform = `rotate(${30*num.innerText}deg)`;
}
it doesnt seem to work though? we need to transform the innerText to number, because 30 * "1", it uses strings to multiply...
i love how serious he is in his intro even when joking
Your code is so simple and easy for beginners to read
Thanks for another fun tutorial!
i learned a lot of thing from this lecture
Thank you very much for the tutorial.
For complete beginners, I recommend putting video to half speed.
Question: How did you learn what all of these individual instructions mean?
It seems like it is easy just to copy cat this project but learning the logic is something different and so important.
Did you learn how to create this clock after learning W3 Schools? What gave you the logic? Thank you!
How to make the tip of the hands pointy like an arrow?
@@marcusaureliusregulus2833 By using CSS
For example,
.clock .hand{
border-top-right-radius: 20px(You can use any other value);
border-top-left-radius: 20px;
}
@@salehabdullah1154 thnx mate
@@marcusaureliusregulus2833 I remember the joke from the dictator movie after reading this. I want my Nuke heads pointy😂
I would like to add to this:
Program it while you watch the video. Play around with the code, try and set left to 75% and not 50%. What does it do? Play around, to see how the logic works.
Wow this is an awesome explanation!
honestly speaking, among all the javascript devs, Kyle is the most talented. That's my opinion
very nice explanation!! thank you!!
So basically, in your javascript program you call the current Date every time and then you just display that date accordingly. I think, a more practical way would be if you get the currentDate() once and then from second to second increment all the hands accordingly and then check the currentTime from the Internet and your clock and see if they are the same...I mean, your way is much simpler than trying to calculate how many degrees does the minute and hour move in 1 second and increment it every second :) Keep up the good work!
Awesome project, keep it up!!!
You are amazing Bro. Your coding skill is highly impressive and easily understand.
Thanks!
`div.number.number${$}*12` would do the job. Double multiplication of 12 is redundant.
Loved this video! I followed along and edited my way some. I was having trouble adding a header centered above the clock. It keeps adding the heading to the left of the clock. any suggestions??
Is there any solid reason to use dataset ids for selecting hand elements? I preferred selecting by class names.
Awesome! Seems like dificult stuff is explained very simple!! YouGo!! 🌸🌸🌸 /eva from Sweden
I'm really glad you enjoyed the video!
You are great ! Thank you so much bro !
good job and very well explained thank you
you provide really great value
Thanks so much for your tutorials 💕😘
And I thought i had great css knowledge until I started watching your videos. :D
you rock man... just subscribed your channel, waiting for more videos like this
Thanks!
thanks for the project. it really helped
Loved the Intro ! :D
It’s awesome 👏 I like it‼️ I want to watch your video that is tutorial with html css and JavaScript more and more 😁
Thanks! I'm really glad you enjoyed it.
Follow from Spane! Your a good youtuber!
Great job, it's easy to follow along. nice flow..
Thank you!
Thanks for sharing your knowledge
Great Content
Definitely subscribing!!
"Absolute children indise an relative container" changed my life
I used to make a JS scirpt that follows the container position to update children positions
Awesome and sipmle project. Thank you...
I'm a beginner programmer and your explanations are excellent
Thank you!
Hi, How do I sync the clock with a different time in a different country?
Satisfied! always share your videos with friends to help people live easier.
Thank you! Hopefully your friends enjoy the video.
Thank you so much for an incredibly great video. I have been struggling to make clocks and gauges and this provides a superb implementation of the design patterns I need. Bravo. But my clock would not move, and debugging showed null values for the hands. Toward the end of the comments here a large number of people appear to have the same issue. It seems to me that the call to document.querySelector is using search by attribute (['date-hour-hand'] etc) but these attributes do not exist in the sample HTML given for the hands. I simply added an id to the hand divs and used document.getElementById instead and all works perfectly. I thought others may like to know. It would seem that this is an inconsistency in the code in the video, and I suppose videos are hard to go back and edit corrections in.
I'll be adapting this to make clocks and compasses for use in Node-RED. I owe you much gratitude. All the best from Down Under in Australia!
hey can you show me how is it ?
Fine & Useful Content. Thanks...
Dude you're amazing!
Thanks!
Nice project sir👍and the way you explain is very good.thanku
Thank you for very useful video, cheers
You're welcome!
Good stuff as usual!
Thanks!
is there a way to avoid repeating. css for number 1 to 12. define variable or set style in JS?
I really love your work and all what you do . I had a similar exercise and did exactly like you but at the level of the JavaScript the code didn't work don't know why
Excellent , I learned a lot
thanks for the nice tutorial sir...
Well done....
How can I possibly edit and set the time of my choice? Something like a prompt when the page loads "please edit the time of your choice or load the default time".
very cool!! 🤠 i did it today and im proud of myself 💘💫
I figured out how to rotate the numbers to their upright position on my own and it felt so good! I don't know if it was intentional but it's a great method, leaving things out for the learner to add.
Keep learning! That's the joy!
Interesting! I had not noticed that basically all clocks have their numbers upright. One more challenge.
how did you do that? can you share your code?
@@noidea5372
1
2
3
4
5
6
7
8
9
10
11
12
@WebTricks this is what i did
just wanna ask, whats more appropriate to use in .js? var or const?
Great video... Not at all complecated..
Can use
Transtion : 1s ; under hand class
For better animation
Anyone know how to use scss variables with js? Having trouble implementing my scss variable when we .setProperty
Perfect ! , Thanks a lot.
Excellent!
great tutorial!
this is amazing 🔥
Thanks!
thanks about the tutorial!!
Finally finished this project after like a week of on-and-off effort. Tips/a vid on sustaining effort perhaps? I can only concentrate on this stuff for like 2-4 hours before my mind refuses to absorb anything more.
That is a good idea. 4 hours of focused concentration pretty good if you ask me. My best advice would be to take a break when you start to lose focus and come back after 30 minutes or so. That will freshen your mind up.
maan gya bhai , fan of you
hi, how can i add a functionality to handle a negative number input... 4 * - 7 for instance should output -28.
LOL loved the intro Kyle!
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!
freaking brilliant!
sir how can we add sound effects on seconds hand....🤔🤔🤔🤔🤔
what does the before and after declaration stand for / mean?
Thanks alot this was really helpfull
Hi, Can you please explain how --rotation can be used for two different classes
very nicely describe.. love from India...
This is great. Do you have the steps for how to get the browser to show through the server.js and index.js??
This is beautiful