DEV Community

Cover image for Simple Digital Clock using javascript
Shantanu Jana
Shantanu Jana

Posted on

Simple Digital Clock using javascript

In this article I am going to show you how to create Simple Digital Clock using JavaScript code. Earlier I made one more digital clock with date

I made this design in a very simple way. Where basically a small amount of CSS code, one line HTML code and some amount of JavaScript have been used. First I took the time from the device with the help of JavaScript code. Then I have arranged to update it every second and show it in the web page.

I have shown step by step done here. As a result, if you are a beginner, you can easily understand how to make this Simple Digital Clock.

Step 1: Design the web page

First of all I designed the web page using a small amount of CSS code below. Here we have set the background color of the webpage as blue and the height as 100vh.

body{
    margin-top: 200px;
    height: 100vh;
    background: #2477b7;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Step 2: Create the basic structure of the digital clock

Now I have created the basic structure of this digital watch using the following HTML and CSS code. Here basically I used one line HTML code.

The following codes have been used to design the digital watch. Here I have used font-size: 60px to make the text a bit bigger. Here the digital watch is in a box. I used the height of that box is 100 pixels and the width: 400px. Here I have used black as background-color.

I used a white border which further enhanced its beauty. text-align: center is used to display time texts in the middle of the box.

<div id="clockDisplay" class="clockStyle"></div>
Enter fullscreen mode Exit fullscreen mode
 #clockDisplay{
    margin:0px auto;
    width: 400px;
    background-color: #1E1E1E;
    border: 5px solid #ededee;
        box-shadow: 0 20px 30px rgba(0,0,0,0.2);
        height: 100px;
    color: #2ed9f7;
        padding-top: 30px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:60px;
    text-align: center;
    letter-spacing: 2px;

}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Step 3: Activate the clock with JavaScript code

We have designed the above and now we will implement this digital clock with the help of JavaScript. I received time from the device using the new Date () method. Then we store it in a variable called currentTime.

Similarly, we get hours, minutes, and seconds from the device using getHours (), getMinutes (), and getSeconds (). Then we store the received times in variables called h, m, s respectively.

 var currentTime = new Date();
 var h = currentTime.getHours();
 var m = currentTime.getMinutes();
 var s = currentTime.getSeconds();
Enter fullscreen mode Exit fullscreen mode

Now I have created the options of AM and PM here. First I saved am by default in a variable called diem. Then added PM through the condition below. In other words, there are some conditions below. If those conditions match then PM will be used instead of AM.

   var diem = "AM";

     if(h == 0){
     h = 12;
     }else if(h > 12){
     h = h - 12;
     diem = "PM"
     }
Enter fullscreen mode Exit fullscreen mode

Now I have added zero in the case of a number of times. Many times we see a number of times as an example 02:09:04 in this case one by one 0 has been used. The following codes have been used to add zeros before that time.

Here the condition is given that when the time of the hour, minute, and second will be a number i.e. less than 10 than zero will be added to that time.

   if(h < 10){
     h = "0" + h;
    }
    if(m < 10){
     m = "0" + m;
    }
    if(s < 10){
     s = "0" + s;
    }
Enter fullscreen mode Exit fullscreen mode

Now I have set a constant of clockDisplay. clockDisplay is the digital clock ID function that I added to the HTML code. Since we cannot use any ID or class function directly in JavaScript, I have set a constant of it.

 var myClock = document.getElementById('clockDisplay');
Enter fullscreen mode Exit fullscreen mode

Now I have formatted how to view time in a webpage using textContent. Here I first gave the option to see the time in hours, minutes, and seconds and used a colon (:) in between each time. At the end of it all, I added the option of AM and PM.

 myClock.textContent = h + ":" + m + ":" + s + " " + diem;
Enter fullscreen mode Exit fullscreen mode

Now using setTimeout I have been instructed to update this digital clock every 1000 milliseconds or 1 seconds.

setTimeout('renderTime()', 1000); 
Enter fullscreen mode Exit fullscreen mode

Alt Text

Final Javascript code

Below I have given the complete JavaScript code which will help you to better understand the structure of JavaScript code.

  function renderTime(){
    var currentTime = new Date();
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();
    var diem = "AM";

    if(h == 0){
        h = 12;
    }else if(h > 12){
        h = h - 12;
        diem = "PM"
    }
    if(h < 10){
        h = "0" + h;
    }
    if(m < 10){
        m = "0" + m;
    }
    if(s < 10){
        s = "0" + s;
    }
  var myClock = document.getElementById('clockDisplay');
 myClock.textContent = h + ":" + m + ":" + s + " " + diem;
 setTimeout('renderTime()', 1000); 
}
renderTime();
Enter fullscreen mode Exit fullscreen mode

I hope you have learned from this tutorial how I made this Simple Digital Clock with the help of JavaScript.

In the meantime I have made many more types of analog and digital watch designs. You must comment on how you like this article.

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Discussion (0)