Monday, August 4, 2014

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.. 


(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.. ;)

No comments:

Post a Comment