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