<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>