Create a Digital Clock using HTML, CSS and JavaScript | Explained in simplest way

HTML, CSS and JavaScript has always excited all of us and creating some unique, interesting and working projects makes it more interesting.

So, today we will be creating Digital using HTML, CSS and  JavaScript.

Let's start creating the Digital Clock step by step, everything will be much easier to understand and implement.

Digital Clock will look like this and it will show you the current time in 24-hours format. Check your current time. Does it match?

: :

Step 1- Create a folder and give any suitable name to it. Here, we will be using VS Code for making the clock, you can use your own IDE.

Step 2- Open the folder in VS Code and create three files namely index.html, style.css and index.js. (You can also name your files according to your wish) You can also refer to the images shown here.

Let's understand the HTML Code first:

Click on the image to view

Step 1- As shown in the image, we will firstly write up the boiler plate of HTML (basic syntax used before starting any project in HTML). Now, link the CSS and JS files to the the HTML. You can link the CSS and JS file in the 'head' tag of the code. This linking of file in the head tag is known as External linking.

For more read this - What is CSS ? | Some Basic Properties in CSS to get started

To link the CSS file use- <link rel="stylesheet" href="style.css"> 

To link JS file use- <script src="index.js"></script> 

Step 2- Now, comes the 'body' of the HTML code. Here, we have created a class named as 'container'. Inside the container class, we have created three  span  tags and specified each tag with ID as hours, minutes and seconds. 

• Remember: ID is unique and can be assigned to a particular tag/element, whereas class can be assigned to more than one tag/element.

Step 3- The 'span' tag is an inline element and can be easily styled by CSS and manipulated with JavaScript. Notice in the image, that we have added  :  , before the span tag, just to separate the hours, minutes and seconds from each other.

Here, we are completed with our HTML code. 

Let's move to the CSS Code:

     //        .container{

                        text-align: center;

                        margin-top: 50px;

                        color: blue;

                        font-size: 25px;

                 }

The CSS code is much smaller, as you just need to style the text and provide the margin, font size etc. You can style it according to your choice. For now, I have just made it as simple as possible.

In this project the main role is of JavaScript. It gives the life to our clock.

Let's understand the JavaScript Code:

Click on the image to view

Step 1- In JavaScript we have two methods :

1). setInterval - It allows us to run a function repeatedly, after regular interval of time. 
The syntax of setInterval is : setInterval(function_name, time)
It takes two arguments, the name of function and time in milliseconds.

2). setTimeout - It allows us to run a function only once after the interval of time. The syntax of setTimeout is similar to setInterval: setTimeout(function_name, time)

Here, we will be using Set Interval method, since we want our time to be updated continuously after every second or 1000 millisecond.

Step 2- Now, we create a function named as 'update'. This function will be used to update the time after every second.

Step 3- Let's move inside the function part of the JavaScript.  

=>  let  is a keyword which is used in JS to identify the variables. 
Here, we have created four variables, time, hrs, min and sec. Let's understand the use of each variable briefly.

=> let time = new Date(); 
Here, Date objects are created with the  new Date()  constructor. 'new Date()' creates a new date object with the current date and time and assign the value to the variable 'time'. 

=> let hrs=time.getHours();
.getHours() method returns the current hours of a date.

Similarly, the  .getMinutes()  and  .getSeconds()  methods, returns the minutes and seconds of the current time respectively.

=> To access or manipulate the content/elements of HTML, we use DOM (Document Object Model) methods such as .getElementById or .getElementsByClassName.

In this Digital Clock project we have used, .getElementById method, as it's much easier and efficient to use.

• Syntax: document.getElementById('name_of_ID') 

In the parenthesis, we specify the name of ID. Here (in HTML Code), we have defined three ID's - hours, minutes, and seconds.

=>The  innerHTML  property is used to get or replace the content of HTML elements.  

Now, we are done with creating the function. We pass the function name to the 'setInterval' method and specify the time as 1000(in milliseconds).

You can also customize the clock, like you can use if-else condition to display the time in 12-hour format, or using CSS to style the clock and change the background. It's all up to you. 

 Finally, your Digital Clock is ready to show the time.