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!