gabep89/scorekeeper.css

## scorekeeper.css
.winner {
	color: green;
}

## scorekeeper.html
<html>
<head>
	<title>Scorekeeper</title>
	<link rel="stylesheet" type="text/css" href="scorekeeper.css">
</head>
<body>

<h1><span id = "p1Display">0</span> to <span id = "p2Display">0</span></h1>

<p>Playing to: <span>5</span></p>

<input type="number">
<button id="p1">Player One</button>
<button id="p2">Player Two</button>
<button id="reset">Reset</button>

<script type="text/javascript" src="scorekeeper.js"></script>
</body>
</html>

## scorekeeper.js
var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var resetButton = document.getElementById("reset");

var p = document.querySelector("p");
var winningScoreDisplay = document.querySelector("p span");
var numInput = document.querySelector("input");
var p1Display = document.querySelector("#p1Display");
var p2Display = document.querySelector("#p2Display");
var p1Score = 0;
var p2Score = 0;

var gameOver = false;
// if someone wins, the score will stop working
var winningScore = 5;

p1Button.addEventListener("click", function(){
	if(!gameOver){
		p1Score++;
		if(p1Score === winningScore){
			p1Display.classList.add("winner");
			gameOver = true;
		}
		p1Display.textContent = p1Score;
		// ^^text changes within h1 according to score
	}
});

p2Button.addEventListener("click", function(){
	if(!gameOver){
		p2Score++;
		if(p2Score === winningScore){
			p2Display.classList.add("winner");
			gameOver = true;
		}
		p2Display.textContent = p2Score;
		// ^^text changes within h1 according to score
	}
});

resetButton.addEventListener("click", function(){
	reset();
});

function reset(){
	p1Score = 0;
	p2Score = 0;
	p1Display.textContent = 0;
	p2Display.textContent = 0;
	p1Display.classList.remove("winner");
	p2Display.classList.remove("winner");
	gameOver = false;
}

numInput.addEventListener("change", function(){
	winningScoreDisplay.textContent = numInput.value;
	// a change alert is better instead of a click alert here, since you can change the value here by either typing or clicking
	// numInput.value is a string that reflects what's put inside the box
	winningScore = Number(numInput.value);
	reset();
})
	<html>
	<head>
	<title>Scorekeeper</title>
	<link rel="stylesheet" type="text/css" href="scorekeeper.css">
	</head>
	<body>

	<h1><span id = "p1Display">0</span> to <span id = "p2Display">0</span></h1>

	<p>Playing to: <span>5</span></p>

	<input type="number">
	<button id="p1">Player One</button>
	<button id="p2">Player Two</button>
	<button id="reset">Reset</button>

	<script type="text/javascript" src="scorekeeper.js"></script>
	</body>
	</html>
	var p1Button = document.querySelector("#p1");
	var p2Button = document.getElementById("p2");
	var resetButton = document.getElementById("reset");

	var p = document.querySelector("p");
	var winningScoreDisplay = document.querySelector("p span");
	var numInput = document.querySelector("input");
	var p1Display = document.querySelector("#p1Display");
	var p2Display = document.querySelector("#p2Display");
	var p1Score = 0;
	var p2Score = 0;

	var gameOver = false;
	// if someone wins, the score will stop working
	var winningScore = 5;

	p1Button.addEventListener("click", function(){
	if(!gameOver){
	p1Score++;
	if(p1Score === winningScore){
	p1Display.classList.add("winner");
	gameOver = true;
	}
	p1Display.textContent = p1Score;
	// ^^text changes within h1 according to score
	}
	});

	p2Button.addEventListener("click", function(){
	if(!gameOver){
	p2Score++;
	if(p2Score === winningScore){
	p2Display.classList.add("winner");
	gameOver = true;
	}
	p2Display.textContent = p2Score;
	// ^^text changes within h1 according to score
	}
	});

	resetButton.addEventListener("click", function(){
	reset();
	});

	function reset(){
	p1Score = 0;
	p2Score = 0;
	p1Display.textContent = 0;
	p2Display.textContent = 0;
	p1Display.classList.remove("winner");
	p2Display.classList.remove("winner");
	gameOver = false;
	}

	numInput.addEventListener("change", function(){
	winningScoreDisplay.textContent = numInput.value;
	// a change alert is better instead of a click alert here, since you can change the value here by either typing or clicking
	// numInput.value is a string that reflects what's put inside the box
	winningScore = Number(numInput.value);
	reset();
	})