Tap Race

by OwenMelbz

HTML

<div id="player1" class="player">Tap Count:
  <div class="count">0</div>
</div>
<div id="player2" class="player">Tap Count:
  <div class="count">0</div>
</div>

CSS

.player {
  width:40%;
  height:500px;
  color:white;
  float:left;
  font-family: Arial;
  padding:5%;
  text-align:center;
  font-size:28px;
  font-weight:700;
}
#player1 {
  background-color:red;
}
#player2 {
  background-color:blue
}
.count {
  margin-top:50px;
  font-size:70px;
}
}

JavaScript

$(document).ready(function () {

  $(document).keypress(function (e) {
    //1
    if (e.which == 49) {
      addScore("#player1");
    }
    // 2
    else if (e.which == 50) {
      addScore("#player2");
    }
  });

  function addScore(player) {
    var count = $(player+' .count').text();
    count = parseFloat(count);
    count++;    
    if(count == 100){
      $(player+' .count').text(count);
      var p1 = $('#player1 .count').text();
      var p2 = $('#player2 .count').text();
      p1 = parseFloat(p1);
      p2 = parseFloat(p2);
      var diff = p1-p2;
      alert(player+' wins by '+diff);
    }
    else if (count > 100){
      return false;
    }
    else {
      $(player+' .count').text(count);
    }
  }

});