Amazing Working Digital Clock using Html CSS SVG & Javascript | Simple Javascript Project

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

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

  • @camilo.s2237
    @camilo.s2237 2 года назад +3

    literalmente... únicamente he visto dos videos de él, y ya me enamoré de su trabajo! grandes ideas, excelente código, grandiosos resultados, es realmente inspirador encontrar personas que quieren compartir resultados como estos, es realmente grandioso!

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

    Your the best at this sort of thing.

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

    Not a bad tut, I like the use of inline and css stylesheet together. Seems to a good short video for a beginner to get their feet wet.

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

    How wonderful and genius you are

  • @rodweleo
    @rodweleo 2 года назад +9

    Thank you for the video. It has been educationally helpful and has expanded my imagination and creativity. Keep up the good work👏.

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

    Ramadan Mubarak 👍👍👍👍

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

    very cool work! For leading zero, you don't need it for the hour in a 12-hour clock but in a 24-hour clock.

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

    This is very creative

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

    Amazing Clock

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

    You're truly creative. Thanks for all you taught us

  • @danilo_teixeira
    @danilo_teixeira 2 года назад +9

    Very good work dude!! To add zero, you also can convert to string e use the method padStart().

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

    Became ur fan❤️

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

    It`s so COOL! Very beautiful!!!

  • @Manisha-no9nj
    @Manisha-no9nj 2 года назад +2

    Wow!!! So cool!!!!

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

    You have good talent, thanks.

  • @codeKeshav
    @codeKeshav 2 года назад +5

    Nice work sir. I thought you might be doing that moving part using external svg link. Nice clock. Thanks for tutorial.

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

    Incredible

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

    thank you, it keeps inspired and continue to work hard to get to that level! (i'm a noob in this field)

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

    Awesome!!

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

    Super video OT Thanks

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

    Awesome👍

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

    very beautiful demonstration 😍

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

    Nice project!!

  • @a-Webscrapper
    @a-Webscrapper 2 года назад +1

    Nice wrk🤞

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

    you are just top

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

    Wow. Very beautiful.
    Make one with countdown and page redirect.

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

    Amazing

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

    Make a flip clock plzzzzzz❤️❤️❤️
    You are amazing

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

    Cada día traen un nuevo proyecto que nos sorprende más y más , Gran trabajo

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

    Thank You 🙏🏻🙏🏻

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

    When you coding 8h but your last showing time 2h 🥰😂 good work 👌💞

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

    Wow really amazing code thanks for this osm code 🔥🔥🔥😍😍😍

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

    Thanks bro. That is amazing

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

    First

  • @Mugenz0
    @Mugenz0 2 года назад +6

    nicely done, but have few questions:
    so many "let", just separate your vars with comma.
    why create so many "new date"? just create single object and get h m s from it.
    for leading zero there is more elegant way with help of "padStart"

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

      Yeah but never use var, always let or const.

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

    Nice brother 👌

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

    Thank you for this video, it added a lot for my info

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

    Great

  • @karthikrajamony6044
    @karthikrajamony6044 2 года назад +13

    Good work, may I know which color theme you have used for VS Code in this video.

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

    1st

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

    jitne likes mile otne kam hein
    nice😍🥰

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

    video starts at 1:31

  • @ClearSkyProductions777
    @ClearSkyProductions777 2 года назад +5

    At the end of the video, it appears the tail of the color circles are rounded but I didn’t see how we did this in the tutorial? With what we did they appear as straight edges instead of rounded. How do we do this?
    Very easy tutorial to follow. Thank you!

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

      stroke-linecap: round;

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

      add in your css at .dots::before { border-radius: 50%}

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

      The border-radius, you can lower it like 55 or 50px. Or % as the other guys said, eitber one works

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

    Thank You

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

    Nice work

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

    Thanks...

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

    Maybe you should use a monospaced font.

  • @mohamedsayedabdelkhaleq7443
    @mohamedsayedabdelkhaleq7443 2 года назад +5

    I have a problem my ( hr_dot, min_dot, sec_dot ) it not moving, what should i do

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

      Example: sec_dot.style.transform = 'rotate(' + s * 6 + 'deg)';

  • @NK-hn5nz
    @NK-hn5nz 2 года назад +4

    Hey bro can you make a video on cost calculator using javascript?

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

    Bro Your work is really appreciated.
    But why don't you explain with your voice . because it will help us to reach easier.

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

    sir mai aapko 2 year se fallow kar raha hu agar aap india me rahte hai to pls hindi me explain bhi kar diya kariye pls begginer level help !

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

    are possible make this clock in program for smartphone?

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

    Sir, Can you make a video on zoom in and zoom out CSS effect? please

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

      Its called hover.

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

      @@animeshbhapkar2712 Hover is a bad idea considering it only works if you have a mouse. And most traffic is not from desktops so it just won't work on phones/tablets which are like 70% of the traffic

  • @ZahidullahMohammadi-p7g
    @ZahidullahMohammadi-p7g Месяц назад

    Nice work but one problem is that, when its straight 12 O'clock it just shows double zero like (00).

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

    can i put this in windows screensaver

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

    Please do same for countdown timer without library

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

    Is that second going rush? 😳

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

    Is it really impossible to write a class from memory?
    a two-letter class is very, very difficult to write ...

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

    Sir can u plz tell me why you use two circle in svg tag

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

    nice

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

    I try to change size to smaller but how we make a dot that match to rotate a degree

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

    Following the code, I seem to get errors in vsCode when using the syntax rotate(${m*30}deg) any idea why I’m getting errors

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

    😍😍😍😍😍

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

    🙏🏻 where are you from

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

    Hello!
    How to calculate deg with 24 hour format? I'm not good at math. :D
    Very good video anyway.

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

    Source code doesn't open plz help brother

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

    omad👏

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

    Hola quiero comprar el paquete que incluya los cursos de Udemy, cual es ese paquete?

  • @kumaryvl905
    @kumaryvl905 7 месяцев назад

    can you make the world clock

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

    I have a problem my dot it not move , what should i do

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

    @Online Tutorials In 12 hour Clock, when it reached to 12 pm or 12 am, it always turns to 00 hours, how to change it to 12 hours 00 min

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

    Is it possible to make that clock my wallpaper? If so then please tell me how

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

    @Online Tutorials
    I have been trying a lot but i have unable to move dots. As you written
    //360/12=30
    hr_dot.style.Transform = 'rotate(${h * 30}deg)';
    //360/60=6
    min_dot.style.transform = 'rotate(${m * 6}deg)';
    //360/60=6
    sec_dot.style.transform = 'rotate(${s * 6}deg)';
    not working. What should i do? need your help.

    • @duggirambabu7792
      @duggirambabu7792 Год назад +1

      The symbols ' and ` are different.
      So change the folloing symbol
      ' to `

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

      @@duggirambabu7792 thanks buddy, will try.

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

    Sir you can use h%12

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

    how does the page automatically update when you edit something without refreshing page?

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

    I tried to implement this code. In index.html file line 82. hr_dot.style.transform = "rotate(${h*30}deg)"; 84. min_dot.style.transform = "roate(${m*6}deg)"; 86. sec_dot.style.transform = "roate(${s*6}deg)"; is not working. How can i fix it?

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

    How could I make this project responsive? I'll appreciate your support!

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

    2nd

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

    sir count down is not working may i know why ??? i do the all same as you teach but it always no make sense

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

    ❤️❤️

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

    How to make it responsive???

  • @DIAMOND-vs5ql
    @DIAMOND-vs5ql 2 года назад +1

    Nice

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

    Does anyone know what is his vscode theme?

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

    I have face some problem pls help when command html ( hours.innerHTMl= h;) but browser not show hours. Show just zero .

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

      I have the same problem

    • @KarelŠvancar
      @KarelŠvancar Год назад

      It took me an hour to figure out what was wrong with me, it was that in the HTML I had a circle marked as an ID that is there 3 times and this crap threw it away.

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

    👍👍

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

    Why my clock doesnt work? I checked everything is exactly as in tutorial. Design is all good.

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

    I am facing a problem that the starting point of every circle is 3 . How to solve it.

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

    Sir Script file is not working to show current time, what is alter native solution please send me.

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

      Check once again the following symbols:
      The symbols ' and ` are different.
      Write ` this symbol at rotate function.

  • @kumaryvl905
    @kumaryvl905 7 месяцев назад

    can you give us the source code of above project

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

    Plz music name

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

    bro your python software and its version

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

    How to do this on Android?

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

    Can u give me this video code

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

    I did it in the same video but the shapes were not complete

  • @AlejandroRamirez-fr3jc
    @AlejandroRamirez-fr3jc Год назад

    Me gustaría ver el código o el tutorial de como lo hizo por favor para aprender gracias

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

    Does somebody have an idea, why the SVG syntax isn't working for me in VS Code/Chrome?

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

      Why my clock doesnt work? I checked everything is exactly as in tutorial. Design is all good.

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

    3rd

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

    Sir please make this video zoom

  • @preetifartyal
    @preetifartyal 9 месяцев назад

    My time is not changed it's just 00 from starting please help

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

    hr_dot.style.transform = 'rotate(${h*30}deg)'; is not working but if a put a numeric value like 30 it is working . the problem is if i use a variable it isnt responding and the dot is in its inittial place. please help anyone

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

      ````````````` is this symbol。'' this is wrong