<html lang="en">
<head>
    <title>Document</title>
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="container">
       <h3>I am thinking of a number between 1-100.</h3>
       <h3>Can you guess it?</h3>

       <input type="text" placeholder="Num" id="guess"><br>
       <button onclick="play()" id="my_btn">GUESS</button>

       <p id="message1">No. Of Guesses: 0</p>
       <p id="message2">Guessed Numbers are: None</p>
       <p id="message3"></p>
   </div>
   <!--Script-->
   <script src="script.js"></script>
</body>
</html>   
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: linear-gradient(
        to right,
        #7f53ac,
        #657ced
    );
}
.container{
    position: absolute;
    width: 50%;
    min-width: 580px;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    background-color: #ffffff;
    padding: 50px 10px;
    border-radius: 5px;
    display: grid;
    justify-items: center;
    font-family: 'Poppins',sans-serif;
}
h3{
    font-size: 16px;
    font-weight: 600;
}
input[type="text"]{
    width: 90px;
    font-weight: 600;
    color: #663399;
    padding: 20px 0;
    text-align: center;
    margin-top: 30px;
    border-radius: 5px;
    border: 2px solid #202020;
    font-size: 28px;
}
button{
    width: 160px;
    padding: 15px 0;
    border-radius: 5px;
    background-color: #663399;
    color: #ffffff;
    border: none;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 30px;
    outline: none;
}
p{
    font-weight: 400;
}
var msg1 = document.getElementById("message1");
var msg2 = document.getElementById("message2");
var msg3 = document.getElementById("message3");

var answer = Math.floor(Math.random()*100) + 1;
var no_of_guesses = 0;
var guessed_nums = [];

function play(){
    var user_guess = document.getElementById("guess").value;
    if(user_guess < 1 || user_guess > 100){
        alert("Please enter a number between 1 and 100.");
    }
    else{
        guessed_nums.push(user_guess);
        no_of_guesses+= 1;

        if(user_guess < answer){
            msg1.textContent = "Your guess is too low.";
            msg2.textContent = "No. of guesses: " + no_of_guesses;
            msg3.textContent = "Guessed numbers are: " +
            guessed_nums;
        }
        else if(user_guess > answer){
            msg1.textContent = "Your guess is too high.";
            msg2.textContent = "No. of guesses: " + no_of_guesses;
            msg3.textContent = "Guessed numbers are: " +
            guessed_nums;
        }
        else if(user_guess == answer){
            msg1.textContent = "Yippie You Win!!";
            msg2.textContent = "The number was: " + answer;
            msg3.textContent = "You guessed it in "+ no_of_guesses + " guesses";
            document.getElementById("my_btn").disabled = true;
        }
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.