I found this free clip art that looks sort of like the colourful ball in Times Square. (Future project: make a kaleidoscope?) I calculated the difference between the current time and the set date: January 1st, 2015. Since this value was in milliseconds, I set the variables in milliseconds up to days. (This was done by relating milliseconds to seconds, seconds to minutes, … and so on.)
To figure out how many “full” increments of each value there were, I used modulus % to find the remainders. For example, for hours, I did remaining milliseconds % day and then divided by the number of milliseconds in an hour. The result still had to be converted to an integer using Math.floor()! The mathematics was fun because you had to think about the time frames as “stairs” and make your way down to the smallest unit to show, number of seconds left.
I watched my clock on New Year’s Eve but noticed it was 20 seconds ahead of another (very professional looking) website. Then the ball didn’t drop. And the “drop it” button didn’t work. Ahhh, a problem with the code! I got home after a party and took a look. I didn’t add animation support for other browser! Such a silly mistake.
But that doesn’t explain the 20 second difference. Very curious… well, guess it doesn’t hurt to celebrate once and then 20 seconds later. Which is exactly what we did.
Happy New Year!