JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <p>
    I'm thinking of a number between 1 and 100, try to guess it! </br>
  </p>
  <div id="hints"></div>
</body>

CSS

#hints {
  white-space: pre-line;
}

JavaScript

var number = Math.floor(Math.random() * 100 + 1);
//guess variable to store the guessed number by user
var guess;
//output to store output to the user
var output;
//if the user guessed the number or not, initialize it to false
var guessed = false;
var elHints = document.getElementById('hints');

//do/while loop, while condition is based on if the user NOT guessing the number (e.g. guessed == false)
do {
  guess = prompt("Think of a number between 1 and 100, what is your number?");
  elHints.textContent += "You guessed the number " + guess + '\n';
  if (guess > number) {
    elHints.textContent += "You guessed too high, think smaller" + '\n';
    guessed = false;
  } else if (guess < number) {
    elHints.textContent += "You guessed too low, think bigger" + '\n';
    guessed = false;
  } else {
    alert("You guessed the right number!")
    guessed = true;
  }
}
while (guessed === false);