Interactive Art: Weird Clock.
Do you have the time?
A clock that lets you choose how to allocate the seconds into minutes, hours, and days! There are 86 400 seconds in a day on earth. That works out to 2^7 × 3^3 × 5^2. So below the clock you’ll see radio buttons letting you set for each of seven 2s, three 3s, and two 5s, whether they make up minutes, hours, or days. Want a 25-hour day? Easy. Move both 5s to day, and move the other values to minutes or hours as you please.
Above the clock is a digital readout. It will tell you the current time in whatever scheme you select, and below that it will show you the scheme itself, with one caveat: days. Days are commonly shown as half-days on an analog clock, and that’s this one works (as long as the total number of hours is divisible by two). The scheme readout will tell you the total number of hours in a day, while the time readout will show you the current hour, and if suffixed by AM or PM it will tell you which half-day you’re in.
I figured it would be cool to build this, and it was. I was also interested in seeing how I could integrate a simple project like this into a blogpost. That had its own challenges, including making sure it would fit within the normal flow of a post. Originally I had hard-coded the size of things, but ultimately reworked it so that only the #clockapp‘s width is decided, and everything else adjusts off that.
Some implementation details.
I decided to use list elements (ol and ul) for the dial pips shown on the clockface. That had its own challenges, like needing to create and hide numeric list-items so that the list counter would still count them. It probably would have been simpler not to use lists for this, but shrug.
I also wrote code to skip some pips or numbers, to keep the dials from becoming overwhelmed if you make any of the units very big. That mostly works, but it can be slightly confusing as to whether a hand between pips is pointing to actual whole parts or is simply between pips. Ultimately they’re the same thing, just one is integers and one isn’t, but it would have been nice to know. I decided not to bother trying to refine the dials at a certain point, feeling like they were good enough.
I made moderate efforts to clean-up the code, as well as to make the UI accessible. The latter is always a tough effort for several reasons. For one, I don’t have a screen reader so I don’t actually test the experience. For another, it’s hard to say what would be the most accessible alternative.
In this case I hide the analog clock (via aria-hidden), leave the digital one, and leave the controls, but my guess is that navigating the block of radio inputs would get annoying on a screen reader. (I briefly looked around the web, as clock apps and implementations are numerous, but I didn’t find any that obviously did a good job at accessibility, so I used my best judgment.)
Animations.
If you want, you can set clock.animated = true; in the console and see what animation looks like, but it’s a bit buggy. The main problem there is that transition animations in CSS regard a rotation change that decreases in value to be a counter-clockwise animation, with no way to override it. So to make a simple clock that animates, your best bet is to always increment the rotation, but that means that if you get desynchronized (if the browser lags), it won’t catch up, unless you add even more logic to check for desynchronization, which I didn’t want to bother with.
I did make an attempt to have a non-perpetually-incrementing animated version, where I would have it drop to the lowest equivalent rotation between animations (and turning the transition animation off for those ticks), but I couldn’t get that to work reliably. So I ultimately opted to have animation off by default. This means the non-animated code does the simple thing, while the animated does it the incrementation way.
It would be nice if there were a CSS property to specify. Something like transition-rotation-direction with options of (auto|clockwise|counter-clockwise|reverse|random) where auto uses the current default, reverse uses the opposite of the default, clockwise and counter-clockwise would do what they say, and (because CSS needs more random options), random would flip a coin.
Overall, making a web clock is pretty simple, but this was still fun. I like being able to see what a clock would look like with 10-second minutes or 1920 hours in a day. And now you can see it, too.