JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Number Game</h1>

<div id="mainCont">
    <p>Number:
        <input type="text" id="numberGuess">
        <input type="button" onclick="guessNum();" value="Guess">
    </p>
    <div id="guess"></div>
    <div id="result"></div>
</div>

JavaScript

window.guessNum = function () {
    document.getElementById("result").innerHTML = "";
    var guesses = 10;
    var input = parseInt(document.getElementById("numberGuess").value);
    do {
        //guesses--;
          var randomNum = Math.floor(Math.random() * 20) + 1;
        document.getElementById("result").innerHTML += "<p>I 'll guess " + randomNum + " </p>";

        if (input < randomNum) {
            document.getElementById("result").innerHTML += "<p>Your input is less than the number I'm thinking about. </p>";
        } else if (input > randomNum) {
            document.getElementById("result").innerHTML += "<p>Your input is greater than the number I'm thinking about.</p> ";
        }
         guesses = guesses - 1;
    }
    while (guesses > 0);
    if (input != randomNum) {
        document.getElementById("result").innerHTML += "<p>I can 't figure it out. I guess you win!</p>";
    }
    if (input == randomNum) {
        document.getElementById("result").innerHTML += "<p>Our numbers match. I win!! :)</p>";
        guesses = 0;
    }
}