<html>
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="style.css"> </head>
<body>
<div class="message">Select either Heads or Tails</div>
<button type="button">Heads</button>
<button type="button">Tails</button>
<script>
const coinArray = ["Heads", "Tails"];
let score = [0, 0];
const message = document.querySelector(".message");
const buttons = document.querySelectorAll("button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", tossCoin);
}
function tossCoin(e) {
let playerGuess = e.target.innerText;
let computerToss = Math.floor(Math.random() * coinArray.length);
let computerGuess = coinArray[computerToss];
message.innerHTML = "Computer Selected " + computerGuess + "<br>";
let output;
if (playerGuess === computerGuess) {
output = "Player Wins";
score[0]++;
}
else {
output = "Computer Wins";
score[1]++;
}
message.innerHTML += output + "<br>Player " + score[0] + " Computer " + score[1];
}
</script>
</body>
</html>