Recreating the Union Square Clock with Javascript

On 14th street, just south of Union Square there’s a great big digital clock on the side of a building… well, the first time you see it you may not know it’s a clock, but it is.

(Photo by flicker user jStanley)

A photo probably doesn’t do it justice, you should probably watch a video to get the full experience.  To the uninitiated, it’s unclear what this rapidly-changing series of 15 numbers represents. It’s actually 2 clocks, one counting the time that’s passed so far today, and one showing how much time is left in the day.

To read it, start at the left: 2 digits for hours, 2 digits for minutes, 2 digits for seconds, 1 digit for 10ths of a second, 1 digit for 100ths of a second.  The right side is in reverse order, counting down: 1 digit for 10ths of second, 2 digits for seconds, 2digits for minutes, 2 digits for hours.

I saw this last night and thought it would be a fun little javascript programming project to replicate this clock on the web… so I did it:

You can link to it on github pages here.  It’s responsive, so the numbers should scale for whatever device you load it on.

It’s fairly simple, and just uses a lot of javascript’s built-in date methods, with a few custom functions to deal with formatting.  An interval runs every 10th of a second and figures out what should be shown.  Check out the code on github.

I can’t wait to load it on my phone form Union Square to check my work.

Thanks for reading!