I've taken up Archery at The Witchford Archers and I love it. I've only been doing it for a wee while but I'm already twitched about calculating my score after each round... I did try really hard to work on my mental arithmetic but clocked I was doing really quite badly (just check my Luminosity score for evidence of that ;-)). Anyway, I got to thinking and wrote http://drmsite.co.uk/score/, it's dead simple but I'm gonna improve it and use Firebase as a backend for persistent storage so I can grab the results later on a datacard type of thing... because why wouldn't you?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Score</title> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/> <style> container { width: 100%; display: inline-block; } block { display: inline-block; width: calc(32% - 10px); height: 200px; margin: 10px; background: #eee; float: right; text-align: center; font-size: 10em; cursor: pointer; } block.score:hover { background-color: #9e9e9e; color: #fff; transition-property: background-color .2s linear 0s; -moz-transition: background-color .2s linear 0s; -webkit-transition: background-color .2s linear 0s; -o-transition: background-color .2s linear 0s; } block#roundTotal{ background-color: #fff; width: calc(100% - 30px); cursor: default; } .glyphicon{ margin-top: 0.2em; } #content{margin: 0 auto;} </style> </head> <body> <container> <block id="roundTotal">0</block> <block class="num score" data-num="9">9</block> <block class="num score" data-num="8">8</block> <block class="num score" data-num="7">7</block> <block class="num score" data-num="6">6</block> <block class="num score" data-num="5">5</block> <block class="num score" data-num="4">4</block> <block class="num score" data-num="3">3</block> <block class="num score" data-num="2">2</block> <block class="num score" data-num="1">1</block> <block class=" score" id="btnClr"><span class="glyphicon glyphicon-refresh"></span></block> <block class="num score" data-num="0">M</block> <block class="num score" data-num="10">10</block> </container> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script> <script> var total = 0; var clicks = 0; $(function(){ $(".num").on("click", function(){ var $this = $(this); if($this.hasClass("score")){ clicks++; total += parseInt($(this).data("num"), 10); $("#roundTotal").text(total) if(clicks === 6){ $(".num").removeClass("score"); } } }); $("#btnClr").on("click", function(){ total = 0; clicks = 0; $("#roundTotal").text("0") $(".num").addClass("score"); }); }); </script> </body> </html>
It's hosted on Google Drive but doesn't have to be - if you want to use it either copy and paste it into your own hosting or just use it as is - the backend version will be written elsewhere and I'll leave this as is for a wee while.
No comments:
Post a Comment