Saturday, June 14, 2014

buttons buttons and counters.

I needed to keep track of some different actions during a basketball game, and needed a simple interface to count the number of times that each action took place. Since I wanted to play with bootstrap, I decided to write a simple html "application" that I could use on my phone.

To begin with, I needed to keep track of 8 actions (blocks, cross-overs, ...). A 2x4 grid seems apt. The buttons needed to be big enough for clicking. One possibility is to use rows with 2 buttons of  col-xs-6 sizes so that it will appear to be 2x4 in every form factor. The buttons are styled as btn-block so that they are big.

Badges are used to count the number of clicks. The initial count is set to zero in the html, and are incremented every time the button is clicked. It uses javascript to increment the counter.

This has been hosted at: http://209.141.44.113/counter1.html. It doesn't save the results, nor does it provide edit capabilities to write your own categories. The source can be viewed using view-source on your browser.




No comments:

Post a Comment