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.
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 👍
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
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.
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)`; }
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.
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.
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!
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
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!
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 By using CSS For example, .clock .hand{ border-top-right-radius: 20px(You can use any other value); border-top-left-radius: 20px; }
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.
"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
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 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();
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.
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?
I hope that a junior front end, dont have to really build things like this. I prefer smaller , less complex things. More like actual design. Navbars, sidebars, portfolio making etc. I wouldnt be able to create something like this by myself ever. I understand the logic and the code, but to build by urself from 0, thats another level. edit: i take my words back. Today i can builkd clock by my own. :D Biggest challenge actually is css not the js
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
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...
This is beautiful, well done! One observation I made is that the numbers 3-9 are not displayed in a way a user can easily recognize on the clock screen as it is on a real clock. Is there no way to display them properly on the clock screen? I'll love to learn more.
If you wanna have digits of hours in natural direction, change in html code for 1 from 1 to 1 for 2, ...11 just add in css code .clock .number span { display: block; transform: rotate(calc(var(--rotation) * -1)); } 😎
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!
I wondered this too. My solution was to put each number in a nested h3 and then transform: rotate that nested h3 with the negative value of whatever I rotated the div containing the h3. This is like a spinning wheel. So I put miniature spinning wheels on top of the big spinning wheel.
hey, it's a great tutorial and the clock looks really good, but i guess there might be some errors with a js file, I double checked my code, and compared with yours, the hands of the clock are not moving.
For some reason the last last function is throwing an error "cannot read properties of null (reading 'style') "and the hands stay pointed in the 12:00 position. I also copied the HTML, CSS, and JS directly from the CodePen and still receive the same issue so I don't believe I have a typo anywhere. Im using the most up to date version of google chrome; any insight onto what might be going on? Great tutorial, just not sure how I broke mine lol.
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".
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
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
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.
❤
Brother you are the best teacher I’ve ever seen a coding. you teach better than my professors
you made so simple, no blablabla, just code and going to the point, great job
I thought it was too difficult JavaScript but this man shows me Nothing is too Hard. Thanks, man...
Best programming channel I found so far for begginers,
nice videos with best projects,
keep it up!
Thank you!
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
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.
honestly speaking, among all the javascript devs, Kyle is the most talented. That's my opinion
Awesome simple, straight-forward tutorial. Did this with my daughter and she loved it!
Geez Christ, this channel is golden!
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...
Your awkward acting at the beginning deserves the Oscar my man.
Keep it going, you're doing a great job!
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.
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!
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.
I'm a beginner programmer and your explanations are excellent
Thank you!
this channel is amazing.......... sir you deserve a millions subs and likes
Great video bud, clear and to the point, very easy to follow along, good job and keep it up
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
i love how serious he is in his intro even when joking
Greeting from Bulgaria. Thank you again for the (one more) nice tutorial.
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 ?
Your code is so simple and easy for beginners to read
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
And I thought i had great css knowledge until I started watching your videos. :D
Very good project to learn how HTML, CSS, and JavaScript work together.
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!
Nice intro with guitar WebBoi and thanks for this amazing tutorial. Finally I have my OWN watch. Time to learn JS!
Follow from Spane! Your a good youtuber!
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.
Just Loved this it didn't even feel like 17 minutes ❤️
You nailed it man. It is a big project for me to get started in this javascript.
Thanks so much for your tutorials 💕😘
Awesome and sipmle project. Thank you...
Great video on the way that HTML, CSS and JS work so beautifully together.
"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
Fine & Useful Content. Thanks...
You are always exactly to the point.That is what i love about you.
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.
how you added the sound can you please share .Thanks
@@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();
very cool!! 🤠 i did it today and im proud of myself 💘💫
LOL loved the intro Kyle!
Satisfied! always share your videos with friends to help people live easier.
Thank you! Hopefully your friends enjoy the video.
very nicely describe.. love from India...
Nice project sir👍and the way you explain is very good.thanku
i learned a lot of thing from this lecture
I absolutely love the sketch at the beginning, perfect 👌😹😹😹
`div.number.number${$}*12` would do the job. Double multiplication of 12 is redundant.
You are amazing Bro. Your coding skill is highly impressive and easily understand.
Thanks!
you provide really great value
Absolutely brilliant tutorial for beginners in JS
Great video... Not at all complecated..
Can use
Transtion : 1s ; under hand class
For better animation
Is there any solid reason to use dataset ids for selecting hand elements? I preferred selecting by class names.
maan gya bhai , fan of you
thanks for the project. it really helped
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.
Awesome project, keep it up!!!
Thanks for another fun tutorial!
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?
I hope that a junior front end, dont have to really build things like this. I prefer smaller , less complex things. More like actual design. Navbars, sidebars, portfolio making etc. I wouldnt be able to create something like this by myself ever. I understand the logic and the code, but to build by urself from 0, thats another level.
edit: i take my words back. Today i can builkd clock by my own. :D Biggest challenge actually is css not the js
would you be able to explain the logic if possible
Completely amazing. Thank you for this tutorial
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
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...
There are any other version using different ways of calculations. You may find some that are more understandable for you and start from there.
You are great ! Thank you so much bro !
This is beautiful, well done! One observation I made is that the numbers 3-9 are not displayed in a way a user can easily recognize on the clock screen as it is on a real clock. Is there no way to display them properly on the clock screen? I'll love to learn more.
If you wanna have digits of hours in natural direction, change
in html code
for 1 from 1
to 1
for 2, ...11 just add
in css code
.clock .number span {
display: block;
transform: rotate(calc(var(--rotation) * -1));
}
😎
If its not working, at line 18 put rotationRatio * 360 under parantheses and add + "deg" to it
7:50 A better way to fix that would be to replace "left: 50%;" with "text-align: -webkit-center;"
You just rote learned the whole javascript part and typed really fast. Tyats not fair make us understand it properly.....
very nice explanation!! thank you!!
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!
To do this, I put the numbers in their own div and reversed the angle of rotation like so: 1
2 etc
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:
@@crispinthomas2992 It worked. Thanks so much for dropping this.
Thank you very much for the tutorial.
is there a way to avoid repeating. css for number 1 to 12. define variable or set style in JS?
Thank you for the tutorial. Very helpful
Lovethe intro😂❤
This is great tutorial, I really enjoyed it. But the lack of semicolons in JS file makes me very anxious :D.
I like to live on the edge :P
I was thinking the same. I am a semicolon nazi. haha
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}
How to make the tip of the hands pointy like an arrow?
@@marcusaureliusregulus2833
.hand .hour:before {
content:'';
background:inherit;
width:1.8em;
height:.8em;
border-radius:0 0 .8em .8em;
box-shadow:#232425 0 0 1px;
position:absolute;
top:-.7em; left:-.5em;
}
.hand .hour:after {
content:'';
width:0; height:0;
border:.9em solid #232425;
border-width:0 .9em 2.4em .9em;
border-left-color:transparent;
border-right-color:transparent;
position:absolute;
top:-3.1em; left:-.5em;
}
adjust as required
nailed it!
but you should fix the 6(six)!
Hi, Can you please explain how --rotation can be used for two different classes
I love the video, but how do you copy and paste so fast?
Great job, it's easy to follow along. nice flow..
Thank you!
Great Content
Definitely subscribing!!
So beautiful clock
good job and very well explained thank you
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
Excellent , I learned a lot
and what if i have to place the numbers in upward direction only, cause this looks a little weird and it's 6 is seemingly 9...
Chirag Soni you can play around with transform translate values for individual number
One easy way i found was to write 9 instead of 6 in html tag, that converts to six after css is applied
I wondered this too. My solution was to put each number in a nested h3 and then transform: rotate that nested h3 with the negative value of whatever I rotated the div containing the h3. This is like a spinning wheel. So I put miniature spinning wheels on top of the big spinning wheel.
1
2
3
4
5
6
7
8
9
10
11
12
.reverse {
--reverse: 0;
transform: rotate(var(--reverse));
}
.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}
hey, it's a great tutorial and the clock looks really good, but i guess there might be some errors with a js file, I double checked my code, and compared with yours, the hands of the clock are not moving.
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.
For some reason the last last function is throwing an error "cannot read properties of null (reading 'style') "and the hands stay pointed in the 12:00 position. I also copied the HTML, CSS, and JS directly from the CodePen and still receive the same issue so I don't believe I have a typo anywhere. Im using the most up to date version of google chrome; any insight onto what might be going on? Great tutorial, just not sure how I broke mine lol.
Hi, I'm having the same issue. I also did this tutorial just yesterday
share your code, may be i can help you how to fix it
only share js to see what is the problem?
remove the tag from head and place it just before tag, that resolved the problem for me
@@afsahahmed711 or you can just put defer attribute inside the script tag...like
This is great. Do you have the steps for how to get the browser to show through the server.js and index.js??
Number 6 in the clock looks like 9 after the rotation. To fix this just replace 6 in the HTML section with 9.
To do this, I put the numbers in their own div and reversed the angle of rotation like so: 1
2 etc
Well originally the numbers should be the right way up so do that
@@crispinthomas2992 will it not be like reversing the angel, will place numbers on the wrong side .like 1 will go the left of 12 than to right ?
@@crispinthomas2992 it did not work
@@crispinthomas2992 👍
you rock man... just subscribed your channel, waiting for more videos like this
Thanks!
Who is that magician? I wish we got that kinda teachers in our schools!
Thanks!
This is so cool. I've only ever seen this being done using HTML Canvas but this is way better 👍🔥
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".
the intro is best
Thanks alot this was really helpfull
Thanks for sharing your knowledge
lol, nice video with guitar :)
keep up with vanilla javascript videos please :))
Thanks. I have plenty more projects planned so I won't be stopping anytime soon.
Hey, love the vids! One question though, why do you add *, *::after, *::before at the start of every .css file?
To treat every element and its ::before, after:: content as “box-sizing: border-box...” and so on
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}