Posted on Jun 19, 2021 • Edited on Jun 21, 2021

Create a digital clock with vanilla JS

#javascript #purejavascript #vanillajavascript

Tiny digital clock using JavaScript

In this tutorial, I will show you how to build a digital clock using pure JavaScript.

At the end of this tutorial, we'll have done this clock that in the following image below.

Create the file index.html

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Digital Clock</title> </head> <body> <!--for representing our "hh:mm:ss tt" format.--> <h1 id="time"></h1> <!--Include our external JavaScript file --> <script src="./script.js"></script> </body> </html>

Now we have created starter Html file, let's create the JavaScript file.

Let's first create a reference for the h1 tag.

 var timeEl = document.getElementById('time');

Now we need to create a function that get the current time and format the time as "hh:mm:ss tt"

 function getCurrentTime(){ // Get the current time var dateOBJ = new Date(); // Serialize clock time var time = { hours:dateOBJ.getHours(), minutes:dateOBJ.getMinutes(), seconds:dateOBJ.getSeconds(), tt:'AM' } // convert to 12 time if(time.hours == 12){ time.ampm = 'PM'; }else if(time.hours > 12){ time.hours -= 12; time.tt = 'PM' } // Prepend a 0 on the hours to make double digits if(time.hours < 10){ time.hours = '0'+time.hours } // Prepend a 0 on the Minutes to make double digits if(time.minutes < 10){ time.minutes = '0'+time.minutes } // Prepend a 0 on the Seconds to make double digits if(time.seconds < 10){ time.seconds = '0'+time.seconds } // Format the click time as a string "hh:mm:ss tt" return time.hours + ':' + time.minutes + ':' + time.seconds + ' ' + time.tt }

We've done the first function that gets the current time and return it formatted as "hh:mm:ss tt"

Now, every second get the current time, so, we'll use a built-in method setInterval(function, milliseconds) calls a function or evaluates an expression at specified intervals (in milliseconds).

 // We added this for work on page open var time = getCurrentTime(); timeEl.innerText = time; setInterval(function(){ // GET TIME STRING var time = getCurrentTime(); // Replace the current text timeEl.innerText = time; },1000);

we've finished our Js file it should be looks like.

 var timeEl = document.getElementById('time'); // We added this for work on page open var time = getCurrentTime(); timeEl.innerText = time; setInterval(function(){ // GET TIME STRING var time = getCurrentTime(); // Replace the current text timeEl.innerText = time; },1000); function getCurrentTime(){ // Get the current time var dateOBJ = new Date(); // Serialize clock time var time = { hours:dateOBJ.getHours(), minutes:dateOBJ.getMinutes(), seconds:dateOBJ.getSeconds(), tt:'AM' } // convert to 12 time if(time.hours == 12){ time.ampm = 'PM'; }else if(time.hours > 12){ time.hours -= 12; time.tt = 'PM' } // Prepend a 0 on the hours to make double digits if(time.hours < 10){ time.hours = '0'+time.hours } // Prepend a 0 on the Minutes to make double digits if(time.minutes < 10){ time.minutes = '0'+time.minutes } // Prepend a 0 on the Seconds to make double digits if(time.seconds < 10){ time.seconds = '0'+time.seconds } // Format the click time as a string "hh:mm:ss tt" return time.hours + ':' + time.minutes + ':' + time.seconds + ' ' + time.tt }

Now, try it open the index.html file in a browser and you will see the following below without any style.

Wow, so far so good, now we need to style our pretty clock.
In our index file.

 <style> body{ background-size: cover; height: 100%; font-family: 'Fjalla One', sans-serif; text-align: center; color: #fff; text-shadow: 0px 5px 0px #6d6d6d; font-size: 100px; padding: 30px; background-color: #25beec; } </style>