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
It works smooth with the animation attribute...loved it!
@CodingSnow
3 жыл бұрын
Glad you liked it!
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
Where past the html code?
Beautiful work.
thanks you very much . your work is clean AF xD . Keep the hard work
Thanks broo!! This is my second project to my learning
Fabulous!
I love this
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 ??
i also did the same and it was amazing thank you
Nice works indeed :)
Hi, transition property backrgound, box-shadow is not working for me
Wow..💪💪
Wonderful! 😍😍😍
@CodingSnow
4 жыл бұрын
Thank you! ❤
Thankyou very much buddy. Great Tutorial.
@CodingSnow
3 жыл бұрын
You're most welcome!
Fantastic!!
@CodingSnow
4 жыл бұрын
Thank you! ❤❤❤
Bro clock in left align but need right how can i change it I try center into right but none to change
thank you verry much you are amazing person
Thank you so much 🥰💓🥰
it works smoothly, can you make an updated version of this where if next day is new year then show firework show
Linear-gradient not recoignized in my vscode.. any other option or solution?
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!
I'm doing this is vsc but why is the js part is in white color for my code pls help
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
Awesome video and background music is amazing 🙃🙃
@CodingSnow
3 жыл бұрын
Thank you! ❤️
*very help full **_Thank You_*
@CodingSnow
3 жыл бұрын
You are welcome! ❤
its not showing any thing like time is 00 :00: 00 am but why
@NestorSBadol
7 ай бұрын
me either
Yaaaassss 👨🏻💻 👌🏽🔥🔥🔥🔥💎🙏🏽
My code says "Cannot read property of firstChild of null." Have any tips?
thanks ad this video , very nice
@CodingSnow
4 жыл бұрын
You're most welcome! ❤️❤️❤️
thank you
Wow.. this video is amazing..
@CodingSnow
3 жыл бұрын
Thank you ❤️
thanks
Subscribed :) Nice work sir!!
@CodingSnow
2 жыл бұрын
You're welcome! :)
Thanks.
Excellent🤟🤟😁
@CodingSnow
4 жыл бұрын
❤❤❤
Thank a lot
@CodingSnow
3 жыл бұрын
You're welcome!
Which code editor is he using ?
thanks bro this video
@CodingSnow
4 жыл бұрын
You're welcome bro! ❤️
Love it!
@CodingSnow
4 жыл бұрын
Thank you! ❤❤❤
@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
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_
4 жыл бұрын
@@CodingSnow I see now it's all make sense, thank you again sir. You're very kind :D
Hi! I have same code, but i changed that to 24h, but it is not working can you please say how to repair it
thx bro
wow! love for BD
@Mehedihasan-nt5zk
3 жыл бұрын
thanks for reply
Im trying this with angular and Visual Code and its not working! any help ?
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 ..
Bro your videos are Tooo good I liked it and subscribe 😉
@CodingSnow
3 жыл бұрын
Glad you liked it bro! 🙂
@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
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
I'm using VScode and copy the all code but it's not working (Java code), so what I'm doing wrong.😅
Thank you nice
@jadijohnson2899
3 жыл бұрын
kzread.info/dash/bejne/X3qrs656mtTRfpc.html digital clock javascript project .
@CodingSnow
3 жыл бұрын
Most welcome ❤
Which site you used for running the code
@CodingSnow
3 жыл бұрын
It's a code editor called Atom.
How can I make it so it's only Eastern time?
AWesome
@CodingSnow
3 жыл бұрын
Thank you! ❤
Nice Works
I wanted to try this but it's not working.. lol I'll keep trying. This looks really cool!
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
2 жыл бұрын
use the below code at end of the script "var intervalId = window.setInterval(function(){ updateClock() }, 1000); "
Video is more than wonderful Can you send the code to make sure that the codes are written correctly?
@CodingSnow
3 жыл бұрын
Glad you like it! Source codes available in the channel website. Link in the description.
bro can you help me add a alarm clock in this code?
Super
@CodingSnow
4 жыл бұрын
Thanks! ❤❤❤
wow.............
Is this a dynamic webpage
Super🤟🤟❤️💓😘
@CodingSnow
4 жыл бұрын
Thank you! ❤❤❤
@tharinduabishek2505
4 жыл бұрын
@@CodingSnow you're welcome🤟🤟😃
I tried it with dreamweaver, it does not work
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
3 жыл бұрын
Hello! Check the code again. It will work.
@mustafamakina843
3 жыл бұрын
@@CodingSnow ok. Thank you for your attention, have a nice day
@aabthafmathani2912
2 жыл бұрын
same problem here
Please make video how to download this software 🙏🙏🙏
Bro how to put greater than or equal symbol please tell me
Жыл бұрын
[altgr "y, shift7"] >=
Жыл бұрын
>=
Excellent work. Can you please fix a timezone like Europe/Berlin. Advance thanks.
@CodingSnow
3 жыл бұрын
Thank you and welcome! ❤. It is working with the timezone you in.
Are You From? Where You Learned JS?
I want ask, why the clock on my website doesn't work?
@CodingSnow
4 жыл бұрын
It should work. Did you try it with the downloaded source files?
@moch.irvansyah4127
4 жыл бұрын
@@CodingSnow ooh, i see... it's something wrong. Sorry, i was wrong. it's work. Thanks.
@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?
It does not works. I have a bit problem with JS
its not work how can me help !
@sheikhrdxarman6573
3 жыл бұрын
plse sltion me
how can i make this 24h clock?
@CodingSnow
3 жыл бұрын
Remove the javascript lines below. if(hou == 0){ hou = 12; } if(hou > 12){ hou = hou - 12; }
@Makz31
3 жыл бұрын
@@CodingSnow Thanks!
@CodingSnow
3 жыл бұрын
@@Makz31 You're welcome! ❤️
refiect works in crome but it doesn''t work on firefox
@CodingSnow
2 жыл бұрын
Use -moz instead -webkit
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
2 жыл бұрын
yea, same here
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
I don't know why in my case the data are not getting updated until i reload the page ?
@Tivinity
2 жыл бұрын
same issue i'm having, did you have any luck in fixing it?
@subratarudra2745
2 жыл бұрын
@@Tivinity no, still I am not able to fix that issue
@mm-sq4gb
Жыл бұрын
you have to call the new date() function in setInterval method so that it gets updated every second
@subratarudra2745
Жыл бұрын
@@mm-sq4gb Thanks!
Who Just Came Here To Learn: -webkit-box-reflect 👇
omg you also use atom
The clock and everything works but the numbers are not moving does anyone know why this is happening?
@Tivinity
2 жыл бұрын
same here, did you find a solution?
@ritikapatidar1790
2 жыл бұрын
@@Tivinity No not yet
What's the program name?
@GamingDude2003
Жыл бұрын
Visual Studio Code editor
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.
It's not working
Your clock stuck at hover in Mobile
this code is'nt working 😫😫
copy of the html code pls
hey my var lover boy you love var your life is var var var hahahahahahahaha
this is not working
@CodingSnow
2 жыл бұрын
If this is not working ew digital clock design tutorial available. Please check the latest videos.
didnt work
@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.
NONE OF IT WORKED
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.
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.
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.
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.
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.