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

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

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

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

  • @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👏.

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

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

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

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

    Your the best at this sort of thing.

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

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

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

    How wonderful and genius you are

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

    This is very creative

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

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

    First

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

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

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

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

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

    Amazing Clock

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

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

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

    you are just top

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

    Incredible

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

    You have good talent, thanks.

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

    It`s so COOL! Very beautiful!!!

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

    Amazing

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

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

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

    Maybe you should use a monospaced font.

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

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

    Wow!!! So cool!!!!

  • @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)';

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

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

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

    Awesome!!

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

    Awesome👍

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

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

  • @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 🔥🔥🔥😍😍😍

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

    Super video OT Thanks

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

    Great

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

    very beautiful demonstration 😍

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

    Became ur fan❤️

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

    omad👏

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

    1st

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

    Nice wrk🤞

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

    Please do same for countdown timer without library

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

    Nice project!!

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

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

    Thank You 🙏🏻🙏🏻

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

    jitne likes mile otne kam hein
    nice😍🥰

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

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

    Thanks bro. That is amazing

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

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

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

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

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

    Thank You

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

    3rd

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

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

    Thanks...

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

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

    Nice work

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

    Nice brother 👌

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

    2nd

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

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

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

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

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

    are possible make this clock in program for smartphone?

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

    学到了

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

    😍😍😍😍😍

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

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

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

    can i put this in windows screensaver

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

    nice

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

    Is that second going rush? 😳

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

    Source code doesn't open plz help brother

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

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

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

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

    🙏🏻 where are you from

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

    can you make the world clock

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

    ❤️❤️

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

    Nice

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

    Просто ахуительно

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

    👍👍

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

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

  • @user-fd9kl9bk4k
    @user-fd9kl9bk4k 2 года назад +2

    Всё хорошо, только уж музыка - кошмар😖

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

    video starts at 1:31

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

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

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

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

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

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

    Sir you can use h%12

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

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

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

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

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

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

    Sir please make this video zoom

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

    hr_dot.style.transform = 'rotate(${h * 30}deg)'; this line is not working the postion of dot hasn't changed after this line and zero error in program . I am using the same vs code editor.

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

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

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

    can you give us the source code of above project

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

    How to make it responsive???

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

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

    завернул, так завернул!

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

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

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

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

    Plz music name

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

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

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

    bro your python software and its version

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

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

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

    Does anyone know what is his vscode theme?

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

    My live server is not working properly...what should I do? Its doesn't start automatically...port:5500 problem....anybody pls help me to find solution to fix this bug....By the way thanks for giving analog clock tutorial.....

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