Build A Clock With JavaScript

Поделиться
HTML-код
  • Опубликовано: 16 янв 2025

Комментарии • 551

  • @WebDevSimplified
    @WebDevSimplified  5 лет назад +118

    Free tickets to my first concert for anyone that can guess the song I butchered in the intro. 🎫

    • @BabyDespair
      @BabyDespair 5 лет назад +14

      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 лет назад +26

      @@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 лет назад +3

      ruclips.net/video/D2BPZR-UaYI/видео.html

    • @alecthomasquinn4438
      @alecthomasquinn4438 5 лет назад +5

      Darude - Sandstorm

    • @Hemu146
      @Hemu146 5 лет назад +3

      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 2 года назад +14

    man the placement of numbers around the clock is just magic

  • @LuckystrikeGFXer
    @LuckystrikeGFXer 5 лет назад +114

    Best acting and editing skills I have seen so far!

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +15

      Thank you! *takes dramatic bow*

    • @AbidAlWassie
      @AbidAlWassie 4 года назад +11

      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

  • @filon861
    @filon861 5 лет назад +81

    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 года назад +13

      Traversymedia?

    • @AbidAlWassie
      @AbidAlWassie 4 года назад +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 года назад +1

      @@AbidAlWassie wow thanks man.

    • @anupkhismatrao9280
      @anupkhismatrao9280 Год назад

  • @jacsonmiranda
    @jacsonmiranda 2 года назад +1

    you made so simple, no blablabla, just code and going to the point, great job

  • @matthewguillen2823
    @matthewguillen2823 3 года назад +2

    Brother you are the best teacher I’ve ever seen a coding. you teach better than my professors

  • @gxc2000
    @gxc2000 5 лет назад +30

    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  5 лет назад +12

      Thank you. I like using CSS when I can for designs since it is so fun to work with.

  • @zamankhan1255
    @zamankhan1255 5 лет назад +12

    Best programming channel I found so far for begginers,
    nice videos with best projects,
    keep it up!

  • @mareboinaravi5272
    @mareboinaravi5272 3 года назад +1

    I thought it was too difficult JavaScript but this man shows me Nothing is too Hard. Thanks, man...

  • @sergten
    @sergten 4 года назад +4

    Geez Christ, this channel is golden!

  • @mandihaase2744
    @mandihaase2744 4 года назад +15

    Awesome simple, straight-forward tutorial. Did this with my daughter and she loved it!

  • @mykhailomikhnovych8303
    @mykhailomikhnovych8303 4 года назад +2

    Your awkward acting at the beginning deserves the Oscar my man.
    Keep it going, you're doing a great job!

  • @alexgomez9033
    @alexgomez9033 5 лет назад +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 лет назад +3

      Thanks! I love Dev Ed as well. He has such a great personality.

  • @saaddogar8563
    @saaddogar8563 2 года назад +1

    i love how serious he is in his intro even when joking

  • @zawadahmed5484
    @zawadahmed5484 3 года назад +2

    honestly speaking, among all the javascript devs, Kyle is the most talented. That's my opinion

  • @TheWorldlife83
    @TheWorldlife83 3 года назад +13

    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 Год назад

      it doesnt seem to work though? we need to transform the innerText to number, because 30 * "1", it uses strings to multiply...

  • @uzair004
    @uzair004 4 года назад +1

    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

  • @darrenhoyne7459
    @darrenhoyne7459 3 года назад +5

    Great video bud, clear and to the point, very easy to follow along, good job and keep it up

  • @iliashterev38
    @iliashterev38 3 года назад +1

    Greeting from Bulgaria. Thank you again for the (one more) nice tutorial.

  • @Risehack
    @Risehack 4 года назад +1

    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.

  • @medilies
    @medilies 3 года назад +7

    "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

  • @Suneriins234
    @Suneriins234 4 года назад +8

    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!

  • @randyrandall6622
    @randyrandall6622 4 года назад +58

    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 года назад +1

      How to make the tip of the hands pointy like an arrow?

    • @salehabdullah1154
      @salehabdullah1154 3 года назад +5

      @@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 года назад +3

      @@marcusaureliusregulus2833 I remember the joke from the dictator movie after reading this. I want my Nuke heads pointy😂

    • @MrKnaldperlen
      @MrKnaldperlen 2 года назад +1

      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.

  • @Mr.slikko
    @Mr.slikko 5 лет назад +3

    I absolutely love the sketch at the beginning, perfect 👌😹😹😹

  • @usama57926
    @usama57926 5 лет назад +2

    this channel is amazing.......... sir you deserve a millions subs and likes

  • @computersciencewithpeter
    @computersciencewithpeter 2 года назад +1

    Thanks so much for your tutorials 💕😘

  • @webdevparadise4452
    @webdevparadise4452 4 года назад +2

    Nice intro with guitar WebBoi and thanks for this amazing tutorial. Finally I have my OWN watch. Time to learn JS!

  • @256paveliko
    @256paveliko 5 лет назад +2

    I'm a beginner programmer and your explanations are excellent

  • @oguzozdemir8886
    @oguzozdemir8886 2 года назад +1

    Awesome and sipmle project. Thank you...

  • @WiLDeveD
    @WiLDeveD 2 года назад +1

    Fine & Useful Content. Thanks...

  • @vvvaaal
    @vvvaaal 3 года назад +1

    And I thought i had great css knowledge until I started watching your videos. :D

  • @raphaelmachado7197
    @raphaelmachado7197 3 года назад +1

    Your code is so simple and easy for beginners to read

  • @lapto4676
    @lapto4676 2 года назад +7

    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 2 года назад

      Keep learning! That's the joy!

    • @pixelum2023
      @pixelum2023 2 года назад

      Interesting! I had not noticed that basically all clocks have their numbers upright. One more challenge.

    • @noidea5372
      @noidea5372 2 года назад +1

      how did you do that? can you share your code?

    • @Sara-rs4oq
      @Sara-rs4oq 2 года назад +1

      @@noidea5372
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12

    • @lapto4676
      @lapto4676 Год назад

      @WebTricks this is what i did

  • @ahmedbadra9237
    @ahmedbadra9237 4 года назад +1

    you provide really great value

  • @anujshany8659
    @anujshany8659 3 года назад +3

    Just Loved this it didn't even feel like 17 minutes ❤️

  • @andrei9115
    @andrei9115 2 года назад +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!

  • @levezinet
    @levezinet 2 года назад +4

    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!

  • @priyasharma-rd9kl
    @priyasharma-rd9kl 3 года назад +1

    Nice project sir👍and the way you explain is very good.thanku

  • @abhilekhgautam5963
    @abhilekhgautam5963 4 года назад +1

    You are always exactly to the point.That is what i love about you.

  • @khanabanana1217
    @khanabanana1217 4 года назад +1

    You nailed it man. It is a big project for me to get started in this javascript.

  • @beethoven5984
    @beethoven5984 3 года назад

    Follow from Spane! Your a good youtuber!

  • @iamreg1965
    @iamreg1965 4 года назад +2

    Great video on the way that HTML, CSS and JS work so beautifully together.

  • @usama57926
    @usama57926 5 лет назад +3

    i learned a lot of thing from this lecture

  • @marcdonvito6485
    @marcdonvito6485 5 лет назад +1

    Very good project to learn how HTML, CSS, and JavaScript work together.

  • @جواهرالشعرالعربي
    @جواهرالشعرالعربي 3 года назад +1

    You are great ! Thank you so much bro !

  • @Gormlessostrich
    @Gormlessostrich 3 года назад +1

    Thanks for another fun tutorial!

  • @elieli2570
    @elieli2570 3 года назад +1

    Awesome project, keep it up!!!

  • @savannahlin8063
    @savannahlin8063 5 лет назад +2

    Satisfied! always share your videos with friends to help people live easier.

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад

      Thank you! Hopefully your friends enjoy the video.

  • @ganjeblerencehanma6577
    @ganjeblerencehanma6577 2 года назад +1

    thanks for the project. it really helped

  • @aamirmasood010
    @aamirmasood010 Год назад

    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

  • @ahmmadawshaf
    @ahmmadawshaf 4 года назад +1

    Absolutely brilliant tutorial for beginners in JS

  • @jamezjaz
    @jamezjaz 4 года назад +2

    Completely amazing. Thank you for this tutorial

  • @nic00la1
    @nic00la1 2 года назад +1

    very cool!! 🤠 i did it today and im proud of myself 💘💫

  • @vijaykumarjee
    @vijaykumarjee 3 года назад

    very nicely describe.. love from India...

  • @kengthe5949
    @kengthe5949 4 года назад +1

    very nice explanation!! thank you!!

  • @webylancers5607
    @webylancers5607 2 года назад +1

    MashAllah Aameen 🙏🤲😍

  • @AbdulJalil-bu6ou
    @AbdulJalil-bu6ou 4 года назад +1

    Thank you very much for the tutorial.

  • @balalnaeem
    @balalnaeem 4 года назад +11

    `div.number.number${$}*12` would do the job. Double multiplication of 12 is redundant.

  • @raresmihalache3189
    @raresmihalache3189 5 лет назад +1

    Thank you for the tutorial. Very helpful

  • @christopherholt3782
    @christopherholt3782 2 года назад

    LOL loved the intro Kyle!

  • @handsomecat7225
    @handsomecat7225 3 года назад +1

    Excellent!

  • @trelala789
    @trelala789 4 года назад +25

    This is great tutorial, I really enjoyed it. But the lack of semicolons in JS file makes me very anxious :D.

    • @WebDevSimplified
      @WebDevSimplified  4 года назад +13

      I like to live on the edge :P

    • @balalnaeem
      @balalnaeem 4 года назад

      I was thinking the same. I am a semicolon nazi. haha

    • @AbidAlWassie
      @AbidAlWassie 4 года назад +7

      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}

    • @marcusaureliusregulus2833
      @marcusaureliusregulus2833 3 года назад

      How to make the tip of the hands pointy like an arrow?

    • @versatilejodi
      @versatilejodi 2 года назад +1

      @@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

  • @matejmin
    @matejmin 5 лет назад +2

    Great job, it's easy to follow along. nice flow..

  • @zuber3228
    @zuber3228 3 года назад

    maan gya bhai , fan of you

  • @iceberg-actual8378
    @iceberg-actual8378 2 года назад +2

    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.

    • @cocoquake
      @cocoquake 2 года назад

      Hi, I'm having the same issue. I also did this tutorial just yesterday

    • @nikolaus_dev
      @nikolaus_dev 2 года назад

      share your code, may be i can help you how to fix it

    • @nikolaus_dev
      @nikolaus_dev 2 года назад

      only share js to see what is the problem?

    • @afsahahmed711
      @afsahahmed711 2 года назад +2

      remove the tag from head and place it just before tag, that resolved the problem for me

    • @andrei9115
      @andrei9115 2 года назад

      @@afsahahmed711 or you can just put defer attribute inside the script tag...like

  • @muizolaore4630
    @muizolaore4630 3 года назад

    Great Content
    Definitely subscribing!!

  • @kamal-purohit
    @kamal-purohit 4 года назад +2

    Great video... Not at all complecated..
    Can use
    Transtion : 1s ; under hand class
    For better animation

  • @balporsugu7198
    @balporsugu7198 4 года назад +3

    Is there any solid reason to use dataset ids for selecting hand elements? I preferred selecting by class names.

  • @ayecity5505
    @ayecity5505 3 года назад +2

    I love the video, but how do you copy and paste so fast?

  • @pepefubias7654
    @pepefubias7654 4 года назад +1

    good job and very well explained thank you

  • @ikramikky2838
    @ikramikky2838 5 лет назад +4

    this is amazing 🔥

  • @k.m.abusyeduzzal6272
    @k.m.abusyeduzzal6272 Год назад

    Excellent , I learned a lot

  • @Andy_jagroom
    @Andy_jagroom Год назад

    Lovethe intro😂❤

  • @shykhabdull52
    @shykhabdull52 2 года назад +1

    You just rote learned the whole javascript part and typed really fast. Tyats not fair make us understand it properly.....

  • @alecdannmayr328
    @alecdannmayr328 4 года назад +8

    Hey, love the vids! One question though, why do you add *, *::after, *::before at the start of every .css file?

    • @katari15
      @katari15 4 года назад +2

      To treat every element and its ::before, after:: content as “box-sizing: border-box...” and so on

    • @AbidAlWassie
      @AbidAlWassie 4 года назад +5

      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}

  • @code_south
    @code_south 3 года назад +2

    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();

  • @arjunghimire6709
    @arjunghimire6709 5 лет назад +1

    You are amazing Bro. Your coding skill is highly impressive and easily understand.

  • @chirag_soni_07
    @chirag_soni_07 4 года назад +9

    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...

    • @Sohrabziagoogle
      @Sohrabziagoogle 4 года назад

      Chirag Soni you can play around with transform translate values for individual number

    • @JyotiKumari-jd9mf
      @JyotiKumari-jd9mf 4 года назад

      One easy way i found was to write 9 instead of 6 in html tag, that converts to six after css is applied

    • @Bassackwards051
      @Bassackwards051 4 года назад +1

      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.

    • @priyanshubhardwaj2158
      @priyanshubhardwaj2158 4 года назад +1

      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}

  • @emmapaul
    @emmapaul 2 года назад +2

    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.

    • @ContactBox
      @ContactBox 2 года назад +2

      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));
      }
      😎

  • @webart5544
    @webart5544 3 года назад

    So beautiful clock

  • @deepakbhargav7434
    @deepakbhargav7434 4 года назад

    Thanks for sharing your knowledge

  • @sanjanaporwal6605
    @sanjanaporwal6605 2 года назад +1

    Hi, Can you please explain how --rotation can be used for two different classes

  • @pacho7341
    @pacho7341 3 года назад

    thanks about the tutorial!!

  • @Blockly806
    @Blockly806 3 года назад +1

    7:50 A better way to fix that would be to replace "left: 50%;" with "text-align: -webkit-center;"

  • @favourojo3971
    @favourojo3971 2 года назад

    Thanks alot this was really helpfull

  • @mizuesato4775
    @mizuesato4775 5 лет назад +2

    It’s awesome 👏 I like it‼️ I want to watch your video that is tutorial with html css and JavaScript more and more 😁

  • @manishsharma-gf6fw
    @manishsharma-gf6fw 5 лет назад

    you rock man... just subscribed your channel, waiting for more videos like this

  • @anupkhismatrao9280
    @anupkhismatrao9280 Год назад

    Amazing 🤩

  • @behar97
    @behar97 5 лет назад +2

    lol, nice video with guitar :)
    keep up with vanilla javascript videos please :))

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +1

      Thanks. I have plenty more projects planned so I won't be stopping anytime soon.

  • @progtech7180
    @progtech7180 3 года назад +11

    Number 6 in the clock looks like 9 after the rotation. To fix this just replace 6 in the HTML section with 9.

    • @crispinthomas2992
      @crispinthomas2992 3 года назад +8

      To do this, I put the numbers in their own div and reversed the angle of rotation like so: 1
      2 etc

    • @mikaelfarro
      @mikaelfarro 2 года назад

      Well originally the numbers should be the right way up so do that

    • @jaishrikrishna5755
      @jaishrikrishna5755 2 года назад

      @@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 ?

    • @ifeomablessing9578
      @ifeomablessing9578 2 года назад

      @@crispinthomas2992 it did not work

    • @anupkhismatrao9280
      @anupkhismatrao9280 Год назад

      ​@@crispinthomas2992 👍

  • @xxninja500xx7
    @xxninja500xx7 4 года назад

    the intro is best

  • @zdargahi
    @zdargahi 2 года назад +2

    is there a way to avoid repeating. css for number 1 to 12. define variable or set style in JS?

  • @toyosisalami6453
    @toyosisalami6453 2 года назад +3

    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 года назад +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 2 года назад

      There are any other version using different ways of calculations. You may find some that are more understandable for you and start from there.

  • @deminouk8347
    @deminouk8347 5 лет назад

    Awesome! Seems like dificult stuff is explained very simple!! YouGo!! 🌸🌸🌸 /eva from Sweden

  • @TheUtuber999
    @TheUtuber999 5 лет назад +2

    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 3 года назад +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 Год назад +1

      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.

  • @afzalmahmud1974
    @afzalmahmud1974 3 года назад

    Thank you. Love your voice 😍 sir.

  • @ukmfpaha
    @ukmfpaha 3 года назад +1

    This is so cool. I've only ever seen this being done using HTML Canvas but this is way better 👍🔥

  • @saltech2024
    @saltech2024 3 года назад +1

    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".

  • @ranvirchoudhary929
    @ranvirchoudhary929 4 года назад +3

    I have an error
    Uncaught type error
    Cannot read property style of null
    Pls help

  • @kevinwg02
    @kevinwg02 Год назад

    freaking brilliant!