Creating a digital clock

In this tutorial, we will learn how to create a digital clock using javascript. this guide provides clear step by step instructions to easily create a digital clock by using javascript

To create a digital clock first we need to call a function, then within the function we have to create a new date object. From this date object we can extract ‘Hours’, ‘Minutes’ and ‘Seconds’. Finally we can update the clock every second by creating a timer using setInterval() method.

To create a 24 hours digital clock

function updateClock() // to update the clock
     {
      let currentTime = new Date(); //to get the current time
      let hrs = (currentTime.getHours() < 10 ? "0" : "") + currentTime.getHours(); //to display hours and give double digit output
      let mins = (currentTime.getMinutes() < 10 ? "0" : "") + currentTime.getMinutes(); //to display minutes and give double digit output
      let sec = (currentTime.getSeconds() < 10 ? "0" : "") + currentTime.getSeconds(); //to display seconds and give double digit output
      
     console.clear(); //clear the console to continuously update the time
 console.log(hrs +':'+ mins +':'+ sec); //display the current time 
     }
      
     setInterval(updateClock, 1000);//call update function to keep the time updating

In the above code we call a function named updateClock. Inside the function we create a Date object represented by variable currentTime. From this object, extract Hours , Minutes and Seconds using the variables ‘hrs’, ‘mins’, ‘sec’. We also add a ‘0’ at the beginning of  single digit output to ensure all outputs are in the format HH:MM:SS.

We then use setInterval to continuously update the clock every second by repeatedly calling the function updateClock . Here Console.log displays the output and console.clear() ensures that the previous output is cleared before displaying the new output.

creating a 12 hour clock

function updateClock() // to update the clock
     {
      let currentTime = new Date(); //to get the current time
      let hrs = (currentTime.getHours() < 10 ? "0" : "") + currentTime.getHours(); //to display hours and give double digit output
      let mins = (currentTime.getMinutes() < 10 ? "0" : "") + currentTime.getMinutes(); //to display minutes and give double digit output
      let sec = (currentTime.getSeconds() < 10 ? "0" : "") + currentTime.getSeconds(); //to display seconds and give double digit output
      let ampm=(hrs<12)?"am":"pm"; //to display am if hours are less than 12 and pm if hours are greater than 12
      hrs=(hrs%12)||12; //to display 12 instead of 0 at midnight and the reminder when hours are divided by 12 at the remaining times
      
     console.clear();//clear the console to continuously update the time
 console.log(hrs +':'+ mins +':'+ sec +' ' + ampm);//display the current time 
     }
      
     setInterval(updateClock, 1000);//call update function to keep the time updating

In the above code we call a function named updateClock. Within the function we create a date object represented by variable currentTime from which we extract Hours , Minutes and Seconds by using the variables ‘hrs’, ‘mins’, ‘sec’. We also add a ‘0’ at the beginning of single digit output to ensure all outputs are in the format HH:MM:SS.

The variable ‘ampm’ is used to describe whether the time is Am or Pm , it displays Am if the hours are less than 12 and Pm of the hours are greater than 12. We use the logical OR operator to display 12 instead of 0 at the midnight and modulo is used to calculate the reminder when hours are divided by 12 for other times.

We then use a setInterval to continuously update the clock every second by repeatedly calling the function updateClock. Console.log displays the output and console.clear() ensures that the previous output is cleared before displaying the new output.