Digital Clock | With Date (Day, Month, Year) - Using HTML, CSS & Javascript

In this tutorial, you can learn how to design a digital clock with date using CSS, HTML, and Javascript. This digital clock includes Date (Day, Month, Year), Time (Hours, Minutes, Seconds), and Period (AM/PM). The clock is in 12 hours format. Hope you guys enjoy this tutorial.
Another awesome tutorial for creating a digital clock with more features ❤️❄️
---------------------------------------------------------------------------------------------------------------------------------
Digital Clock Design | With 12-hour/24-hour Format Switcher - Html, Css & Javascript
▶️ Video Link - • Digital Clock Design |...
∎ Get This Project Source Codes - www.buymeacoffee.com/codingsn...
+ Like and Subscribe 🔔 for More! ❤
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
∎ Download File Setup and Images - codingsnow.com
∎ Download All Source Files On Patreon - / 43063759
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
#cssdigitalclock #digitalclockjs
Background music:
____________________
Track: Good Life - JayJen & Roa [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Good Life - JayJen & R...
Free Download / Stream: alplus.io/good-life
Me & You by MusicbyAden / musicbyaden
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/_me-and-you
Music promoted by Audio Library • Me & You - MusicbyAden...

Пікірлер: 153

  • @malolansriram6328
    @malolansriram63283 жыл бұрын

    It works smooth with the animation attribute...loved it!

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Glad you liked it!

  • @shirocode463
    @shirocode4632 жыл бұрын

    for me the date, day, year are showing correctly, but those time and period are not showing, though i copied your source code because when i try the same error came

  • @nasirmedia
    @nasirmedia11 ай бұрын

    Where past the html code?

  • @shakatech_zone3926
    @shakatech_zone39263 жыл бұрын

    Beautiful work.

  • @gharbiislem1885
    @gharbiislem18852 жыл бұрын

    thanks you very much . your work is clean AF xD . Keep the hard work

  • @Unknown.csssss
    @Unknown.csssss9 ай бұрын

    Thanks broo!! This is my second project to my learning

  • @Saidur07
    @Saidur073 жыл бұрын

    Fabulous!

  • @programmistph3393
    @programmistph33933 жыл бұрын

    I love this

  • @AlanJojy
    @AlanJojy3 жыл бұрын

    Bro what if the local time is not correct.. like my laptop time is wrong... so what to do.... or is this viedo showing the world time tutorial.... or how to make a digital clock according to location... do u know ??

  • @ballabhsodhani
    @ballabhsodhani2 жыл бұрын

    i also did the same and it was amazing thank you

  • @tariqulislam7583
    @tariqulislam75833 жыл бұрын

    Nice works indeed :)

  • @Mariamstacks
    @Mariamstacks3 жыл бұрын

    Hi, transition property backrgound, box-shadow is not working for me

  • @pathmashanthasenanayaka3193
    @pathmashanthasenanayaka31933 жыл бұрын

    Wow..💪💪

  • @samuelk1623
    @samuelk16234 жыл бұрын

    Wonderful! 😍😍😍

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    Thank you! ❤

  • @aadityathakur3548
    @aadityathakur35483 жыл бұрын

    Thankyou very much buddy. Great Tutorial.

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    You're most welcome!

  • @2005Azm
    @2005Azm4 жыл бұрын

    Fantastic!!

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    Thank you! ❤❤❤

  • @vishwamohandoss1512
    @vishwamohandoss15123 жыл бұрын

    Bro clock in left align but need right how can i change it I try center into right but none to change

  • @youssefnageh7966
    @youssefnageh79662 жыл бұрын

    thank you verry much you are amazing person

  • @moviemasala8311
    @moviemasala83112 жыл бұрын

    Thank you so much 🥰💓🥰

  • @theonlybow5130
    @theonlybow51306 ай бұрын

    it works smoothly, can you make an updated version of this where if next day is new year then show firework show

  • @keisanfeodery4032
    @keisanfeodery40323 жыл бұрын

    Linear-gradient not recoignized in my vscode.. any other option or solution?

  • @bluepants8140
    @bluepants8140 Жыл бұрын

    I am having an issue with the .pad(2) for the hours, minutes, and seconds if anyone could help me I would really appreciate it. Thank you!

  • @Sage-xd9oc
    @Sage-xd9oc2 жыл бұрын

    I'm doing this is vsc but why is the js part is in white color for my code pls help

  • @nilufaakter5402
    @nilufaakter54022 жыл бұрын

    this line isn''t working -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255, 255, 255, 0.1)); . can you plz tell me why

  • @mujammilhaque1852
    @mujammilhaque18523 жыл бұрын

    Awesome video and background music is amazing 🙃🙃

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Thank you! ❤️

  • @themiyalumia1383
    @themiyalumia13833 жыл бұрын

    *very help full **_Thank You_*

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    You are welcome! ❤

  • @roshankalamkar7752
    @roshankalamkar77522 жыл бұрын

    its not showing any thing like time is 00 :00: 00 am but why

  • @NestorSBadol

    @NestorSBadol

    7 ай бұрын

    me either

  • @rolando8966
    @rolando8966 Жыл бұрын

    Yaaaassss 👨🏻‍💻 👌🏽🔥🔥🔥🔥💎🙏🏽

  • @NYTESHYFT
    @NYTESHYFT3 жыл бұрын

    My code says "Cannot read property of firstChild of null." Have any tips?

  • @figname7852
    @figname78524 жыл бұрын

    thanks ad this video , very nice

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    You're most welcome! ❤️❤️❤️

  • @MadaraUchiha_404
    @MadaraUchiha_4042 жыл бұрын

    thank you

  • @afifahmahin8137
    @afifahmahin81373 жыл бұрын

    Wow.. this video is amazing..

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Thank you ❤️

  • @jameebashir3087
    @jameebashir3087 Жыл бұрын

    thanks

  • @zeronine570
    @zeronine5702 жыл бұрын

    Subscribed :) Nice work sir!!

  • @CodingSnow

    @CodingSnow

    2 жыл бұрын

    You're welcome! :)

  • @zerinzaker21
    @zerinzaker21 Жыл бұрын

    Thanks.

  • @tharinduabishek2505
    @tharinduabishek25054 жыл бұрын

    Excellent🤟🤟😁

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    ❤❤❤

  • @RAAZDIARIES
    @RAAZDIARIES3 жыл бұрын

    Thank a lot

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    You're welcome!

  • @rishisharma8714
    @rishisharma87143 жыл бұрын

    Which code editor is he using ?

  • @YoYo-zo1ns
    @YoYo-zo1ns4 жыл бұрын

    thanks bro this video

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    You're welcome bro! ❤️

  • @malamhari_
    @malamhari_4 жыл бұрын

    Love it!

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    Thank you! ❤❤❤

  • @malamhari_

    @malamhari_

    4 жыл бұрын

    Can someone explain what is the purpose of code lines number 47 - 50? I can see it works to configure the number of hour, minutes, and seconds. But actually how it works ? Sorry for bad english, thanks in advance :)

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    @@malamhari_ It is for the digits. hou.pad(2), min.pad(2), sec.pad(2) Imagine time is 06 : 08 : 04 PM Without 47-50 line function, time will display 6 : 8 : 4 PM without 2 digits. If it is .pad(5) like below, hou.pad(5), min.pad(5), sec.pad(5) Time will display 00006 : 00008 : 00004 PM

  • @malamhari_

    @malamhari_

    4 жыл бұрын

    @@CodingSnow I see now it's all make sense, thank you again sir. You're very kind :D

  • @zanispleve1777
    @zanispleve17772 жыл бұрын

    Hi! I have same code, but i changed that to 24h, but it is not working can you please say how to repair it

  • @avinashrc8251
    @avinashrc82512 жыл бұрын

    thx bro

  • @Mehedihasan-nt5zk
    @Mehedihasan-nt5zk3 жыл бұрын

    wow! love for BD

  • @Mehedihasan-nt5zk

    @Mehedihasan-nt5zk

    3 жыл бұрын

    thanks for reply

  • @00000000060
    @000000000602 жыл бұрын

    Im trying this with angular and Visual Code and its not working! any help ?

  • @Shubham-zu1zh
    @Shubham-zu1zh9 ай бұрын

    There is a bug , the time is between (12.00- 1.00) in that time it shows exp: 12.14 AM which is actually to be 12.14PM ..

  • @BlockOfCode
    @BlockOfCode3 жыл бұрын

    Bro your videos are Tooo good I liked it and subscribe 😉

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Glad you liked it bro! 🙂

  • @BlockOfCode

    @BlockOfCode

    3 жыл бұрын

    @@CodingSnow bro but I need your help when we view a single product how we can make that interface plse will you make a video on it I'm making an e-commerce website project 👍 it will help others too

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    @@BlockOfCode I've already done a video for a product card with a quick popup view. I think it might be helpful to you. Link - kzread.info/dash/bejne/poyWurOGe6u6ntI.html

  • @wsjgamer4898
    @wsjgamer4898 Жыл бұрын

    I'm using VScode and copy the all code but it's not working (Java code), so what I'm doing wrong.😅

  • @OrgilsYTChannel
    @OrgilsYTChannel3 жыл бұрын

    Thank you nice

  • @jadijohnson2899

    @jadijohnson2899

    3 жыл бұрын

    kzread.info/dash/bejne/X3qrs656mtTRfpc.html digital clock javascript project .

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Most welcome ❤

  • @omkarkhadul1237
    @omkarkhadul12373 жыл бұрын

    Which site you used for running the code

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    It's a code editor called Atom.

  • @TechWithAndrew
    @TechWithAndrew2 жыл бұрын

    How can I make it so it's only Eastern time?

  • @senor_shorts
    @senor_shorts3 жыл бұрын

    AWesome

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Thank you! ❤

  • @chefnabil171
    @chefnabil1712 жыл бұрын

    Nice Works

  • @steventisdol4156
    @steventisdol41562 жыл бұрын

    I wanted to try this but it's not working.. lol I'll keep trying. This looks really cool!

  • @triptikushwaha4653
    @triptikushwaha46532 жыл бұрын

    Can you please tell where i am wrong... I have written the same code and everything is fine its just my clock is not uploading by itself....

  • @motivationtomove8979

    @motivationtomove8979

    2 жыл бұрын

    use the below code at end of the script "var intervalId = window.setInterval(function(){ updateClock() }, 1000); "

  • @user-dm7tw8do6h
    @user-dm7tw8do6h3 жыл бұрын

    Video is more than wonderful Can you send the code to make sure that the codes are written correctly?

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Glad you like it! Source codes available in the channel website. Link in the description.

  • @abdulmoiz1074
    @abdulmoiz10743 жыл бұрын

    bro can you help me add a alarm clock in this code?

  • @dob1wan174
    @dob1wan1744 жыл бұрын

    Super

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    Thanks! ❤❤❤

  • @afreenappu9917
    @afreenappu99173 жыл бұрын

    wow.............

  • @Theysayrdg
    @Theysayrdg2 жыл бұрын

    Is this a dynamic webpage

  • @tharinduabishek2505
    @tharinduabishek25054 жыл бұрын

    Super🤟🤟❤️💓😘

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    Thank you! ❤❤❤

  • @tharinduabishek2505

    @tharinduabishek2505

    4 жыл бұрын

    @@CodingSnow you're welcome🤟🤟😃

  • @vona5251
    @vona5251 Жыл бұрын

    I tried it with dreamweaver, it does not work

  • @mustafamakina843
    @mustafamakina8433 жыл бұрын

    hello i am using an atomic code editor I have 1 html and css file in the same folder, everything is ok but the hour is not coming how can I do it? Thank you

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Hello! Check the code again. It will work.

  • @mustafamakina843

    @mustafamakina843

    3 жыл бұрын

    @@CodingSnow ok. Thank you for your attention, have a nice day

  • @aabthafmathani2912

    @aabthafmathani2912

    2 жыл бұрын

    same problem here

  • @darshanraja
    @darshanraja2 жыл бұрын

    Please make video how to download this software 🙏🙏🙏

  • @allvideosintamil1157
    @allvideosintamil11572 жыл бұрын

    Bro how to put greater than or equal symbol please tell me

  • Жыл бұрын

    [altgr "y, shift7"] >=

  • Жыл бұрын

    >=

  • @rahim3070
    @rahim30703 жыл бұрын

    Excellent work. Can you please fix a timezone like Europe/Berlin. Advance thanks.

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Thank you and welcome! ❤. It is working with the timezone you in.

  • @mrprofessional2466
    @mrprofessional24663 жыл бұрын

    Are You From? Where You Learned JS?

  • @moch.irvansyah4127
    @moch.irvansyah41274 жыл бұрын

    I want ask, why the clock on my website doesn't work?

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    It should work. Did you try it with the downloaded source files?

  • @moch.irvansyah4127

    @moch.irvansyah4127

    4 жыл бұрын

    @@CodingSnow ooh, i see... it's something wrong. Sorry, i was wrong. it's work. Thanks.

  • @CodingSnow

    @CodingSnow

    4 жыл бұрын

    @@moch.irvansyah4127 You're welcome! ❤️❤️❤️

  • Жыл бұрын

    @@CodingSnow Source file? Are you thinking about the single *{} setting and the commented scripts, which cannot be used by default?

  • @behruz_abdujalilov
    @behruz_abdujalilov2 жыл бұрын

    It does not works. I have a bit problem with JS

  • @sheikhrdxarman6573
    @sheikhrdxarman65733 жыл бұрын

    its not work how can me help !

  • @sheikhrdxarman6573

    @sheikhrdxarman6573

    3 жыл бұрын

    plse sltion me

  • @Makz31
    @Makz313 жыл бұрын

    how can i make this 24h clock?

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    Remove the javascript lines below. if(hou == 0){ hou = 12; } if(hou > 12){ hou = hou - 12; }

  • @Makz31

    @Makz31

    3 жыл бұрын

    @@CodingSnow Thanks!

  • @CodingSnow

    @CodingSnow

    3 жыл бұрын

    @@Makz31 You're welcome! ❤️

  • @nilufaakter5402
    @nilufaakter54022 жыл бұрын

    refiect works in crome but it doesn''t work on firefox

  • @CodingSnow

    @CodingSnow

    2 жыл бұрын

    Use -moz instead -webkit

  • @arulraj1417
    @arulraj14173 жыл бұрын

    Hi, I have been done all the things right and I have checked the mistakes also Every thing is working perfect but ‼️Im not able to see time changeing itself it's stuck with 0 hr/min/sec/months and year Wts the solution for this????....

  • @thegamerwonderswhy2563

    @thegamerwonderswhy2563

    2 жыл бұрын

    yea, same here

  • @alicomando1195
    @alicomando11952 жыл бұрын

    Hi I liked Your Video How Can I Make 24 Hours 45 munutes Clock In Html or other codes Like for Example Mars Time Has 24 hours 39 minutes Lets Say we Found A Planet That Has 24 Hours and 45 Minutes Thanks

  • @subratarudra2745
    @subratarudra27452 жыл бұрын

    I don't know why in my case the data are not getting updated until i reload the page ?

  • @Tivinity

    @Tivinity

    2 жыл бұрын

    same issue i'm having, did you have any luck in fixing it?

  • @subratarudra2745

    @subratarudra2745

    2 жыл бұрын

    @@Tivinity no, still I am not able to fix that issue

  • @mm-sq4gb

    @mm-sq4gb

    Жыл бұрын

    you have to call the new date() function in setInterval method so that it gets updated every second

  • @subratarudra2745

    @subratarudra2745

    Жыл бұрын

    @@mm-sq4gb Thanks!

  • @scpf2360
    @scpf2360 Жыл бұрын

    Who Just Came Here To Learn: -webkit-box-reflect 👇

  • @Letsgooboi
    @Letsgooboi2 жыл бұрын

    omg you also use atom

  • @ritikapatidar1790
    @ritikapatidar17902 жыл бұрын

    The clock and everything works but the numbers are not moving does anyone know why this is happening?

  • @Tivinity

    @Tivinity

    2 жыл бұрын

    same here, did you find a solution?

  • @ritikapatidar1790

    @ritikapatidar1790

    2 жыл бұрын

    @@Tivinity No not yet

  • @danielpekk4590
    @danielpekk4590 Жыл бұрын

    What's the program name?

  • @GamingDude2003

    @GamingDude2003

    Жыл бұрын

    Visual Studio Code editor

  • @MDIslam-kv6rz
    @MDIslam-kv6rz3 жыл бұрын

    Hello brother Brother, I am one of your subscriber brothers. I always like and comment on all your videos. Brother, I need your help right now. Please help me.

  • @maninaredla4840
    @maninaredla48402 жыл бұрын

    It's not working

  • @BLINDFOLD-cb2yp
    @BLINDFOLD-cb2yp3 жыл бұрын

    Your clock stuck at hover in Mobile

  • @tragicgamer81
    @tragicgamer8111 ай бұрын

    this code is'nt working 😫😫

  • @naomiasabellia3254
    @naomiasabellia3254 Жыл бұрын

    copy of the html code pls

  • @litunkhan4309
    @litunkhan4309 Жыл бұрын

    hey my var lover boy you love var your life is var var var hahahahahahahaha

  • @aabthafmathani2912
    @aabthafmathani29122 жыл бұрын

    this is not working

  • @CodingSnow

    @CodingSnow

    2 жыл бұрын

    If this is not working ew digital clock design tutorial available. Please check the latest videos.

  • @carpproductions9124
    @carpproductions91242 жыл бұрын

    didnt work

  • @stevenwoods9403

    @stevenwoods9403

    2 жыл бұрын

    Check your code. All it takes for nothing to work is maybe a comma missing or some other typo. Trust me: been there, done that. It's frustrating when sh*t doesn't work, but in 9 out of 10 situations it's probably just a silly typo.

  • @jr4560
    @jr45603 жыл бұрын

    NONE OF IT WORKED

  • @MDIslam-kv6rz
    @MDIslam-kv6rz3 жыл бұрын

    Hello brother Brother, I am one of your subscriber brothers. I always like and comment on all your videos. Brother, I need your help right now. Please help me.

  • @MDIslam-kv6rz
    @MDIslam-kv6rz3 жыл бұрын

    Hello brother Brother, I am one of your subscriber brothers. I always like and comment on all your videos. Brother, I need your help right now. Please help me.

  • @MDIslam-kv6rz
    @MDIslam-kv6rz3 жыл бұрын

    Hello brother Brother, I am one of your subscriber brothers. I always like and comment on all your videos. Brother, I need your help right now. Please help me.

  • @MDIslam-kv6rz
    @MDIslam-kv6rz3 жыл бұрын

    Hello brother Brother, I am one of your subscriber brothers. I always like and comment on all your videos. Brother, I need your help right now. Please help me.

  • @MDIslam-kv6rz
    @MDIslam-kv6rz3 жыл бұрын

    Hello brother Brother, I am one of your subscriber brothers. I always like and comment on all your videos. Brother, I need your help right now. Please help me.