Developing a Responsive Digital Clock Using HTML5, CSS3, and JavaScript

An in-depth explanation on how to create an interesting clock animation using plain vanilla JavaScript and a bit of flex-box.

Photo from Unsplash

I’ve always had a fascination with ornate clocks from vintage grandfather clocks to elaborately decorated timepieces, and other similar artifacts. The clock we’ll be making is nothing like the pretty ones above (rather it looks quite mundane in comparison) however, I had a lot of fun making it and hopefully you will too. Let’s start counting time with HTML, CSS, and JavaScript!

Screenshot from my Codepen featuring the clock we are trying to build

First off, what components do we need in order to build this? Well, we will use flexbox to create the digits and separator between the digits so that it can be made painlessly responsive. We also need a script to constantly obtain the current time and extract the digits for hours, minutes, and seconds. Each clock digit is represented as follows:

<div class="flex-item digit">
     <div class="digit-inner">
          
     </div>
     <div class="digit-inner-lower">
                                        
     </div>
</div>

If you visualize the digits on a digital watch, or picture the digits on traffic light counters or in a calculator, each digit can be approximated as consisting of two boxes (one stacked on top of the other). To display the number nine, for instance, there are no curves used. Instead, the number is comprised of a rigid straight line representation as shown below. So, imagine the number nine to be made of two boxes with the top box having a black border on all four sides, and the box below it having a black border on the right and bottom sides only. To display the number three, the top box has a border on the top, right, and bottom sides; and the bottom box has a border on the right and bottom sides. This is the basis we shall use to make our clock digits too.

Photo from Unsplash for illustration

Here’s the code for the digits denoting the seconds:

<!--Seconds-->
<div class="flex-item digit">
   <div class="digit-inner">
   </div>
   <div class="digit-inner-lower ">
   </div>
</div>
<div class="flex-item  digit">
  <div class="digit-inner ">
  </div>
  <div class="digit-inner-lower">
  </div>
</div>

The next step is to set up the JavaScript for this. We need to get the current time, which is achieved using JavaScript function Date() that offers getSeconds() method which easily provides us with the current second value. This function works on the basis of the system clock of the host machine.

let x = setInterval(function () {
        countDown = new Date();
        //displaying the seconds
        getSecs=countDown.getSeconds();
        let second1=-1, second2=-1
        second1=Math.floor(getSecs/10);
        second2=Math.floor(getSecs%10);
        secondsFirstDigit=document.getElementsByClassName("days7")[0].getElementsByClassName("digit")[4];
        dummy1=secondsFirstDigit.getElementsByClassName("digit-inner")[0]
        dummy2=secondsFirstDigit.getElementsByClassName("digit-inner-lower")[0]
        displayDigit(second1, dummy1, dummy2,secondsFirstDigit)

Once the seconds are obtained, we get the digit in the unit’s place and ten’s place using % 10, storing in second1 and second2 respectively. Then we access the container div in which we have to display seconds (or, in other words, access the box whose border we set and reset to display the seconds). The class names are purely for illustration, this could be anything and it may be done in a more clean, less cumbersome way than what I have done here. “dummy1” represents the top box, and “dummy2” the lower box. “displayDigit” accepts these boxes, the digit to display, and the parent container for the boxes. It sets all borders to “None”, then sets the borders as appropriate for the given digit that is passed. This is essentially a switch operation. This entire sequence needs to be repeated for the hour and minutes digits too. The “setInterval” interval count is set to 1 second. Sample media queries to make it responsive is as follows:

Link together the CSS and JavaScript, add a nice background and you get a simple animated digital clock. Full code is available at my Codepen linked as follows: https://codepen.io/Suchandra_Datta/pen/jOrKBEN

Conclusion

Thanks for reading, do point out any bugs that may have crept in here despite my best efforts as I am still quite a newbie to this field and sincerely trying to improve every day! Feel free to suggest improvements, best practices, and anything else you feel appropriate. Once again, thanks for spending a few minutes of your busy day reading this. Take care and happy coding!