Score Keeper

index.html

<h1>Score Keeping App</h1>
<h3 >How many to win:<button onclick="increase();"id="plus"class="plus_minus add">+</button><button onclick="decrease();"id="minus"class="plus_minus subtract">-</button></h3>
<h3 id="win">7</h3>

<div class="scores">
  <div class="player p1">
    <h1 id="P1_score"></h1>
    </div>
  <div class="player p2">
    <h1 id="P2_score"></h1>
    </div>
</div>

<div class="buttons">
  <button id="p1">Player1</button>
  <button id="p2">Player2</button>
  <button id="reset">Reset</button>
</div>

score-keeper.markdown

Score Keeper

A Pen by VenomSnake on CodePen.

License.

script.js

var player1_score = 0;
var player2_score = 0;
var win_number = 7;

var reset = 0;

var button1 = document.getElementById("p1");
var button2 = document.getElementById("p2");
var reset = document.getElementById("reset");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");

//initialize score
document.getElementById("P1_score").innerHTML = 0;
document.getElementById("P2_score").innerHTML = 0;
//document.getElementById("win").innerHTML += win_number;
/***end initialize score**/

//click events
button1.onclick = function() {
  player1_score++;
  document.getElementById("P1_score").innerHTML = player1_score;
  if (player1_score == win_number) {
    alert("P1 wins");
    button1.disabled = true;
    button2.disabled = true;
  }
};

button2.onclick = function() {
  // alert("hi");
  player2_score++;
  document.getElementById("P2_score").innerHTML = player2_score;
  if (player2_score == win_number) {
    alert("P2 wins");
    button1.disabled = true;
    button2.disabled = true;
  }
};

reset.onclick = function() {
  //alert("reset");
  var original='<h3 id="win">How many to win:<button onclick="increase();"id="plus"class="plus_minus">+</button><button onclick="decrease();"id="minus"class="plus_minus">-</button></h3>';
  document.getElementById("P1_score").innerHTML = 0;
  document.getElementById("P2_score").innerHTML = 0;
  player1_score = 0;
  player2_score = 0;
  win_number=7;
  document.getElementById("win").innerHTML = win_number;
  button1.disabled = false;
  button2.disabled = false;
};

function increase(){
  win_number++;
  var original='<h3 id="win">How many to win:<button onclick="increase();"id="plus"class="plus_minus">+</button><button onclick="decrease();"id="minus"class="plus_minus">-</button></h3>';
  document.getElementById("win").innerHTML=win_number;
  
}
function decrease(){
  win_number--;
  var original='<h3 id="win">How many to win:<button onclick="increase();"id="plus"class="plus_minus">+</button><button onclick="decrease();"id="minus"class="plus_minus">-</button></h3>';
  document.getElementById("win").innerHTML=win_number;
  
 
}


/*end clicking event*/

style.css

body{
  max-width: 500px;
  margin: auto;
  background-color: #809fff;
}


h1,h3{
  text-align: center;
}

#win{
  color: red;
}

.scores{
  width: 90%;
  height: 120px;;
  background-color: blue;
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.player{
  width: 40%;
  height: 80px;
  /*background-color: red;*/
  margin-top: 20px;
  
}

.player.p1{
  background-color: purple;
}

.player.p2{
  background-color: orange;
}

.buttons{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 50px;
}

button.plus_minus{
  height: 15px;
}

button.plus_minus.add{
  background-color: #8080ff;
}

button.plus_minus.subtract{
  background-color: #bf80ff;
}



button{
  widht: 80px;
  height: 30px;
  
}