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

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>

#javascript #html5 #css3 #programming #developer