Digital Clock using JavaScript

Digital Clock using JavaScript & CSS (Tutorial + Code)

JavaScript Digital Clock is a beautiful project that helps to increase knowledge about JavaScript. If you are a beginner then of course JavaScript digital clock will be an important project for you. In this article, you will learn how to make a digital clock using JavaScript. Digital clocks are used in many places, mainly for different types of websites.  

Digital Clock using JavaScript & CSS

First I took time from the device using JavaScript’s new Date method. Then I updated that time every second. Hours, minutes, and seconds can be seen here. With this, you will know how to make a digital clock in AM / PM format

Digital Clock using JavaScript

You can easily create a digital clock if you have a basic knowledge of JavaScript. In this tutorial, I have explained each code with a complete image. It is designed with HTML and CSS. JavaScript code has been used to make it work.

Below I have given a live demo so that you can understand how this project works.

See the Pen
Digital Clock Javascript by Foolish Developer (@fghty)
on CodePen.

As you can see above, I first designed the web page with the help of CSS code. Then I made three boxes here. Those three boxes will help show the time in hours, minutes, and seconds, respectively. After all, the clock has been activated using JavaScript.

Step 1: Design a web page to create a digital clock

I have designed the background of the webpage with the help of the CSS code below. On this webpage, I created Digital Clock using JavaScript. Here I have used linear-gradient in the background to use beautiful gradient color on the page.

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: linear-gradient(
        135deg,
        #9cc0e0 50%,
        #1b72b2 50%
    );
}
Design a web page to create a digital clock

Step 2: Basic structure of JavaScript digital clock

Now we have created the basic structure of this digital clock using HTML and CSS code. I have added all the time in this structure. This structure is not visible as no background color is given here.

<div class=”clock”>
</div>
.clock{
    width: 550px;
    height: 150px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Step 3: Information of digital clock

 Now we have created three small boxes for viewing time using the following codes. As you can see above, this project (Digital Clock using JavaScript & CSS) has three small boxes for viewing hours, minutes, and seconds. I have created the basic structure of those boxes with the help of HTML and CSS code below. 

The length of each box is 150 and the background color is white. Here align-items: center is used so that the text used in it is located in the middle of the box. Box-shadows have also been used to make the boxes brighter and more attractive.

 <div id=”hour”>00</div>
   <span>:</span>
 <div id=”minute”>00</div>
   <span>:</span>
 <div id=”seconds”>00</div>
.clock div{
    position: relative;
    background-color: #ffffff;
    height: 100%;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ‘Open Sans’,sans-serif;
    font-size: 60px;
    color: #202020;
    border-radius: 5px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    letter-spacing: 3px;
}

The colon symbols have been designed using this small amount of CSS code below. Color White has been used and font-size: 60px has been used to increase the size.

.clock span{
    font-weight: bolder;
    font-size: 60px;
    color: white;
}
Information of digital clock

Step 4: Activate the digital clock using JavaScript

Now is the time to implement Digital Clock with JavaScript. Above we have only created the basic structure of this digital clock. If you know basic JavaScript, you can easily understand the following JavaScript code. Here I have given a complete explanation of each code.

First I set the constants of the id of the hour, minute, and second boxes one by one. Because we know that no class or ID function can be used directly in JavaScript.

var hour = document.getElementById(“hour”);
var minute = document.getElementById(“minute”);
var seconds = document.getElementById(“seconds”);

The following code will work. I have implemented this project (Digital Clock using JavaScript). If you do not understand the code structure below, be sure to follow the explanation.

var clock = setInterval(
    function time(){
      var date_now = new Date();
      var hr = date_now.getHours();
      var min = date_now.getMinutes();
      var sec = date_now.getSeconds();
      if(hr < 10){
          hr = “0” + hr;
      }
      if(min < 10){
          min = “0” + min;
      }
      if(sec < 10){
          sec = “0” + sec;
      }
      hour.textContent = hr;
      minute.textContent = min;
      seconds.textContent = sec;
    },1000
);

Explain the JavaScript code

First I took time from the device using JavaScript’s new Date method. Then I saved the received time in a constant called date_now.

var date_now = new Date();

Then I similarly used the following three code lines to take the time of hours minutes and seconds. We have store hours, minutes, and seconds in hr, min, sec constants, respectively.

 var hr = date_now.getHours();
 var min = date_now.getMinutes();
 var sec = date_now.getSeconds();

 Using the following three-line code I have added a zero to the single number time case. Originally made by a single number when it was below 10. It doesn’t look good to see a number. So the following three codes have been used to add a zero to it. Here I have given the condition that when the time of this hour, minute, and second is less than 10 then one zero will be added to it.

if(hr < 10){
      hr = “0” + hr;
}
if(min < 10){
      min = “0” + min;
}
if(sec < 10){
      sec = “0” + sec;
}

Now I’ve used textContent to display these times in a pre-made box.

hour.textContent = hr;
minute.textContent = min;
seconds.textContent = sec;

 If you look at the JavaScript structure above you will understand that I have used 1000 at the end of it all. You may be wondering why 1000 has been used here. This 1000 helps to update the time every 1000 milliseconds. Since seconds are used here, this time needs to be updated every second. Hopefully, you know 1 second equals 1000 milliseconds.

 function time(){
  
 },1000
Activate the digital clock using JavaScript

Hopefully from the above tutorial, you will fully learn how this digital clock is made using JavaScript, HTML, and CSS. Below I have provided a button to download the source code.


Javascript clock with AM/PM format

Javascript clock with AM/PM format

If you want to add am and pm format with a digital clock then the following design will help you. The AM / PM option in the digital clock helps to understand the time perfectly and beautifully.

We have already shared the complete step-by-step tutorial of this design with you. Below is a live demo from which you can understand how this project (Digital Clock using JavaScript) works. If you are a beginner, you can watch this tutorial.

See the Pen
digital clock 3 by Foolish Developer (@fghty)
on CodePen.


Javascript Digital Clock with Date

Javascript Digital Clock with Date

If you want to make JavaScript digital watch with the date then this design will be perfect for you. It is a beautiful design where everything over time, date, month, the week can be seen beautifully. I used pure JavaScript, HTML, and CSS to make it. Below is a live demo that will help you learn how this JavaScript digital clockworks.

If you are a beginner and want this design tutorial then you can search my blog site. Because I have already shared with you the complete step-by-step tutorial on this design. There you have shared the method of making each element step by step.

See the Pen
Digital Clock Javascript by Foolish Developer (@fghty)
on CodePen.

Hopefully from this tutorial, you have learned how to make a digital clock using Html CSS, and javascript. As I said before I have shown many more types of JavaScript digital clock designs. You can look at those designs to know better.