Ok let’s face it, that color changing grid exercise yesterday was way over my head. So today I give myself an easier task:

Exercise: PvP Number guessing

Two players enter numbers between 1 and 100 in an input field each. Then JS generates a random number and who ever of the two players is closer is the winner.

Let’s go!

My Code

Oh well turns out it was the right level of difficulty. I almost made it but in the end couldn’t figure out some issue. Here is my code as far as I got it on my own

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Player 1</h1>
    <input id="js-input-1" type="number">
    <button id="js-button-1">Submit</button>
    <p id="js-p-1">Number submitted: </p>

    <h1>Player 2</h1>
    <input id="js-input-2" type="number">
    <button id="js-button-2">Submit</button>
    <p id="js-p-2">Number submitted: </p>

    <h1>Result</h1>
    <p id="js-result">Number: </p>
    <p id="js-winner">Winner: </p>

    <script>
        let guess1 = '';
        let guess2 = '';

        function playGame(n1, n2) {
            console.log(n1);
            console.log(n2);

            number = Math.floor(Math.random() * 100 + 1);
            document.getElementById('js-result').textContent = `Number: ${number}`;
            guess1distance = parseInt(guess1) - number;
            guess2distance = parseInt(guess2) - number;
            console.log(guess1distance);
            console.log(guess2distance);

            if (guess1distance < guess2distance) {
                document.getElementById('js-winner').textContent = `Winner: Player 1`;
            } else if (guess2distance < guess1distance) {
                document.getElementById('js-winner').textContent = `Winner: Player 2`;
            } else {
                document.getElementById('js-winner').textContent = `Winner: tie`;
            }
        }

        document.getElementById('js-button-1').onclick = function () {
            guess1 = document.getElementById('js-input-1').value;
            document.getElementById('js-p-1').textContent = `Number submitted: ${guess1}`;
            if (guess2 !== '') {
                playGame(guess1, guess2)
            }
        }

        document.getElementById('js-button-2').onclick = function () {
            guess1 = document.getElementById('js-input-2').value;
            document.getElementById('js-p-2').textContent = `Number submitted: ${guess1}`;
            if (guess1 !== '') {
                playGame(guess1, guess2)
            }
        }
    </script>

</body>

</html>

Improvements from ChatGPT Sensei

Yea so here is everything I did wrong

Incorrect Assignment in Player 2's Event Listener:

In the onclick event for js-button-2, you are mistakenly assigning the value of js-input-2 to guess1 instead of guess2.

This should be corrected to: guess2 = document.getElementById('js-input-2').value;

Distance Calculation Logic:

The logic for determining the winner is based on the distance of each guess from the generated number. However, the calculation does not take the absolute value of the difference, which can lead to incorrect results if a guess is higher than the random number.

You should use Math.abs to get the absolute value of the differences:

guess1distance = Math.abs(parseInt(guess1) - number);

guess2distance = Math.abs(parseInt(guess2) - number);

Unnecessary Parameters in playGame Function:

The playGame function has parameters n1 and n2 which are not used. Since you're using the global variables guess1 and guess2, these parameters are not needed.

You can simply define the function as function playGame() { ... }

Oh well at least all the 3 of them are easily understandable and avoidable in the future

Solution

Ok besides those ChatGPT fixes I also added some instructions. Here we go, that’s the solution.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Instructions</h1>
    <ol>
        <li>Both players pick and submit a number</li>
        <li>The computer picks a random number between 1 and 100</li>
        <li>The player who guessed the closer number wins!</li>
    </ol>

    <h1>Player 1</h1>
    <input id="js-input-1" type="number">
    <button id="js-button-1">Submit</button>
    <p id="js-p-1">Number submitted: </p>

    <h1>Player 2</h1>
    <input id="js-input-2" type="number">
    <button id="js-button-2">Submit</button>
    <p id="js-p-2">Number submitted: </p>

    <h1>Result</h1>
    <p id="js-result">Number: </p>
    <p id="js-winner">Winner: </p>

    <script>
        let guess1 = '';
        let guess2 = '';

        function playGame() {
            number = Math.floor(Math.random() * 100 + 1);
            document.getElementById('js-result').textContent = `Number: ${number}`;
            guess1distance = Math.abs(parseInt(guess1) - number);
            guess2distance = Math.abs(parseInt(guess2) - number);

            if (guess1distance < guess2distance) {
                document.getElementById('js-winner').textContent = `Winner: Player 1`;
            } else if (guess2distance < guess1distance) {
                document.getElementById('js-winner').textContent = `Winner: Player 2`;
            } else {
                document.getElementById('js-winner').textContent = `Winner: tie`;
            }
        }

        document.getElementById('js-button-1').onclick = function () {
            guess1 = document.getElementById('js-input-1').value;
            document.getElementById('js-p-1').textContent = `Number submitted: ${guess1}`;
            if (guess2 !== '') {
                playGame()
            }
        }

        document.getElementById('js-button-2').onclick = function () {
            guess2 = document.getElementById('js-input-2').value;
            document.getElementById('js-p-2').textContent = `Number submitted: ${guess2}`;
            if (guess1 !== '') {
                playGame()
            }
        }
    </script>

</body>

</html>

Let’s see, perhaps I build on this exercise the coming days 🙂

Daily Code 54 | 🔢 PvP Number guessing with JavaScript

Exercise: PvP Number guessing

My Code

Improvements from ChatGPT Sensei

Solution