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

Поделиться
HTML-код
  • Опубликовано: 1 июн 2023
  • Learn How To Create Digital Clock Using HTML CSS and JavaScript | Make Digital Clock with JavaScript step by step tutorial for beginners
    ❤️ SUBSCRIBE: goo.gl/tTFmPb
    In this JavaScript Mini project we will make a Digital clock that will display the current time in Hours, Minutes and second. This JavaScript clock display the time as per Local time zone. We will use HTML and CSS to design this Clock, and for Updating the current time we will use JavaScript Date Object. You can use this Digital clock tutorial to make your Mini JavaScript Project for college or work portfolio.
    #JavaScriptProject JavaScript
    -----------------------------------------
    Suggested Course:
    ❤️ Complete website Using HTML and CSS
    ✔️ 8 Complete website step by step
    ✔️ Source Code Download
    ✔️ 76 Lectures, 12 Hours Video
    ✔️ Course Completion certificate
    👉 easytutorialspro.com/go/course/
    -------------------------------------
    Recommended Videos:
    Learn Complete HTML and CSS from basics:
    ► • HTML And CSS Tutorial ...
    Make A Complete Website for college using HTML & CSS:
    ► • How To Make A College ...
    How to make a Business website step by step:
    ► • How To Make Website Us...
    How to make personal resume website step by step:
    ► • How To Make A Website ...
    How to make fitness website design using HTML CSS:
    ► • How To Make A Website ...
    How to make an Ecommerce Website Design:
    ► • How To Make eCommerce ...
    How to make a Job Portal website design with HTML & CSS:
    ► • How To Make Website Us...
    How to make travel website design with HTML CSS Bootstrap:
    ► • How To Make A Website ...
    -------------------------------------
    Affordable web hosting (coupon- EASYTUTORIALS)
    👉 easytutorialspro.com/hosting/
    My recommended tools and tutorials
    👉 easytutorialspro.com/
    -------------------------------------
    ◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
    Join Channel Membership:
    ► / @greatstackdev
    -------------------------------------
    Connect with me:
    👉 linktr.ee/iamavinashkr

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

  • @zabihibrahimkhil
    @zabihibrahimkhil 8 месяцев назад +7

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

  • @RajKumar_akhariya
    @RajKumar_akhariya Год назад +2

    Best teacher on RUclips to make beautiful project.

  • @nanafreedom2476
    @nanafreedom2476 9 месяцев назад +4

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

  • @subyouwont
    @subyouwont Год назад +4

    Great tutorial once again. So glad I found this channel. I would pay for these mini classes. Very easy to follow as a beginner

  • @rajamannar4861
    @rajamannar4861 Год назад +4

    Finally I find best you tube channel to learn css 😊

  • @boydmutokoma2370
    @boydmutokoma2370 Год назад +13

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

  • @bedtimehorrorstoryyoutube
    @bedtimehorrorstoryyoutube 9 месяцев назад +1

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

  • @aamirmasood010
    @aamirmasood010 10 месяцев назад +2

    you made it look so easy man loved it

  • @leonardigweokolo2813
    @leonardigweokolo2813 4 месяца назад +5

    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_ 4 месяца назад +1

      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 4 месяца назад

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

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

      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_

  • @preciousonyiocha92
    @preciousonyiocha92 8 месяцев назад +1

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

  • @user-dc6ib4mb2v
    @user-dc6ib4mb2v 11 месяцев назад

    Finaly i got the best channel for Learning coading ❤

  • @lordljb4772
    @lordljb4772 10 месяцев назад +1

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

  • @citizen00001
    @citizen00001 5 месяцев назад +1

    this was a great tutorial to follow, thank you!

  • @UtiFavour
    @UtiFavour Год назад +7

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

  • @bumblebee_1
    @bumblebee_1 2 месяца назад +2

    thnx! Simple and clear to understand

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

  • @RishabhShriwas-md2gq
    @RishabhShriwas-md2gq Год назад +1

    Thank you for this tutorial sir 😊

  • @sonya7009
    @sonya7009 11 месяцев назад

    another great tutorial mate, thank you

  • @vijayachandana8485
    @vijayachandana8485 10 месяцев назад

    Your tutorial were helpfull👍keep going.

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

    love your tutorials

  • @Anusha_Patel24
    @Anusha_Patel24 6 месяцев назад

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

  • @nayaye1795
    @nayaye1795 11 месяцев назад

    Thanks bro! I love it!

  • @sunilkumar_vlogs
    @sunilkumar_vlogs 11 месяцев назад +1

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

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

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

  • @English_604
    @English_604 6 месяцев назад

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

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

    God bless you for this video.

  • @Arvindvishwakarma-ff7fu
    @Arvindvishwakarma-ff7fu Месяц назад

    Smooth Explanation Man! thnx

  • @learnwithnagma
    @learnwithnagma 2 месяца назад +1

    Thank you so much 😊.

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

    Thank you so much sir❤ you are great!

  • @SmileFNPlug
    @SmileFNPlug 11 месяцев назад

    Great video sir 🙏👌👍

  • @jcchaconjr
    @jcchaconjr 2 месяца назад

    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.

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

    Best Teacher

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

    Thanks you for the tutorial sir

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

    Amazing Good Job

  • @StriveVoyage
    @StriveVoyage 6 месяцев назад +1

    great thank you

  • @thedinkydreads9351
    @thedinkydreads9351 Месяц назад

    You, Sir, are my hero

  • @muhammadharis5389
    @muhammadharis5389 10 месяцев назад

    Thank u sir you are awesome

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

    😊
    Thank you sir

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

    great bhai

  • @mustafa._.9371
    @mustafa._.9371 4 месяца назад

    Thank You!

  • @dancepractice805
    @dancepractice805 11 месяцев назад

    Good video and helpful video

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

    GREAT BRO

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

    Thanku sir❤

  • @harshkumarsharma350
    @harshkumarsharma350 10 месяцев назад

    Great man

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

    You were born to teach

  • @mhendrasingh7503
    @mhendrasingh7503 9 месяцев назад +49

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

    • @user-dc3io9hy8h
      @user-dc3io9hy8h 8 месяцев назад

      I am also bro

    • @bidyutghosh1983
      @bidyutghosh1983 6 месяцев назад +1

      Joy Shree Ram ❤️🙏🏽

    • @mianabubakar5987
      @mianabubakar5987 5 месяцев назад +1

      Allah Huakbar

    • @allahlesboslu2_9
      @allahlesboslu2_9 4 месяца назад

      ​@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 4 месяца назад

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

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

    Thanks sir

  • @petermwansa4890
    @petermwansa4890 4 месяца назад

    Thank you

  • @YogaEditz01
    @YogaEditz01 16 дней назад +2

    Work❤, thanks you sir❤❤

  • @welkin_shayar
    @welkin_shayar 10 месяцев назад

    Amazing video sir❤❤

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

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

  • @lavkumargahe8174
    @lavkumargahe8174 10 месяцев назад

    Best explanation

  • @AdiJadhav-ie7zp
    @AdiJadhav-ie7zp 4 дня назад +1

    great work sir

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

    Can you do Countdown 😊😊

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

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

  • @anteoleonardi9413
    @anteoleonardi9413 9 месяцев назад +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  9 месяцев назад +1

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

  • @user-ym2kp3gn9v
    @user-ym2kp3gn9v 6 месяцев назад

    🔥🔥

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

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

  • @MyGamingEra
    @MyGamingEra 11 месяцев назад

    One video on merge calendar and time also😅

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

    wow

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

    Pro l need Car game good Design❤

  • @dancepractice805
    @dancepractice805 11 месяцев назад

    Why do you not make programs in sublime text ?

  • @huruhooroo
    @huruhooroo 12 дней назад

    It will be nice to make it produce a loud noise at the hour, like an old grandfather clock.

  • @MindMatrixx1416
    @MindMatrixx1416 29 дней назад

    Legends one day before competition 😎😎

  • @_IamHarsh
    @_IamHarsh 10 месяцев назад

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

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

    please make a tutorial on live score web app for cricket

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

  • @ironman-29
    @ironman-29 Год назад

    make video on Tic tac toe game using javascript

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

    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.

  • @SarveshKumar-bl9in
    @SarveshKumar-bl9in 10 месяцев назад

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

  • @isidoramoonrose5657
    @isidoramoonrose5657 11 месяцев назад

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

  • @Gaming4Ever-pt9li
    @Gaming4Ever-pt9li 3 месяца назад

    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

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

    How can am and pm will show?

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

    How can I make the code show the 12 hour clock

  • @fulvusfeles
    @fulvusfeles 8 месяцев назад

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

  • @nethiv_surya_prakash8699
    @nethiv_surya_prakash8699 8 месяцев назад

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

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

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

  • @sagetitan4794
    @sagetitan4794 8 месяцев назад

    How do you deploy the app

  • @vishalmeharban1782
    @vishalmeharban1782 4 месяца назад

    backdrop filter effect is not working on my vscode

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

  • @f1_killer44
    @f1_killer44 4 месяца назад

    11:55

  • @criccraze-jz3eb
    @criccraze-jz3eb Год назад

    Sir i need basic css tutorials

  • @thelawbymanjeettanwar3142
    @thelawbymanjeettanwar3142 8 месяцев назад

    Sir ye embed copy karke de do..

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

    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 8 месяцев назад

      Use if condition.
      If (hour

    • @hariharang1191
      @hariharang1191 8 месяцев назад

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

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

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

    its not working inn visual code what to do??

  • @sakthidass.b
    @sakthidass.b 6 месяцев назад

    How to show the am and pm?
    12hrs

  • @markdickson3138
    @markdickson3138 8 месяцев назад

    Anyone know how to make it display in not military time?

  • @shouravshingha9311
    @shouravshingha9311 6 месяцев назад

    bro this code is not working don't know why.... i can't find any problem

  • @S-Lomar
    @S-Lomar 9 месяцев назад

    😍🤩🥰🥰🤩😍😍😍😍😍😍😍

  • @munaza9809
    @munaza9809 3 месяца назад +1

    "2013" 😂 13:10

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

    red clr change nhi ho raha

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

    Clock span and backdrop filter is not working in my VSCode😢

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

      Maybe you need an extension? Im a beginner so idk

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

      @@subyouwont Alright, I will try to search any extension for it

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

    Missing You Soo Much

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

    We love only Hazrat Muhammad SAW ❤

  • @LaxmiKumari-hk6lq
    @LaxmiKumari-hk6lq 6 месяцев назад

    Sir how connect inner html

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

    First comment

  • @vloggingwithmichael7635
    @vloggingwithmichael7635 2 месяца назад +1

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

  • @GWSG_4
    @GWSG_4 3 месяца назад +2

    Jay shri Ram 🚩🚩

  • @adilboudida3412
    @adilboudida3412 11 месяцев назад

    code source?

  • @hamzashakoor9537
    @hamzashakoor9537 10 месяцев назад

    how to convert this into 12hr?