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

+ Like and Subscribe 🔔 for More! ❤

Book Me 🔖
-----------------------

Support My Works ❤️❄️
--------------------------------------------

#cssdigitalclock #digitalclockjs

Background music:
____________________
Track: Good Life — JayJen & Roa [Audio Library Release]
Music provided by Audio Library Plus

Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0

[malolansriram]

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

[theonlybow]

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

[shirocode]

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

[Unknown.csssss]

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

[scpf]

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

[youssefnageh]

thank you verry much you are amazing person

[Mariamstacks]

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

[Shubham-zuzh]

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

[roshankalamkar]

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

[vishwamohandoss]

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

[steventisdol]

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

[aadityathakur]

Thankyou very much buddy. Great Tutorial.

[gharbiislem]

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

[AlanJojy]

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

[wsjgamer]

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

[nilufaakter]

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

[bluepants]

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!

[ballabhsodhani]

i also did the same and it was amazing thank you

[Sage-xdoc]

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