index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number Guess Game</title>
    <style>
        .replay{padding: 5px;}
        button{
            display: block;
            padding: 10px;
            min-width: 100px;
            font-size: 1.4em;
            font-family: sans-serif;
            border-radius: 15px;
            margin: 10px 0;
        }
        input{font-size: 1.5em;}
        .message{margin: 10px 0;}
    </style>
</head>

<body>
  <h4 class="message"></h4>
    <input type="number">
    <button>Guess</button>
  
</body>

<script>
 let game = {"min":1,"max":10};
 
 document.addEventListener("DOMContentLoaded", function(){
 // game.min = 1; game.max = 10;
 game.output = document.querySelector(".output");
 game.message = document.querySelector(".message");
 game.guessInput = document.querySelector("input");
 game.btn = document.querySelector("button");
 game.btn.addEventListener("click", guessValue);
 init();
});

function guessValue(){
    if (game.btn.classList.contains("replay")){
        init();
        
        game.btn.innerHTML = "Guess";
        game.guessInput.style.display = "block";
        game.btn.classList.remove("replay");
    }else{
    game.guesses++;
    let tempGuess = game.guessInput.value;
    // game.guessInput.value = "";
    tempGuess = parseInt(tempGuess);
    if (isNaN(tempGuess)){
        message(`Please enter a number`, "red");
    }else if (tempGuess===game.num){
       var trato = "attempts"; 
        if (game.guesses == 1){trato = "attempt";}
        message(` 👌  Correct, It took you just ${game.guesses} ${trato} to guess the number ${game.num}. 👏 `,"green");
        gameOver();
    }else{
        let holder = tempGuess > game.num ?
            {"c":"blue","m":`Nope, 👇 is lower than ${game.guessInput.value} 👇`}:
            {"c":"purple","m":`Nope, 👆 is higher than ${game.guessInput.value} 👆`};
        message(holder.m, holder.c);
    }
    game.guessInput.value = "";
  }
}

function gameOver(){
    game.btn.innerHTML = "Restart Game";
    game.guessInput.style.display = "none";
    game.btn.classList.add("replay");
    game.max+=5;
}

function init(){
    game.guesses=0;
    game.num = rndNumber(game.min, game.max);
    let tempMes = `Guess a number from ${game.min} to ${game.max}`;
  message(tempMes, "blue");
}

function rndNumber(min, max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

function message(mes,clr){
    game.message.innerHTML = mes;
    game.message.style.color = clr || "black";
    game.guessInput.style.borderColor = clr || "black";
    game.btn.style.backgroundColor = clr || "black";
    game.btn.style.color = "white";
}
 </script>
</html>