script.js

let randomNumber = (parseInt(Math.random()*100+1))

const submit=document.querySelector('#subt')
const userInput=document.querySelector('#guessField')
const guessSlot=document.querySelector('.guesses')
const remainng=document.querySelector('.lastResult')
const lowOrHi=document.querySelector('.lowOrHi')
const startOver=document.querySelector('.resultParas')

const p= document.createElement('p')

let prevGuess= []
let numGuess = 1

let playGame = true;

if(playGame){
    submit.addEventListener('click',function(e){
        e.preventDefault();
        const guess=parseInt(userInput.value)
        console.log(guess);
        
        validateGuess(guess);

    })
}

function validateGuess(guess){
    if(isNaN(guess)){
        alert(`Please enter the valid number`)
    }
    else if(guess<1){
        alert(`Please enter the valid number`)
    }
    else if(guess>100){
        alert(` Less than 100 Please enter the  number`)
    }
    else{
        prevGuess.push(guess)
        if(numGuess===11){
            displayGuesss(guess)
            displayMessage(`Game over. Random number was ${randomNumber}`)
            endGame();
        }
        else{
            displayGuesss(guess)
            checkguess(guess)

        }
    }
}

function checkguess(guess){
    if(guess===randomNumber){
        displayMessage(`You guess the number right`)
        endGame()
    }
    else if(guess<randomNumber){
        displayMessage(`Number is too low`)
    }
     else if(guess>randomNumber){
        displayMessage(`Number is too high`)
    }
}

function displayGuesss(guess){//claeaner guess
    userInput.value=''
    guessSlot.innerHTML+=   ` ${guess},  `
    numGuess++;
    remainng.innerHTML=`${11-numGuess}`
}

function displayMessage(message){
    lowOrHi.innerHTML=`<h2>${message}<h2/>`
}

function endGame(){
    userInput.value=''
    userInput.setAttribute('disabled','')
    p.classList.add('button')
    p.innerHTML=`<h2 id="newGame">Start new game <h2/>`;
    startOver.appendChild(p)
    playGame=false;
        newGame()
}

function newGame(){
    const newGameButton=document.querySelector('#newGame')
    newGameButton.addEventListener('click', function(e){
     randomNumber = (parseInt(Math.random()*100+1))
        prevGuess=[]
        numGuess=1
        guessSlot.innerHTML=''
       remainng.innerHTML=`${11-numGuess}`
       userInput.removeAttribute('disabled')
       startOver.removeChild(p)
        playGame=true;


    })
}