ScoreKeeper Light – V1.0

 

(Click the image to use it, or go here)

So a few weeks ago, I decided I wanted to build a simple score keeping app for our volleyball games. I needed it to work on either Android or iOS, but I really didn’t want to take the time to write two native apps for each. So I figured doing an HTML app, with jQuery and some Twitter Bootstrap. a little of Twitter Bootstrap, mainly for the button styles, as I found trying to do the layout in Bootstrap was too much work, for such a simple app. The HTML is simply a few divs, with references for bootstrap, here’s the important part of the body (download the zip):

(from score.html)

 <div class="container">
 
 
        <section>
            <div class="score away">
                <div class="points">
                    0
                </div>
 
            </div>
        </section>
        <section>
            <div class="score home">
           <div class="points">0</div>
            </div>
        </section>
 
        <section>
               <div class="row-fluid show-grid">
                   <div class="scoring-buttons bleft">
                       <button class="btn-large plus">+</button>
                       <button class="btn-large">-</button></div>
                   <div class="scoring-buttons bright">
                       <button class="btn-large plus">+</button>
                       <button class="btn-large">-</button></div>
                 </div>
                   <div class="scoring-buttons bcenter">
                       <button class="btn-large">reset</button>
                 </div>
               </section>
    </div>

And the CSS, is fairly simple, I set pretty much everything to absolute so it attaches itself to the screen despite device dimensions: (From score.css)

.score
{
    border: 2px solid black;
        font-size: 100px;
        height: 100%;
 
        position: absolute;
        text-align: center;
        top: 0;
        width: 50%;
}
.away
{
    left: 0;
}
.home
{
    right: 0;
}
.points
{
    position: relative;
        top: 50%;
}
.scoring-buttons
{
 
    position: absolute;
    bottom: 0pt;
 
}
.bleft
{
    left: 0pt;
}
.bright
{
    right: 0pt;
}
.bcenter
{
    right:50%
}

And the jQuery, it’s not the cleanest but it gets the job done, and took all of five minutes to put together (from score.js):

/**
 * Created by IntelliJ IDEA.
 * User: jbonfante
 * Date: 5/10/12
 * Time: 11:16 AM
 * To change this template use File | Settings | File Templates.
 */
var scoreAway = 0;
var scoreHome = 0;
 
$(document).ready(function(){
   $(".scoring-buttons button").click(function(event)
   {
       var operation = $(event.target).hasClass("plus");
       if($(event.target).parent().hasClass("bleft"))
       {
           if(operation)scoreAway++;
           else if(scoreAway != 0)
           {
               scoreAway--;
           }
           $(".away .points").html(scoreAway.toString());
       }
       if($(event.target).parent().hasClass("bright"))
      {
          if(operation)scoreHome++;
          else if(scoreHome != 0)
          {
              scoreHome--;
          }
          $(".home .points").html(scoreHome.toString());
      }
       if($(event.target).parent().hasClass("bcenter"))
      {
          scoreHome = 0;
          scoreAway = 0;
          $(".home .points").html(scoreHome.toString());
          $(".away .points").html(scoreAway.toString());
      }
   })
 });

 
Enjoy.