JSFiddle - React, Tailwind, and code Playground

by steven keezer

HTML

<body>
  <div class="container text-center">
    <h1><span id="player1score">0</span> to <span id="player2score">0</span></h1>
    <p>Playing to: <span>0</span></p>
    <input class="highestScore" type="number" value="0">
    <button class="btn btn-xs btn-primary" id="player1">Player One</button>
    <button class="btn btn-xs btn-primary" id="player2">Player Two</button>
    <button class="btn btn-xs btn-danger" id="reset">Reset</button>
    </div>
</body>

CSS

.winner {
  color: #008707;
}

JavaScript

const player1button = document.querySelector("#player1");
const player2button = document.querySelector("#player2");
const resetButton = document.getElementById("reset");
const highestScore = document.querySelector(".highestScore");
let highestScoreDisplay = document.querySelector('p span');
let player1score = 0;
let player2score = 0;
let p1ScoreKeeper = document.querySelector("#player1score");
let p2ScoreKeeper = document.querySelector("#player2score");
let winningScore = 1;
let gameOver = false;

player1button.addEventListener("click", () => {
  if (!gameOver) {
    player1score++;
    if (player1score === winningScore) {
      p1ScoreKeeper.classList.add("winner");
      gameOver = true;
    }
    p1ScoreKeeper.innerText = player1score;
  }
});
player2button.addEventListener("click", () => {
  if (!gameOver) {
    player2score++;
    if (player2score === winningScore) {
      p2ScoreKeeper.classList.add("winner");
      gameOver = true;
    }
    p2ScoreKeeper.innerText = player2score;
  }
});
resetButton.addEventListener("click", () => {
  gameOver = false;
  player1score = 0;
  player2score = 0;
  p1ScoreKeeper.classList.remove("winner");
  p2ScoreKeeper.classList.remove("winner");
  p1ScoreKeeper.innerText = 0;
  p2ScoreKeeper.innerText = 0;
  highestScoreDisplay.innerText = "0"
  highestScore.value = 0;
});

highestScore.addEventListener('change', () => {
  highestScoreDisplay.innerText = highestScore.value;
  winningScore = Number(highestScore.value);
});