Digital Clock using HTML CSS & JavaScript

👋 Hey Friends!
In this tutorial, we are creating a simple Digital Clock using JavaScript.

Free Source Code

⏱ Timestamps
00:00 Intro
00:07 Quick Demo
00:18 HTML Tutorial
1:04 CSS Tutorial
2:20 JavaScript Tutorial
5:36 Final Result Testing
5:55 Thanks For Watching

Get my Java Tutorial Book Online for Free:

👍 Subscribe for more tutorials like this:
Check my Personal Website:

⭐️ Want to learn more from me? Check out these links:

Java Programming Tutorial from scratch to advanced

HTML 5 Tutorial from scratch to advanced

CSS 3 Tutorial from scratch to advanced

JavaScript Programming from scratch to advanced

Data structure and Algorithm in C++

Please like and subscribe to my channel and press the bell icon to get new video updates.
💖 Thanks for everything!

[guliflower]

i really should thank you for this clear explaining

[ecospider]

This was perfect. I had decided to make my first JavaScript project be a clock. This is exactly that. I will be watching this on a regular basis until I can code the whole thing from memory. Then I will play around with adding more html and more JavaScript.

Thanks for the great video.

[tech-mindresearch]

Yes, it's the one I have been looking. Most of the other clips don't give a clear explanations about the use of functions. Probably, they don't know how to use it or explain. Thanks this is brilliant. Not interrupted by ads in every minute.

[ScreenPrintR]

You're the best. It worked from the get go. Didn't have to troubleshoot or tweak anything. Very straight forward.

[tyler_payne]

Hey yo you are amazing ❤ I appreciate you.👍

[islambn]

great work i suggest adding this function " padStart(2, "0") " to add 0 to the number instead of 1 2 3 it show 01, 02, 03

[muffin]

Thanks so much for this! I wanted to add a clock to my site and found that the analog ones were a bit too advanced, but this was super easy to follow and looks great!

[rosecosplay]

thank you helped me spice my clock up with what i already had written

[saikumar]

how to define the condition for session, when hours is in 12-hrs format ?

[azri]

Nice sir 😍, it will follow the current computer date ?

[axmedcaanoboidheg]

Wow its really easy but add each hrs min and sec '0'
Like this

hrs = hrs <10 ? `0${hrs}` : hrs;
min = min <10 ? `0${min}` : min
sec = sec <10 ? `0${sec}` : sec
❤❤

[whitewolfv]

what to do in case of error document' is not defined no-undef?

[irabelhamuli]

thank you bro, it's a wonderfull tutorial

[shaourkhan]

this actually works thanks for sharing this videos.😇

[djtjts]

It's working but I'm not sure if the pm is I have to wait till afternoon

[ravipratihast]

what is 10? how it is equivalent to 1 sec..? please explain?

[dzungdakao]

var strmin = "0";
var strsec = "0";

if(min < 10)
min = strmin.concat(min);

if(sec < 10)
sec = strsec.concat(sec);

[pokel]

I think you made it a lot complicated . This is my code :
Supposed to have a <div id="time'>

function updateTime(){
setTimeout(updateTime, 1000);



let tim =
let t = new Date();
let time = t.toLocaleTimeString();

tim.innerHTML = time;
}

updateTime();

[TylerNicholson-eecf]

Thank you! I've just started learning JS and learned a lot from this! Probably a stupid question but was just wondering what the new keyword does and if it is necessary to use in this code?

[max-wbvn]

every thing is good but my clock not changing time its at 00:00:00