[How to] Setup Google I/O style animated Countdown clock

Google has just launched the Google I/O 2011site and the registrations will commence soon. The agenda shows that a lot of interesting sessions have lined up for the event. To add to all these fun, Google has added a cool animated clock on the home page which will count down to the event date. Vic Gundotra from Google tweeted about the event page on his twitter few hours back. As soon as I saw the animation, I got excited and started digging into the implementation details of the same. To my surprise, Google has not obfuscated their JavaScript as they generally do with their animated doodles. Hence, reverse engineering the counter became an easy task. I have setup a count down clock for the ICC Cricket World Cup 2011 which is happening in India next month. Check it out here.

Steps to setup the counter

• Box2D JavaScript port has been used to bring in the explosion effect. Box2D is a 2D rigid body simulation library for games. You can use it to make objects move in believable ways and make the game world more interactive. More info here.
• Download all the necessary JavaScript files – base.js, box2d.js, io.js
• Change the variable “countdownTo” to the date you are counting down to.
• Include the JavaScript files in the HTML file and write script to initiate the counter. Smart developers always look at the source. You can look at the source of the demo page here. Or, visit this page to have a look at the HTML used in the demo page.

-- Varun