Playing with the Doodle Balls

So back in 2010 (September 7),  Google made this amazing doodle..
Now, the reason I loved this one especially is because they made something so awesome with only javascript!
No flash, no actionscript, nothing fancy.. So it does not have any kind of dependency on activex, adobe flash or silverlight for that matter.. Its an html page that will run on even crappy Internet Explorer! :D

And that day i clearly remember spending half an hour just rolling my mouse over this..

Anyways at that time I wanted to recreate it... to say something that I want..
But because I didnt know much about coding or anything at that time.. after doing a big of google search I sorta just forgot all about it.

But I have always respected and been inspired by the the standards of innovation and commitment the guys at Google/Apple show in whatever work they do.. [Unlike Microsoft and Oracle for that matter.. (Java is a mess!)]

Anyways recently I found this doodle again just by accident..
And I started working on it.. trying to understand how they coded it and then attempting to recreate it..

                                     The Google doodle from Sept 7, 2010

(Since I cannot properly put the javascript codes here.. I had to host it elsewhere and iframe it on this post..
For a better doodle playing experience check out the links I have given below!)
Link to the Google's doodle:
http://ebullient.vacau.com/google.html

                                                            418Sec all the way!!

Link to the my doodle:
http://ebullient.vacau.com/418Sec.html
(I know its not as good as Google's , but then again... I am me.. and Google is too good.. :P )

If anyone wishes to take a look at the source code of the doodle I made, its available for download there on my blogfiles folder:
https://spideroak.com/browse/share/FFA/418sec/

Yes, its just the 418sec.html file.. few lines of html and css and a whole lot of jquery/javascript..
Hint: " The magic happens in the D( ) function. "

I am sure everyone will enjoy playing with this as much as I did.. :D

Countdown in Javascript/ jQuery: Tick Tock

So recently I had to make a simple countdown program for the Intra-Mun that was happening in my school..
So even after joining college I went back to school cause I really missed it as well..

Anyways let me first give some details about the functions:

• Set hour/min/sec
• Start/Pause/Reset(to the last entered time)
• I added two buttons for presets of 30 secs and 1 min.
• remove the input menu with keyboard shortcuts
• And I made keyboard shortcuts for all functions cause I knew i would feel too lazy to click..
• Coded in Javascript/jQuery with some css 
• And after time reaches 0.. there I added a nice pop-up notification!

Here is how the entire page looks like when timer is running:

And then there are lots of keyboard shortcuts.. honestly I added them because I was feeling bored and I wanted to see what else I can do to make it more interesting..
In case the user forgets.. one can always press the "h" or "H" key on the keyboard..
Matthew 7:7 "Ask and it will be given to you.."
Same right here..

A lovely pop-up telling you which key does what

And then there is the input menu of course which arrives when you start or press "M"/"m" to bring it.. or "x"/"X" to get rid of it and clear the screen..

Of course all these are pretty simple.. But I thought since I spent my time on this.. hopefully someone might be able to use this as well in the future.. 

Download from: https://spideroak.com/browse/share/FFA/418sec/Share/

(Yes, I am paranoid with privacy and security.. So screw googledrive and dropbox.. I am trying out SpiderOak.. I am not gonna let NSA have my files no matter how insignificant they are..)

PS.

This is the notification when your time runs out.. ;)