The Clock App on the ICAL home page we meant to be a fun way to show people the different types of work we have done in different parts of the world. On the surface, this little application seems easy.

Each time the page loads the application randomly selects three examples from a list of work projects we have completed. The program displays each project location, sets the clock's current time based on where it was completed, and applies a link to the project description.

• Reflect local time for each project
• Re-size intelligently for responsive web pages
• Actively keep the current time on the loaded page
• Work regardless of the browser time zone
• Show the correct time even if the local computer is wrong
• Display correctly on as many browsers as practical

• How to draw the clock(s)
• How to set and keep accurate time

Randomly picking three projects from a list was pretty simple, drawing the clocks and setting the time wasn't so easy.

A simple digital clock would have been easy, but we wanted an analog clock There are several means of drawing a clock face and hands using style sheets and JavaScript or HTML5. There were so many options that it became difficult to pick one.

The problem became further complicated based on what functionality that versions of different browsers would support. HTML5 was not supported in all cases; different java methodologies were implemented differently; and, triggering style only changes became horribly complicated.

The clocks were made using fixed sized images as backgrounds in html <div> elements.

The hands are painted at one second intervals with JavaScript, and the whole clock gets re-created based on a window re-size handler event. This approach gave us the greatest platform coverage with the least amount of complexity.

After learning how to draw the clocks, that left actually setting the time based on each project location. The first problem was how to actually tell what time it is. There was no easy way to determine if the computer displaying the page was set to the correct time.

The program needed a consistent source for accurate time. Fortunately, most web sites provide the current time in UTC (Greenwich Mean) when they are queried. Querying a stable web site solved that part of the time problem, but it still left two more issues.

The page needed to be able to keep track of the current time without constantly querying web servers every second, and the time needed to be converted to local time for each project.

The solution was to have the application compute the time difference in seconds at local time from when the page first loaded. The difference is then used to adjust the UTC time value originally read from a reliable web server. That value is then adjusted by the geographic region of the project and re-displayed every second.

In this way the page can keep re-setting the clock hands without going back out to the internet every second.

This is typical of the process ICAL uses to implement a business idea. The vision may be simple, but often the implementation isn't.