How To Create Digital Clock Using HTML CSS & JavaScript | Display Time Using JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 พ.ย. 2024

ความคิดเห็น • 168

  • @mihirtechneer4377
    @mihirtechneer4377 2 หลายเดือนก่อน +5

    Thank you very much !
    I am 54, not from IT but Mechanical Engineer with 30 years experience in Maintenance and Engineering. This is my 8th clock project ! Learned many different ways of making fascinating clocks. ❤❤❤

    • @GreatStackDev
      @GreatStackDev  2 หลายเดือนก่อน

      Glad to hear that. You're welcome. 😊

  • @zabihibrahimkhil
    @zabihibrahimkhil ปีที่แล้ว +10

    I followed many online classes for mini projects, but this one by far is one of the best , thank you for sharing knowledge

  • @boydmutokoma2370
    @boydmutokoma2370 ปีที่แล้ว +17

    Best teacher ever, I wish my grade school teacher where like u I would have been an engineer.

  • @RajKumar_akhariya
    @RajKumar_akhariya ปีที่แล้ว +2

    Best teacher on TH-cam to make beautiful project.

  • @leonardigweokolo2813
    @leonardigweokolo2813 10 หลายเดือนก่อน +8

    You're doing this tutorial as if to prove a point that you can do them. Instead of teaching the steps and why you do certain things, like what does "position - absolute mean" when should it be used and why, that will really help beginners immensely. Altogether thank you for sharing.

    • @Pythongirl_
      @Pythongirl_ 9 หลายเดือนก่อน +5

      bro if you don't know the meaning of position absolute yet, then why you even bother to make this project, learn CSS first

    • @leonardigweokolo2813
      @leonardigweokolo2813 9 หลายเดือนก่อน

      @@Pythongirl_ Are you sure understood the comment? You twerp!!! Understand the comment first, then maybe I'd give you some attention.

    • @emmanuelsiziba520
      @emmanuelsiziba520 9 หลายเดือนก่อน

      I agree with you, you can not learn from these tutotirial without basic fundementals, i do tutorials on freecode camp where they strip everything down to its basic component, and then use these tutorials to apply the knowlegdge from freecode camp and practise coding on VS code @@Pythongirl_

    • @AyomikunOjetunde
      @AyomikunOjetunde 3 หลายเดือนก่อน

      @@Pythongirl_ Actually😅

    • @dangerous199
      @dangerous199 หลายเดือนก่อน

      He's showing us how to do projects, not teaching the basics. You have to learn that on your own.

  • @nanafreedom2476
    @nanafreedom2476 ปีที่แล้ว +4

    This tutorial is one the greatest tutorial I've ever come across!! Thank you very much

  • @jcchaconjr
    @jcchaconjr 8 หลายเดือนก่อน +1

    Thank you for this simple and easy to understand project. I've been learning and playing around with Blazor using .NET 8, and thought this would be a fun page to refactor into a Blazor component page using C# code instead of JavaScript. Implementing the timer in a manner that would not hang the page rendering was the most challenging part, but thanks to a little help from StackOverflow, I found a good suggestion to implement the necessary override for the page's OnInitializedAsync() method that I was able to refactor to update the clock every second like the JS code.

  • @rajamannar4861
    @rajamannar4861 ปีที่แล้ว +5

    Finally I find best you tube channel to learn css 😊

  • @mhendrasingh7503
    @mhendrasingh7503 ปีที่แล้ว +66

    Thankyou sir, i am 11 years old and this was my first successful html project❤ jai shree ram.

    • @Amanकुमार-y4m
      @Amanकुमार-y4m ปีที่แล้ว +1

      I am also bro

    • @bidyutghosh1983
      @bidyutghosh1983 11 หลายเดือนก่อน +1

      Joy Shree Ram ❤️🙏🏽

    • @mianabubakar5987
      @mianabubakar5987 11 หลายเดือนก่อน +1

      Allah Huakbar

    • @allahlesboslu2_9
      @allahlesboslu2_9 10 หลายเดือนก่อน

      ​@lyrics._143😂😂😂 Abey n # llahu f . K Barr usko Jo bolna h bolne de tu kyu Teri a u k @ t dikhaa rha hai

    • @allahlesboslu2_9
      @allahlesboslu2_9 10 หลายเดือนก่อน

      ​@@mianabubakar5987debate with ex m sahil and Zafar heretic saara olaa uber utarr jaayega tum log ka

  • @bumblebee_1
    @bumblebee_1 8 หลายเดือนก่อน +3

    thnx! Simple and clear to understand

  • @preciousonyiocha92
    @preciousonyiocha92 ปีที่แล้ว +1

    Thank you sir, this tutorial is much more easier than the one I have watched

  • @sunilkumar_vlogs
    @sunilkumar_vlogs ปีที่แล้ว +1

    Sir ji your English talk is so simple and sweet ❤❤❤

  • @PirahYameen
    @PirahYameen ปีที่แล้ว

    Finaly i got the best channel for Learning coading ❤

  • @christophermawela3318
    @christophermawela3318 หลายเดือนก่อน

    Thanks Avinash, well explained, struggled with CSS pseudo elements, will hopefully learn from HTML CSS series.

  • @citizen00001
    @citizen00001 11 หลายเดือนก่อน +1

    this was a great tutorial to follow, thank you!

  • @thedinkydreads9351
    @thedinkydreads9351 7 หลายเดือนก่อน +1

    You, Sir, are my hero

  • @UtiFavour
    @UtiFavour ปีที่แล้ว +7

    Awesome video! Biggest fan.... Your tutorial is detailed and insightful.

  • @Arvindvishwakarma-ff7fu
    @Arvindvishwakarma-ff7fu 7 หลายเดือนก่อน +1

    Smooth Explanation Man! thnx

  • @lordljb4772
    @lordljb4772 ปีที่แล้ว +1

    Amazing Tutorial!
    Thanks for this great looking clock!
    Im so glad u made a vid :D
    Greetings from Germany

  • @sharooq5842
    @sharooq5842 ปีที่แล้ว +2

    Thank u your videos are great and ur explanation is also great but it would be great if u explain like these lines of code does these (single individuals) thise will help a lot for beginners like me

  • @aamirmasood010
    @aamirmasood010 ปีที่แล้ว +2

    you made it look so easy man loved it

  • @learnwithnagma
    @learnwithnagma 8 หลายเดือนก่อน +2

    Thank you so much 😊.

  • @English_604
    @English_604 ปีที่แล้ว

    I love your Chnnel...your videos help me a lot..
    ❤.

  • @KuirThuch
    @KuirThuch 9 หลายเดือนก่อน

    You were born to teach

  • @saisuba2698
    @saisuba2698 4 หลายเดือนก่อน

    Awasome 🎉, crystal clear explanation 🎉🎉..... go-ahead sir, i have one doubt, i need media query i want to use this digital clock in my ph?...i tried it not came

  • @ukaegbugreatjnr
    @ukaegbugreatjnr 3 หลายเดือนก่อน

    I love the video but Instead of using the teneray operator, why not use the padStart(2,0) method;

  • @kirthikar148
    @kirthikar148 4 หลายเดือนก่อน

    Simple and clear! 👍🏽

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Glad you think so!

  • @superrobot2960
    @superrobot2960 ปีที่แล้ว +1

    Can you make a video of javascript full course 😢
    🙏 Please

  • @bedtimehorrorstoryyoutube
    @bedtimehorrorstoryyoutube ปีที่แล้ว +1

    This tutorial is awesome easy and very clear!! Thank you!!

  • @fuchecomcilyuh1443
    @fuchecomcilyuh1443 ปีที่แล้ว

    God bless you for this video.

  • @YoCode08
    @YoCode08 6 หลายเดือนก่อน +2

    Work❤, thanks you sir❤❤

    • @GreatStackDev
      @GreatStackDev  6 หลายเดือนก่อน +1

      You're welcome. Thank You. 😊

  • @StriveVoyage
    @StriveVoyage 11 หลายเดือนก่อน +1

    great thank you

  • @kazikazz1085
    @kazikazz1085 ปีที่แล้ว +1

    love your tutorials

  • @CA-bg3im
    @CA-bg3im หลายเดือนก่อน +1

    Thankyou so much brother.

    • @GreatStackDev
      @GreatStackDev  หลายเดือนก่อน

      Always welcome. 😊 Keep coding.

  • @xasanubaydullayv
    @xasanubaydullayv 5 หลายเดือนก่อน +1

    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    let radius = canvas.height / 2;
    ctx.translate(radius, radius);
    radius = radius * 0.90
    //drawClock();
    s

  • @vijayachandana8485
    @vijayachandana8485 ปีที่แล้ว

    Your tutorial were helpfull👍keep going.

  • @Anusha_Patel24
    @Anusha_Patel24 11 หลายเดือนก่อน

    Thank you sooo much 😊
    And it will be very useful...

  • @atharvashringarpure4823
    @atharvashringarpure4823 2 หลายเดือนก่อน

    Thanks. Works well🙂

  • @siamnahidul4771
    @siamnahidul4771 ปีที่แล้ว

    Best Teacher

  • @RishabhShriwas-md2gq
    @RishabhShriwas-md2gq ปีที่แล้ว +1

    Thank you for this tutorial sir 😊

  • @sitirobiahhamdan1406
    @sitirobiahhamdan1406 ปีที่แล้ว

    hey , its so awesome , i have try it and its so amazing , thank you

  • @pratikshyajena74
    @pratikshyajena74 ปีที่แล้ว

    Thank you so much sir❤ you are great!

  • @Rafiramdhani12
    @Rafiramdhani12 ปีที่แล้ว

    Thanks you for the tutorial sir

  • @AdiJadhav-ie7zp
    @AdiJadhav-ie7zp 5 หลายเดือนก่อน +1

    great work sir

  • @sonya7009
    @sonya7009 ปีที่แล้ว

    another great tutorial mate, thank you

  • @nayaye1795
    @nayaye1795 ปีที่แล้ว

    Thanks bro! I love it!

  • @gaming4_16
    @gaming4_16 11 หลายเดือนก่อน

    great bhai

  • @Shahzadcreations-xr8yl
    @Shahzadcreations-xr8yl หลายเดือนก่อน

    Thanks a lot sir gg...

  • @SmileFNPlug
    @SmileFNPlug ปีที่แล้ว

    Great video sir 🙏👌👍

  • @anteoleonardi9413
    @anteoleonardi9413 ปีที่แล้ว +2

    @GreatStack why don't you use classes's and you call them on JS with querySelector but instead you use 3 ID's and you call them by ID on JS ? Btw love your channel 😃

    • @GreatStackDev
      @GreatStackDev  ปีที่แล้ว +1

      I will consider it for new video, thank you so much for comment

  • @MindMatrixx1416
    @MindMatrixx1416 6 หลายเดือนก่อน

    Legends one day before competition 😎😎

  • @shifteditz06
    @shifteditz06 3 หลายเดือนก่อน +1

    7:24 my z-index is not working, can anyone help me. I've written same code as him but still it is not working

  • @mustafa._.9371
    @mustafa._.9371 9 หลายเดือนก่อน

    Thank You!

  • @nguyenangviet1752
    @nguyenangviet1752 ปีที่แล้ว

    Amazing Good Job

  • @joeythai1000
    @joeythai1000 ปีที่แล้ว +1

    How do you can to do an transparence effect without opacity ?

  • @dancepractice805
    @dancepractice805 ปีที่แล้ว

    Why do you not make programs in sublime text ?

  • @_IamHarsh
    @_IamHarsh ปีที่แล้ว

    sir ek button lagana ho or button ke press ke baad ye mujhe current real time dikhaye, iske liye kya karna hoga ?

  • @muhammadharis5389
    @muhammadharis5389 ปีที่แล้ว

    Thank u sir you are awesome

  • @dancepractice805
    @dancepractice805 ปีที่แล้ว

    Good video and helpful video

  • @chandanagoshika2454
    @chandanagoshika2454 2 หลายเดือนก่อน

    Super explain sir

  • @deepikakumaricse7416
    @deepikakumaricse7416 11 หลายเดือนก่อน

    Overall it's nice but it would be more better when it is responsive

  • @shoaibahsan1822
    @shoaibahsan1822 9 หลายเดือนก่อน

    GREAT BRO

  • @Toonzkidsforkids
    @Toonzkidsforkids 4 หลายเดือนก่อน

    Sir ,why have you used 1000 in the set interval ??
    Can we use any other numbers instead of 1000?

    • @JamilKhan-z3r4w
      @JamilKhan-z3r4w หลายเดือนก่อน

      1second is equal to 1000mili second and use for to refresh page every second for example if they use 5000 the page will be refresh every five second later

  • @harshkumarsharma350
    @harshkumarsharma350 ปีที่แล้ว

    Great man

  • @welkin_shayar
    @welkin_shayar ปีที่แล้ว

    Amazing video sir❤❤

  • @herosipet
    @herosipet 9 หลายเดือนก่อน

    Hi,
    This is my first test program. I believed I did everything the way yo did the program but mine will not run the clock. Stays at 00:00:00 only. If you could help I would really appreciate it. Thank you and please reply.

  • @DINNAlk
    @DINNAlk ปีที่แล้ว

    😊
    Thank you sir

  • @Bnymn
    @Bnymn 3 หลายเดือนก่อน

    Why do you use hero div istead of the body

  • @lavkumargahe8174
    @lavkumargahe8174 ปีที่แล้ว

    Best explanation

  • @BaeristaVR
    @BaeristaVR 8 หลายเดือนก่อน +2

    You only made a 1container in html but in css you make 3containers (after and before) and when you run, the square and circle doesn't show 😂😂

  • @saching2080
    @saching2080 2 หลายเดือนก่อน

    Thank you

  • @citymuqdisho2899
    @citymuqdisho2899 ปีที่แล้ว +1

    Pro l need Car game good Design❤

  • @Tani55
    @Tani55 5 หลายเดือนก่อน

    Thanks bro

  • @sivaganesh96
    @sivaganesh96 ปีที่แล้ว

    please make a tutorial on live score web app for cricket

  • @Gaming4Ever-pt9li
    @Gaming4Ever-pt9li 9 หลายเดือนก่อน

    the css is working and the numbers are showing but it wont update and its giving telling me that getelementbyid is not defined and the time is not working

  • @savita_369
    @savita_369 ปีที่แล้ว

    Thanku sir❤

  • @MyGamingEra
    @MyGamingEra ปีที่แล้ว

    One video on merge calendar and time also😅

  • @yrew2004
    @yrew2004 ปีที่แล้ว

    Thanks sir

  • @petermwansa4890
    @petermwansa4890 9 หลายเดือนก่อน

    Thank you

  • @Murksoomro-lw8uq
    @Murksoomro-lw8uq หลายเดือนก่อน

    it works 👏

  • @SarveshKumar-bl9in
    @SarveshKumar-bl9in ปีที่แล้ว

    can you tell me that how to make responsive this website ?

  • @ubongudo9751
    @ubongudo9751 2 หลายเดือนก่อน +1

    Script not working

  • @Themescore
    @Themescore ปีที่แล้ว +2

    Sir ❤can you make a website according to me I'll pay to you for that.😊
    In which platform I'll message you reply me

  • @francisplacid2368
    @francisplacid2368 2 หลายเดือนก่อน

    Thanks

  • @nethiv_surya_prakash8699
    @nethiv_surya_prakash8699 ปีที่แล้ว

    can I post these type projects in resume in project section?

    • @Rits2203
      @Rits2203 11 หลายเดือนก่อน

      it's a mini project. You can add this with one of your big projects on your resume.

  • @mianabubakar5987
    @mianabubakar5987 11 หลายเดือนก่อน

    We love only Hazrat Muhammad SAW ❤

  • @isidoramoonrose5657
    @isidoramoonrose5657 ปีที่แล้ว

    why the rect and the circle are not appearing? i did the same thing...hmm

  • @ironman-29
    @ironman-29 ปีที่แล้ว

    make video on Tic tac toe game using javascript

  • @thereisnoname2052
    @thereisnoname2052 ปีที่แล้ว

    Can you do Countdown 😊😊

  • @vishalmeharban1782
    @vishalmeharban1782 10 หลายเดือนก่อน

    backdrop filter effect is not working on my vscode

  • @NithyaGS-b7z
    @NithyaGS-b7z ปีที่แล้ว

    🔥🔥

  • @adilimran6923
    @adilimran6923 2 หลายเดือนก่อน

    CAN YOU TELL ABOUT 12 HOURS FORMAT

  • @epps2021
    @epps2021 ปีที่แล้ว

    followed the entire video and did what you did but now how to you change it from military time to regular time? Instead of being 15:00:00 to 3:30:46 or am to pm

    • @hariharang1191
      @hariharang1191 ปีที่แล้ว

      Use if condition.
      If (hour

    • @hariharang1191
      @hariharang1191 ปีที่แล้ว

      Use if for same AM PM or many other options to show AM PM

  • @monalisaswain2524
    @monalisaswain2524 ปีที่แล้ว

    How can am and pm will show?

  • @ZaahidEditzzz
    @ZaahidEditzzz ปีที่แล้ว

    How can I make the code show the 12 hour clock

  • @RahulSharma-jv7rj
    @RahulSharma-jv7rj ปีที่แล้ว

    hi bro, please help me I am not able to select any class in my CSS file, while adding .hero its being red and throwing an error. please help me. thank you

  • @bibifathima-fq7gk
    @bibifathima-fq7gk ปีที่แล้ว

    innerhtml is not working for min and sec..pls explain what is the reson.where hours work

    • @bibifathima-fq7gk
      @bibifathima-fq7gk ปีที่แล้ว

      in console it show "cannot set property for null steeting(innerHTML)" will you pls explain why ..its shows for min.innerHTML.currentTime.getMInutes();

    • @bibifathima-fq7gk
      @bibifathima-fq7gk ปีที่แล้ว

      i got the solution in the place of min i used mint then its works...😀😀,can you explain y its happen like that

  • @nusratfatemafamail9037
    @nusratfatemafamail9037 8 หลายเดือนก่อน

    wow

  • @sagetitan4794
    @sagetitan4794 ปีที่แล้ว

    How do you deploy the app

  • @fulvusfeles
    @fulvusfeles ปีที่แล้ว

    Hello, someone can help me. how can I made a clock of another country in a web page?