Day 16 – New Year Ball Drop

Wow, 2014 went by quickly! I combined what I learned about getTime() and css animations to make a ball drop for new year’s.

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.

Sad cat.
Sad cat.

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!

Day 16 – New Year Ball Drop


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s