Тёмный

Build A Clock With JavaScript 

Web Dev Simplified
Подписаться 1,6 млн
Просмотров 359 тыс.
50% 1

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

Опубликовано:

 

6 май 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 563   
@WebDevSimplified
@WebDevSimplified 5 лет назад
Free tickets to my first concert for anyone that can guess the song I butchered in the intro. 🎫
@BabyDespair
@BabyDespair 5 лет назад
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!
@WebDevSimplified
@WebDevSimplified 5 лет назад
@@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.
@bryantgrimminger5481
@bryantgrimminger5481 5 лет назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-D2BPZR-UaYI.html
@alecthomasquinn4438
@alecthomasquinn4438 5 лет назад
Darude - Sandstorm
@145hemu
@145hemu 4 года назад
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 👍
@kienboy9999
@kienboy9999 Год назад
man the placement of numbers around the clock is just magic
@filon861
@filon861 4 года назад
My top favorite web dev channels 1. Web Dev Simplified 2. Dev Ed 3. Kevin Powell 4. Darkcode
@senthur9308
@senthur9308 4 года назад
me ttooo
@covidnineteen5249
@covidnineteen5249 4 года назад
Traversymedia?
@AbidAlWassie
@AbidAlWassie 3 года назад
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}
@mareboinaravi5272
@mareboinaravi5272 3 года назад
@@AbidAlWassie wow thanks man.
@anupkhismatrao9280
@anupkhismatrao9280 Год назад
@LuckystrikeGFXer
@LuckystrikeGFXer 5 лет назад
Best acting and editing skills I have seen so far!
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thank you! *takes dramatic bow*
@AbidAlWassie
@AbidAlWassie 3 года назад
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}
@janbetz1542
@janbetz1542 3 года назад
yes. more often since then cyber native toddlers fiddle with systems online
@zamankhan1255
@zamankhan1255 5 лет назад
Best programming channel I found so far for begginers, nice videos with best projects, keep it up!
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thank you!
@gxc2000
@gxc2000 4 года назад
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.
@WebDevSimplified
@WebDevSimplified 4 года назад
Thank you. I like using CSS when I can for designs since it is so fun to work with.
@jacsonmiranda
@jacsonmiranda 2 года назад
you made so simple, no blablabla, just code and going to the point, great job
@mandihaase2744
@mandihaase2744 3 года назад
Awesome simple, straight-forward tutorial. Did this with my daughter and she loved it!
@darrenhoyne7459
@darrenhoyne7459 2 года назад
Great video bud, clear and to the point, very easy to follow along, good job and keep it up
@matthewguillen2823
@matthewguillen2823 2 года назад
Brother you are the best teacher I’ve ever seen a coding. you teach better than my professors
@alexgomez9033
@alexgomez9033 5 лет назад
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!!!
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thanks! I love Dev Ed as well. He has such a great personality.
@mareboinaravi5272
@mareboinaravi5272 3 года назад
I thought it was too difficult JavaScript but this man shows me Nothing is too Hard. Thanks, man...
@mykhailomikhnovych8303
@mykhailomikhnovych8303 4 года назад
Your awkward acting at the beginning deserves the Oscar my man. Keep it going, you're doing a great job!
@Risehack
@Risehack 4 года назад
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.
@iamreg1965
@iamreg1965 4 года назад
Great video on the way that HTML, CSS and JS work so beautifully together.
@webdevparadise4452
@webdevparadise4452 4 года назад
Nice intro with guitar WebBoi and thanks for this amazing tutorial. Finally I have my OWN watch. Time to learn JS!
@TheWorldlife83
@TheWorldlife83 2 года назад
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)`; }
@harunjonuzi
@harunjonuzi 8 месяцев назад
it doesnt seem to work though? we need to transform the innerText to number, because 30 * "1", it uses strings to multiply...
@jamezjaz
@jamezjaz 3 года назад
Completely amazing. Thank you for this tutorial
@sergten
@sergten 3 года назад
Geez Christ, this channel is golden!
@khanabanana1217
@khanabanana1217 3 года назад
You nailed it man. It is a big project for me to get started in this javascript.
@Suneriins234
@Suneriins234 4 года назад
Only This due to 'defer'in script src,I troubled for hour. Finally got it.Thanks!
@vingram100
@vingram100 2 года назад
Good gosh, thank you so much! I'm going to read about defer now, I was so confused!
@abhilekhgautam5963
@abhilekhgautam5963 3 года назад
You are always exactly to the point.That is what i love about you.
@anujshany8659
@anujshany8659 3 года назад
Just Loved this it didn't even feel like 17 minutes ❤️
@usama57926
@usama57926 4 года назад
this channel is amazing.......... sir you deserve a millions subs and likes
@uzair004
@uzair004 4 года назад
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
@iliashterev38
@iliashterev38 2 года назад
Greeting from Bulgaria. Thank you again for the (one more) nice tutorial.
@ahmmadawshaf
@ahmmadawshaf 3 года назад
Absolutely brilliant tutorial for beginners in JS
@ukmfpaha
@ukmfpaha 3 года назад
This is so cool. I've only ever seen this being done using HTML Canvas but this is way better 👍🔥
@aamirmasood010
@aamirmasood010 11 месяцев назад
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
@balalnaeem
@balalnaeem 3 года назад
`div.number.number${$}*12` would do the job. Double multiplication of 12 is redundant.
@arjunghimire6709
@arjunghimire6709 5 лет назад
You are amazing Bro. Your coding skill is highly impressive and easily understand.
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thanks!
@raphaelmachado7197
@raphaelmachado7197 2 года назад
Your code is so simple and easy for beginners to read
@Mr.slikko
@Mr.slikko 4 года назад
I absolutely love the sketch at the beginning, perfect 👌😹😹😹
@marcdonvito6485
@marcdonvito6485 4 года назад
Very good project to learn how HTML, CSS, and JavaScript work together.
@raresmihalache3189
@raresmihalache3189 4 года назад
Thank you for the tutorial. Very helpful
@zawadahmed5484
@zawadahmed5484 3 года назад
honestly speaking, among all the javascript devs, Kyle is the most talented. That's my opinion
@randyrandall6622
@randyrandall6622 4 года назад
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!
@marcusaureliusregulus2833
@marcusaureliusregulus2833 3 года назад
How to make the tip of the hands pointy like an arrow?
@salehabdullah1154
@salehabdullah1154 3 года назад
@@marcusaureliusregulus2833 By using CSS For example, .clock .hand{ border-top-right-radius: 20px(You can use any other value); border-top-left-radius: 20px; }
@marcusaureliusregulus2833
@marcusaureliusregulus2833 3 года назад
@@salehabdullah1154 thnx mate
@shrn
@shrn 3 года назад
@@marcusaureliusregulus2833 I remember the joke from the dictator movie after reading this. I want my Nuke heads pointy😂
@MrKnaldperlen
@MrKnaldperlen 2 года назад
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.
@Gormlessostrich
@Gormlessostrich 3 года назад
Thanks for another fun tutorial!
@JoonPark1
@JoonPark1 3 года назад
Wow this is an awesome explanation!
@levezinet
@levezinet Год назад
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!
@rawoofahamed1785
@rawoofahamed1785 Год назад
hey can you show me how is it ?
@usama57926
@usama57926 4 года назад
i learned a lot of thing from this lecture
@AbdulJalil-bu6ou
@AbdulJalil-bu6ou 3 года назад
Thank you very much for the tutorial.
@beethoven5984
@beethoven5984 2 года назад
Follow from Spane! Your a good youtuber!
@mizuesato4775
@mizuesato4775 5 лет назад
It’s awesome 👏 I like it‼️ I want to watch your video that is tutorial with html css and JavaScript more and more 😁
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thanks! I'm really glad you enjoyed it.
@saaddogar8563
@saaddogar8563 2 года назад
i love how serious he is in his intro even when joking
@kengthe5949
@kengthe5949 4 года назад
very nice explanation!! thank you!!
@256paveliko
@256paveliko 4 года назад
I'm a beginner programmer and your explanations are excellent
@WebDevSimplified
@WebDevSimplified 4 года назад
Thank you!
@elieli2570
@elieli2570 2 года назад
Awesome project, keep it up!!!
@andrei9115
@andrei9115 2 года назад
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!
@vvvaaal
@vvvaaal 3 года назад
And I thought i had great css knowledge until I started watching your videos. :D
@manishsharma-gf6fw
@manishsharma-gf6fw 5 лет назад
you rock man... just subscribed your channel, waiting for more videos like this
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thanks!
@pepefubias7654
@pepefubias7654 3 года назад
good job and very well explained thank you
@deminouk8347
@deminouk8347 5 лет назад
Awesome! Seems like dificult stuff is explained very simple!! YouGo!! 🌸🌸🌸 /eva from Sweden
@WebDevSimplified
@WebDevSimplified 5 лет назад
I'm really glad you enjoyed the video!
@computersciencewithpeter
@computersciencewithpeter Год назад
Thanks so much for your tutorials 💕😘
@savannahlin8063
@savannahlin8063 5 лет назад
Satisfied! always share your videos with friends to help people live easier.
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thank you! Hopefully your friends enjoy the video.
@ahmedbadra9237
@ahmedbadra9237 3 года назад
you provide really great value
@matejmin
@matejmin 5 лет назад
Great job, it's easy to follow along. nice flow..
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thank you!
@martinguzlej6269
@martinguzlej6269 4 года назад
Loved the Intro ! :D
@user-fe3wv2bz8o
@user-fe3wv2bz8o 3 года назад
You are great ! Thank you so much bro !
@oguzozdemir8886
@oguzozdemir8886 Год назад
Awesome and sipmle project. Thank you...
@ganjeblerencehanma6577
@ganjeblerencehanma6577 2 года назад
thanks for the project. it really helped
@deepakbhargav7434
@deepakbhargav7434 3 года назад
Thanks for sharing your knowledge
@lapto4676
@lapto4676 Год назад
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.
@vishmapdas7898
@vishmapdas7898 Год назад
Keep learning! That's the joy!
@pixelum2023
@pixelum2023 Год назад
Interesting! I had not noticed that basically all clocks have their numbers upright. One more challenge.
@noidea5372
@noidea5372 Год назад
how did you do that? can you share your code?
@Sara-rs4oq
@Sara-rs4oq Год назад
@@noidea5372 1 2 3 4 5 6 7 8 9 10 11 12
@lapto4676
@lapto4676 Год назад
@WebTricks this is what i did
@WiLDeveD
@WiLDeveD 2 года назад
Fine & Useful Content. Thanks...
@priyasharma-rd9kl
@priyasharma-rd9kl 2 года назад
Nice project sir👍and the way you explain is very good.thanku
@muizolaore4630
@muizolaore4630 2 года назад
Great Content Definitely subscribing!!
@medilies
@medilies 3 года назад
"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
@kamal-purohit
@kamal-purohit 4 года назад
Great video... Not at all complecated.. Can use Transtion : 1s ; under hand class For better animation
@pacho7341
@pacho7341 2 года назад
thanks about the tutorial!!
@christopherholt3782
@christopherholt3782 2 года назад
LOL loved the intro Kyle!
@JoeWong81
@JoeWong81 5 лет назад
Dude you're amazing!
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thanks!
@k.m.abusyeduzzal6272
@k.m.abusyeduzzal6272 Год назад
Excellent , I learned a lot
@vijaykumarjee
@vijaykumarjee 2 года назад
very nicely describe.. love from India...
@kevinwaag9976
@kevinwaag9976 Год назад
freaking brilliant!
@marcwinner567
@marcwinner567 5 лет назад
Good stuff as usual!
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thanks!
@barackobam6248
@barackobam6248 Год назад
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
@markvincentlaboy8858
@markvincentlaboy8858 5 месяцев назад
Dude you're great at explaining what and why you're doing it. Thank you. I'm currently in a coding bootcamp and am dreding JS dueto lack of explanation. This really helped me. What I would like to add to this are the minute lines within the hours. I'd like to make a game out of this for my kids to mlearn how to tell time. Any pointers?
@janezklun
@janezklun 5 лет назад
Thank you for very useful video, cheers
@WebDevSimplified
@WebDevSimplified 5 лет назад
You're welcome!
@nic00la1
@nic00la1 Год назад
very cool!! 🤠 i did it today and im proud of myself 💘💫
@handsomecat7225
@handsomecat7225 2 года назад
Excellent!
@andyjohn907
@andyjohn907 3 года назад
thanks for the nice tutorial sir...
@dimitarkinov1984
@dimitarkinov1984 8 месяцев назад
You rock , man!
@ikramikky2838
@ikramikky2838 5 лет назад
this is amazing 🔥
@WebDevSimplified
@WebDevSimplified 5 лет назад
Thanks!
@pccloser
@pccloser Год назад
Perfect ! , Thanks a lot.
@alecthomasquinn4438
@alecthomasquinn4438 5 лет назад
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.
@WebDevSimplified
@WebDevSimplified 5 лет назад
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.
@zuber3228
@zuber3228 2 года назад
maan gya bhai , fan of you
@MinhPham-eh6lr
@MinhPham-eh6lr 3 года назад
great tutorial!
@favourojo3971
@favourojo3971 2 года назад
Thanks alot this was really helpfull
@nicholaidrake1144
@nicholaidrake1144 3 года назад
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??
@AnnieTaylorChen
@AnnieTaylorChen 5 лет назад
Cool! I finally got to see you playing that guitar haha! ^^ This is so fun, I gotta play with it soon! :D I wonder if I can actually make a Time Timer, it's quite expensive to buy one (I mean physical one). I gotta first practise this basic one of course~~~
@WebDevSimplified
@WebDevSimplified 5 лет назад
It was a pretty sad attempt at the guitar. It is the first time I have played it in quite some time. Good luck on making this a timer. It is actually not too hard to convert this code into a timer.
@AnnieTaylorChen
@AnnieTaylorChen 5 лет назад
@@WebDevSimplified I am sure you're still much better than my drum or piano. Haven't played for years and before I only played at basic level, now can't play either at all(don't have either either). lol It's a good hobby. Programmer really needs something else that's creative other than coding.
@WebDevSimplified
@WebDevSimplified 5 лет назад
It is a good hobby. I haven't really had time to play since I started this channel, but I do want to get back to it sometime in the future. Right now it isn't too high on my priorities though since I am super busy with the gym, work, and RU-vid.
@AnnieTaylorChen
@AnnieTaylorChen 5 лет назад
@@WebDevSimplified I'm actually wondering how you manage your time. I know I should be working out/sewing/writing blog etc, but I hardly find time. After studying I found myself pretty tired for anything else. :( And what I keep thinking in my head is how much there is still left for me to learn and how much I've forgotten and must review. Maybe some kinda "a day in my life" video?(I particularly want to know the gym part).
@WebDevSimplified
@WebDevSimplified 5 лет назад
@@AnnieTaylorChen that is a good idea. I have thought about making a video like that since I think it would be fun. My biggest advice for getting things done is have something that holds you accountable. I go to the gym with my girlfriend and she keeps me in check with that. As for work it pays my bills which is a good way to keep you accountable. Lastly RU-vid I have 9000 people depending on me to make 2 videos a week which is a lot of motivation.
@fangyuyang2857
@fangyuyang2857 2 года назад
This is beautiful
@code_south
@code_south 3 года назад
I made a tiny improvement where the numbers are not upside down/rotated themselves, so they look straight (just wrap every number and then use the wrapper to correctly position the number around the circle, and then rotate the number inside the wrapper by compensating the angle just with a - before) and also added a tick tock sound to each movement lol.
@jaishrikrishna5755
@jaishrikrishna5755 2 года назад
how you added the sound can you please share .Thanks
@code_south
@code_south 2 года назад
@@jaishrikrishna5755 Of course buddy. //It plays 2 different audio clips depending on if it's even or not, to have more variety haha... It's an old code and haven't revised it but here it is. This goes inside the same setClock function: let factorX = currentDate.getSeconds(); if (factorX % 2 == 0) { let audio = new Audio('snds/clock1.mp3'); } else { let audio = new Audio('snds/clock2.mp3'); } audio.play();
@TheUtuber999
@TheUtuber999 4 года назад
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!
@crispinthomas2992
@crispinthomas2992 2 года назад
To do this, I put the numbers in their own div and reversed the angle of rotation like so: 1 2 etc
@SirZyPA
@SirZyPA Год назад
to automate it just do transform: rotate(calc(var(-rotation)*-1)); that should work as im pretty sure it inherits the variable An example: HTML:
@GenesisGlobalOfficial
@GenesisGlobalOfficial Год назад
@@crispinthomas2992 It worked. Thanks so much for dropping this.
@toyosisalami6453
@toyosisalami6453 2 года назад
Thank you very much for this great tutorial! I understand the code but I couldn't have figured out the math of it... I just don't know how to figure out how many degrees the minute and hour hands turn each second
@andrei9115
@andrei9115 2 года назад
Because that formula that he used is not that easy! I made it by myself using just angles. Think about every second runs through 6 degrees, every minute and every hour 30 degrees(6*5). Then you just increment the angle for each of those and that's it. If you want the minute and hour hand to move gradually with every second that passes, then you will have to make a simple math calculation, is not difficult! That ratio thing that he used literally blew my mind. Css part was incredible, congrats but the javascript side was so difficult to understand!! I dont understand why my minute and hour elements translate on X very little, like 1 degree after I load the page...
@mocococo2877
@mocococo2877 Год назад
There are any other version using different ways of calculations. You may find some that are more understandable for you and start from there.
@anupkhismatrao9280
@anupkhismatrao9280 Год назад
Amazing 🤩
@georgettebeulah4427
@georgettebeulah4427 4 года назад
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
@afzalmahmud1974
@afzalmahmud1974 3 года назад
Thank you. Love your voice 😍 sir.
@webart5544
@webart5544 3 года назад
So beautiful clock
@suzanmagar6806
@suzanmagar6806 2 года назад
awesome it worked
@shabnamnaaz4676
@shabnamnaaz4676 3 года назад
awesome tutorial
Далее
Build Tic Tac Toe With JavaScript - Tutorial
41:46
Просмотров 354 тыс.
Gale Now VS Then Edit🥵 #brawlstars #shorts
00:15
Просмотров 930 тыс.
I Built 100 Homes And Gave Them Away!
09:36
Просмотров 36 млн
5 Javascript Projects to Build (For Beginners)
10:21
Просмотров 297 тыс.
5 JavaScript Concepts You HAVE TO KNOW
9:38
Просмотров 1,4 млн
Build this JS calculator in 15 minutes! 🖩
15:20
Просмотров 396 тыс.
The Easiest Javascript Game Ever
8:34
Просмотров 952 тыс.
Learn JavaScript Hoisting In 5 Minutes
5:40
Просмотров 121 тыс.
Create Analog Clock in HTML CSS & JavaScript
19:14
Просмотров 22 тыс.
Using CSS custom properties like this is a waste
16:12
Просмотров 160 тыс.
I Tested Every FREE Drawing App
22:15
Просмотров 138 тыс.