Daily Code 54 | 🔢 PvP Number guessing with JavaScript
Tags: beginners, daily, javascript
Published: 2024-01-30 16:30:52

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

```html
<!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. 

```html
<!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 🙂