Number Guesser - Vanilla JS, Skeleton

Number Guesser.html

<div class='container'>
  <div id='game' class='row'>
    <p>Guess a number between <span id='min-num'>1</span> and <span id='max-num'>10</span></p>
<input type='number' id='number' placeholder='Enter the number'>

    <input type='submit' value='Try to guess' id='submit'>

    <p id='message'> </p>
  </div>
</div>

number-guesser-vanilla-js-skeleton.markdown

Number Guesser - Vanilla JS, Skeleton

A Pen by Vasilii V on CodePen.

License.

script.js

let num, min, max, counter;
let guessed = false;
let d = "Try to guess";

const randomNumber = () => {
min = document.getElementById('min-num').value;
max = document.getElementById('max-num').value;
num = Math.floor(Math.random() * (max - min + 1)) + min;
//console.log(num);
counter = 0;
};

window.onload = randomNumber();
document.getElementById('submit').addEventListener('click', () => {
  submit.value = d;
  let userinput = Number(document.getElementById('number').value);
  if (!userinput || userinput<min || userinput>max) {
    document.getElementById('message').innerHTML = `Enter the number between ${min} and ${max}`;
    return;
  }
  userinput === num ? guessed = true : document.getElementById('message').innerHTML = 'You\'re wrong. Let\'s try again'
if (guessed) {
  document.getElementById('message').innerHTML = 'You\'re right. Let\'s try again';
  guessed = false;
  submit.value = d;
  return randomNumber();
}
  counter++;
if (counter === 3 && userinput !== num) {
  document.getElementById('message').innerHTML = `Game over. The correct number was ${num}`;
  submit.value = 'Try again?';
  randomNumber();
}  
  
})
                                                                  

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />