A Pen by VenomSnake on CodePen.
Created
February 4, 2018 04:04
-
-
Save HuangStanley050/fa3d8aec40b4f2a304cb6f64ccad4695 to your computer and use it in GitHub Desktop.
Score Keeper
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment