Programming a Clock using Javascript

In this article, we look at how you can implement a real-time clock in javascript. We break down the javascript code used to build a clock so that you can reciprocate it with ease.

However, in case you are a seasoned programmer and are here only for the code, you can dive straight into the solutions. In case you aren’t, I would recommend you follow along step by step.

Table of Contents

1. Overview of Javascript Clock
2. 12 Hours clock using Javascript
3. 24 Hour clock using Javascript

Overview of Javascript Clock:

Clocks are used in a larger variety of websites, however, they are of utmost use in websites where time plays a large factor, eg: Ticket booking websites. However, given javascript supports and lets us manipulate webpages in real-time, building clocks that show real-time data in javascript have become quite straightforward.

Note: In this article, we look closely at the javascript code behind a clock. We do not talk about CSS styling as there are plenty of blogs already available. We rather focus largely on the javascript code.

12 Hours clock using Javascript

As the name suggests, in this section we look at how to build a 12 hours clock in javascript.

Javascript Clock Code (12 hours):

Explanation:

The code may seem intimidating at first, but it’s really quite straightforward once you break it down.

We start the code by defining a function currentTime(), Inside the function, we store the current time in a variable called date.

We do that by using the new Date() object, this object returns the browser’s date along with the time zone. But remember the date object is static, we would have to keep updating it, we will get into the logic behind this later.

let date = new Date();

Once this is done, we extract the hours, minutes, and seconds from the variable (date) using the getHours(), getMinutes() and getSeconds() methods. These methods return the respective values when a date is passed, these values are stored in variables. And lastly, we use a variable session to store the AM or PM tag.

let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
let session = "AM";

Note: Here date in date.getHours() etc is the variable we used to store the date earlier.

The date.getHours method returns values from 0-23, and given we are programming a 12 hours clock we use the following if statement to set 0 as 12.

if(hh === 0){
      hh = 12;
  }

And, we use this if to subtract hours greater than 12 and to overwrite the value of the session to “PM”.

if(hh > 12){
    hh = hh - 12;
    session = "PM";
}

To understand the next bit of code, you need to be familiar with two concepts. Firstly the getHours(), getMinutes() and getSeconds() methods return value 0 to 23, 59, 59 respectively. The key point here is that single digit values are returned as # (eg: 7), however, in our clock, these values need to be displayed as ## (eg: 07).

And to achieve this we use ternary operators. This operator returns a value if the condition is true and another value if it is false. I’ve added the syntax below.

(condition ? if true : if false);

Using this operator, we solve the above problem by adding a 0 before the digit that is less than 10.

hh = (hh < 10) ? "0" + hh : hh;
mm = (mm < 10) ? "0" + mm : mm;
ss = (ss < 10) ? "0" + ss : ss;

Next, we create a variable time to store the time in the desired format.

let time = hh + ":" + mm + ":" + ss + " " + session;

Next, to display the time on the webpage we use the following code.

document.getElementById("clock").innerText = time

Here, document represents the webpage, the .getElementbyId() returns the element whose ID has been passed as the parameter in our case “clock”. And the innertext property sets the context of the node to time.

And lastly, the most important part, remember I mentioned that get date() returns a static value, we use the setTimeout() method to keep it updated. I’ve added the syntax for it below.

setTimeout(function, milliseconds, param1, param2, ...)

This method calls or runs a function after a specified number of milliseconds. Note: 1000ms = 1 second.

We use this method to update the code every second, to keep our clock running.

let t = setTimeout(function(){ currentTime() }, 1000);

And all that’s left is to run the function.

currentTime();

24 Hour clock - Code & Explanation

The code for a 24-hour clock is quite similar to the previous code, we only have one major change.

Explanation:

The only difference here is that we have removed the first if statement, which changed 0 to 12, and in the second if we have removed the condition to minus the hours by 12.

Do let me know your thoughts/ queries in the comments section below. :)