Guess the number which is from 1-100. 
<br/>
<div class="form">
<input type="textbox" id="txtBox" class="text-box" autocomplete="off">
<input type="submit" class="btn" id="submitBtn">
</div>
<p class="previous-guesses">Previous Guesses:<span class="guesses"></span></p>
<p class="guess-count"></p>
<p class="guess-text"></p>
<input type="submit" class="reset-btn" value="Reset game">
.disabled{
  pointer-events:none;
}
.reset-btn{
  display:none;
}
.hidden{
  display:none;
}
.visible{
  display:block;
}

// select all elements using querySelector
const btn = document.querySelector('.btn');
const textBox = document.querySelector('.text-box');
const guessText = document.querySelector('.guess-text');
const previousGuesses = document.querySelector('.previous-guesses');
const previousGuessesContent = document.querySelector('.previous-guesses span');
const guessCount = document.querySelector('.guess-count');
const resetBtn = document.querySelector('.reset-btn');
let previousGuessesArray = [];
// focus the text field
textBox.focus();

// random number
const randomNumber = Math.floor(Math.random() * 100)+1;

// Guess the number function 
function guessTheNumber(e){
  let userGuess = parseInt(textBox.value);
  previousGuessesArray = previousGuessesArray.concat(userGuess);
  previousGuessesContent.innerHTML =  previousGuessesArray;
  console.log(previousGuessesArray);
  previousGuessesArray.forEach( item => console.log(item));
  if(previousGuessesArray.length < 10){
    if(randomNumber === userGuess){
      guessText.textContent = 'you are right';
      guessText.style.color = 'green';
      disableAll();
      enableResetBtn();
      previousGuessesArray = [];
    }
    else if(userGuess < randomNumber){
      guessText.style.color = 'red';
      guessText.textContent = 'very low';
      textBox.focus();
    }
    else if(userGuess > randomNumber && userGuess > 100){
      guessText.style.color = 'red';
      guessText.textContent = "I say you to guess numbers from 1 to 100";
      textBox.focus();
    }
    else if(userGuess > randomNumber){
      guessText.style.color = 'red';
      guessText.textContent = "too high";
    }
  }
  else{
    guessText.textContent = 'Game over';
    guessText.style.color = 'red';
    disableAll();
    enableResetBtn();
  }
  textBox.value = '';
}
function resetGame(e){
  enableAll();
  guessText.textContent = '';
  previousGuessesContent.textContent = '';
  previousGuessesArray = [];
  resetBtn.classList.remove('visible');
  resetBtn.classList.add('hidden');
}
function enableAll(){
  textBox.classList.remove('disabled');
  btn.classList.remove('disabled');
}

function disableAll(){
  textBox.classList.add('disabled');
  btn.classList.add('disabled');
}

function enableResetBtn(){
  resetBtn.classList.add('visible');
}

btn.addEventListener('click',guessTheNumber);
resetBtn.addEventListener('click',resetGame);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.