shooting card

For the shooting card application

by batcave

HTML

<div class="calc">
  <div class="calc-score_container">
    <div class="calc-score_scores" data-shots="0"></div>
    <div class="calc-score_total">0</div>
  </div>
  <div class="calc_row">
    <div class="calc_item" data-value="1">1</div>
    <div class="calc_item" data-value="2">2</div>
    <div class="calc_item" data-value="3">3</div>
  </div>
  <div class="calc_row">
    <div class="calc_item" data-value="4">4</div>
    <div class="calc_item" data-value="5">5</div>
    <div class="calc_item" data-value="6">6</div>
  </div>
  <div class="calc_row">
    <div class="calc_item" data-value="7">7</div>
    <div class="calc_item" data-value="8">8</div>
    <div class="calc_item" data-value="9">9</div>
  </div>
  <div class="calc_row">
    <div class="calc_item" data-value="0">0</div>
    <div class="calc_item calc_item-ten" data-value="10">10</div>
    <div class="calc_item-save" data-save="save">S</div>
    <div class="calc_item calc_item-delete" data-delete="delete">
    </div>
  </div>
</div>

CSS

body {
  background-color: #333 !important;
}

.calc {
  margin: 10px 0 0 10px;
}

.calc_row {
  margin-bottom: 10px;
}

.calc_row:after,
.calc-score_container:after {
  content: "";
  display: table;
  clear: both;
}

.calc-score_container {
  height: 40px;
  line-height: 40px;
  width: 216px;
  margin-bottom: 20px;
}

.calc-score_scores {
  float: left;
  color: #dcdcdc;
  font-size: 21px;
}

.calc-score_total {
  float: right;
  height: 40px;
  width: 80px;
  color: #dcdcdc;
  font-size: 34px;
  text-align: center;
}

.calc_item,
.calc_item-ten,
.calc_item-save {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: transparent;
  border: 1px solid #dcdcdc;
  border-radius: 30px;
  text-align: center;
  font-size: 3em;
  color: #dcdcdc;
  font-family: helvetica;
  float: left;
  margin-right: 10px;
}

.calc_item:hover {
  background-color: #555;
  cursor: pointer;
}

.calc_item-save {
  background-color: aquamarine;
  color: #333;
  display: none;
  cursor: pointer;
}

.done .calc_item-save {
  display: block;
}

.done .calc_item-ten {
  display: none;
}

.done .calc_item {
  border-color: #555555;
  color: #555;
}

.done .calc_item:hover {
  background-color: transparent;
  cursor: default;
}

.done .calc_item-delete {
  border: 1px solid #dcdcdc;
  color: #dcdcdc;
}

.done .calc_item-delete:hover {
  cursor: pointer;
}

JavaScript

calc = {
  init: function() {
    var score = 0;
    var scores = $('.calc-score_scores');
    var total = $('.calc-score_total');
    var counter = $('.calc');

    $('[data-value]').on('click', function() {
      var $this = $(this),
        amountShots = calc.countAmountShots(scores);

      score = parseInt($this.data('value'), 10);

      if (amountShots <= 4) {
        calc.addScore(score, scores);
        calc.addToTotal(score, total);

        if (amountShots == 4) {
          counter.addClass('done');
        }
      }
    });

    $('[data-delete]').on('click', function() {
      var scoresValue = scores.html(),
        scoresArray = scoresValue.split(',');

      if (counter.hasClass('done')) {
        counter.removeClass('done');
      }

      if (calc.countAmountShots(scores) > 0) {
        var scoreToRemove = parseInt(scoresArray.pop(), 10);

        calc.removeScore(scores, scoresArray.toString());
        calc.removeShot(scores);
        calc.removeFromTotal(scoreToRemove, total);
      }
    });
  },

  addScore: function(score, scores) {
    if (!isNaN(score)) {
      if (calc.countAmountShots(scores) <= 0) {
        scores.html(scores.html() + score);
      } else {
        scores.html(scores.html() + ',' + score);
      }

      calc.addShot(scores);
    }
  },

  removeScore: function(scores, newScore) {
    scores.html(newScore);
  },

  addToTotal: function(score, total) {
    var totalSum = parseInt(total.html(), 10);
    if (!isNaN(score) && !isNaN(totalSum)) {
      total.html(totalSum + score);
    }
  },

  removeFromTotal: function(scoreToRemove, total) {
    var totalSum = parseInt(total.html(), 10);
    if (!isNaN(scoreToRemove) && !isNaN(totalSum)) {
      total.html(totalSum - scoreToRemove);
    }
  },

  countAmountShots: function(scores) {
    var shots = parseInt(scores.data('shots'));
    if (!isNaN(shots)) {
      return shots;
    }

    return 0;
  },

  addShot: function(scores) {
    var shots =...