Build a Digital Clock with JavaScript - Beginner HTML, CSS & JS Tutorial

In today's video we'll be building a simple Digital Clock using only HTML, CSS and JavaScript. This demonstrates how we can use web languages/tech to build something tangible.

Topics covered include JavaScript Classes and the Date Object.

Link to Source Code:

0:00 Overview
0:31 Writing the HTML
4:12 Writing the CSS
6:36 Writing the JavaScript
17:50 Adding a custom font

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #html

[backend_pinpost]

That is really awesome. It is so interesting to use class. Thanks

[TomasMisura]

Thank you for this tutorial - i do have some javascript clocks collection but this tut is handy in terms of how to make the same thing by different way.

[nicolast.asolis]

You're a genius, thank you for you clear explanation, i figured out how to add seconds and milliseconds to the clock, (now i need to know how to make the milliseconds smother) (and get the clock in the 24 hour format)

[chntrks]

Thank you for all videoes. Great, awesome👍👍👏👏

[yusufahmed]

Really appreciate you making such a well explained video.

[ccamiloo_c]

I love how you use classes for everything and how organized it looks that way.



I have a question, it's better to use the @import rule or the link tag to include custom fonts?

Great Project! And thank you for being so good teacher and inspire others 💙💙

[elieli]

Great tutorial, thanks for doing this!

[karenkharatyan]

Very smart tutorial!
Thank you, Dom!

[alejandroalas]

Thank you for your tutorial, I like the way that you structure code.

[andresfrr]

Thank you very much! I learned something new.

[markomondi]

am having trouble creating the classobject. what might be the matter

[AI.PSIXII]

Loved your video, thank you! I have a question, can i use a different time method? If i want to have a different clock for example count to number 80 sec to give 1 new hour, i search everywhere and i cant fint a way to come my own time, is it possible?

[ouvie]

great video, thank you! however when i use the custom font, another plain, boring font comes up. is it because this is outdated? did they change it?

[xThunderx]

Hello I have a code that sends datas from node js to a html page, it works and I see my values in the <div> container. But now I have to send these values into a html table, I tried to use the push function to add my values in an empty array and then show them in the table, but it's always empty and I don't know how to do that... can you please help me? I can send you the code

[jennievlog]

i copy this code but not function.
Can u gave me complete code for my final project? Please

[mayankmukherjee]

Hi, can you please make video on how to build custom HTML parser ( serialization and deserialization)

[dzajakeks]

I love how it's for new developers, beginners project -> uses Classes :|

[venkatesh]

Sir please make how to download YouTube video using node js

[alicomando]

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