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

Подписаться 51 тыс.

Просмотров 106 тыс.

50% 1

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.buymeacoff...
+ Like and Subscribe 🔔 for More! ❤
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoff...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoff...
∎ 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/codi...
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoff...
∎ 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...
Me & You by MusicbyAden / musicbyaden
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/_me-and...
Music promoted by Audio Library • Me & You - MusicbyAden...

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 152

@malolansriram6328 3 года назад

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

@CodingSnow 3 года назад

Glad you liked it!

@shirocode463 2 года назад

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

@roshankalamkar7752 2 года назад

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

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

me either

@nasirmedia Год назад

Where past the html code?

@Mariamstacks 3 года назад

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

@vishwamohandoss1512 3 года назад

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

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

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

@Shubham-zu1zh Год назад

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

@Unknown.csssss Год назад

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

@wsjgamer4898 Год назад

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

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

@nilufaakter5402 3 года назад

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

@Sage-xd9oc 3 года назад

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

@AlanJojy 3 года назад

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

@gharbiislem1885 2 года назад

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

@youssefnageh7966 2 года назад

thank you verry much you are amazing person

@zanispleve1777 2 года назад

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

@ballabhsodhani 2 года назад

i also did the same and it was amazing thank you

@rishisharma8714 3 года назад

Which code editor is he using ?

@samuelk1623 4 года назад

Wonderful! 😍😍😍

@CodingSnow 4 года назад

Thank you! ❤

@mustafamakina843 3 года назад

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

@keisanfeodery4032 3 года назад

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

@themiyalumia1383 4 года назад

*very help full **_Thank You_*

@CodingSnow 4 года назад

You are welcome! ❤

@2005Azm 4 года назад

Fantastic!!

@CodingSnow 4 года назад

Thank you! ❤❤❤

@NYTESHYFT 3 года назад

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

@arulraj1417 3 года назад

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

@FakeJolie 3 года назад

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

@Saidur07 3 года назад

Fabulous!

@tharinduabishek2505 4 года назад

Excellent🤟🤟😁

@CodingSnow 4 года назад

❤❤❤

@rolando8966 Год назад

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

@triptikushwaha4653 2 года назад

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); "

@aadityathakur3548 3 года назад

Thankyou very much buddy. Great Tutorial.

@CodingSnow 3 года назад

You're most welcome!

@Mehedihasan-nt5zk 3 года назад

wow! love for BD

@Mehedihasan-nt5zk 3 года назад

thanks for reply

@figname7852 4 года назад

thanks ad this video , very nice

@CodingSnow 4 года назад

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

@vona5251 Год назад

I tried it with dreamweaver, it does not work

@Global-y8p 2 года назад

Thank you so much 🥰💓🥰

@pathmashanthasenanayaka3193 4 года назад

Wow..💪💪

@YoYo-zo1ns 4 года назад

thanks bro this video

@CodingSnow 4 года назад

You're welcome bro! ❤️

@programmistph3393 3 года назад

I love this

@afifahmahin8137 3 года назад

Wow.. this video is amazing..

@CodingSnow 3 года назад

Thank you ❤️

@mujammilhaque1852 4 года назад

Awesome video and background music is amazing 🙃🙃

@CodingSnow 4 года назад

Thank you! ❤️

@MadaraUchiha_404 2 года назад

thank you

@behruz_abdujalilov 2 года назад

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

@steventisdol4156 2 года назад

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

@moch.irvansyah4127 4 года назад

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?

@Theysayrdg 3 года назад

Is this a dynamic webpage

@abdulmoiz1074 3 года назад

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

@tariqulislam7583 3 года назад

Nice works indeed :)

@sheikhrdxarman6573 3 года назад

its not work how can me help !

@sheikhrdxarman6573 3 года назад

plse sltion me

@tharinduabishek2505 4 года назад

Super🤟🤟❤️💓😘

@CodingSnow 4 года назад

Thank you! ❤❤❤

@tharinduabishek2505 4 года назад

@@CodingSnow you're welcome🤟🤟😃

@احمداسماعيل-ص3م 3 года назад

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.

@zeronine570 3 года назад

Subscribed :) Nice work sir!!

@CodingSnow 3 года назад

You're welcome! :)

@avinashrc8251 3 года назад

thx bro

@ritikapatidar1790 3 года назад

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

@Tivinity 3 года назад

same here, did you find a solution?

@ritikapatidar1790 3 года назад

@@Tivinity No not yet

@mrprofessional2466 3 года назад

Are You From? Where You Learned JS?

@subratarudra2745 3 года назад

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

@Tivinity 3 года назад

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

@subratarudra2745 3 года назад

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

@darshanraja 2 года назад

Please make video how to download this software 🙏🙏🙏

@nilufaakter5402 3 года назад

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

@CodingSnow 3 года назад

Use -moz instead -webkit

@allvideosintamil1157 3 года назад

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

Год назад

[altgr "y, shift7"] >=

Год назад

@scpf2360 Год назад

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

@omkarkhadul1237 4 года назад

Which site you used for running the code

@CodingSnow 4 года назад

It's a code editor called Atom.

@BlockOfCode 3 года назад

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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tXbXQMKHTno.html

@malamhari_ 4 года назад

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

@OrgilsYTChannel 3 года назад

Thank you nice

@jadijohnson2899 3 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--FwQLAjqkN4.html digital clock javascript project .

@CodingSnow 3 года назад

Most welcome ❤

@danielpekk4590 2 года назад

What's the program name?

@GamingDude2003 Год назад

Visual Studio Code editor

@tragicgamer81 Год назад

this code is'nt working 😫😫

@alicomando1195 2 года назад

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

@rahim3070 4 года назад

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

@CodingSnow 4 года назад

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

@BLINDFOLD-cb2yp 3 года назад

Your clock stuck at hover in Mobile

@senor_shorts 3 года назад

AWesome

@CodingSnow 3 года назад

Thank you! ❤

@chefnabil171 2 года назад

Nice Works

@dob1wan174 4 года назад

Super

@CodingSnow 4 года назад

Thanks! ❤❤❤

@afreenappu9917 3 года назад

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

@naomiasabellia3254 Год назад

copy of the html code pls

@aabthafmathani2912 2 года назад

this is not working

@CodingSnow 2 года назад

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

@Letsgooboi 2 года назад

omg you also use atom

@carpproductions9124 2 года назад

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.

@MDIslam-kv6rz 3 года назад

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.

@litunkhan4309 Год назад

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

@jr4560 3 года назад

NONE OF IT WORKED

@maninaredla4840 2 года назад

It's not working

@MDIslam-kv6rz 3 года назад

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 3 года назад

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.

@TechWithAndrew 2 года назад

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

@jameebashir3087 Год назад

thanks

@zerinzaker21 2 года назад

Thanks.

@RAAZDIARIES 3 года назад

Thank a lot

@CodingSnow 3 года назад

You're welcome!

@Makz31 4 года назад

how can i make this 24h clock?

@CodingSnow 4 года назад

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

@Makz31 4 года назад

@@CodingSnow Thanks!

@CodingSnow 4 года назад

@@Makz31 You're welcome! ❤️

@MDIslam-kv6rz 3 года назад

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 3 года назад

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 3 года назад

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.