Guessing Game

Guessing Game

it is the interesting game made with HTML, CSS & Javascript. Here in this Game you just have to enter the number of your choice the page will say you whether the number of greater or smaller than the number to be guessed so if you entered the correct Number than the page will show you the congratulations message with Number of tries that you have done to guess the Number.

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Guessing Number Game</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="card">
                <div class="top">
                    <h3>Hey! Please Enter Your Lucky Number</h3>
                    <div class="inputs">
                        <input type="number" id="playernumber">
                        <button id="submit">Submit</button>
                    </div>
                </div>
                <div class="middle">
                    Hey! Welcome to CNB Gaming
                    Guess the Number Between 1-100
                </div>
                <div class="bottom">
                    <div class="tries">
                        0
                    </div>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
    </html>

CSS

*{
        margin:0;
        padding: 0;
    }
    body{
        background-color:#ffff;
        overflow: hidden;
    }
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        height:100vh;
    }
    .card{
        height:500px;
        width:500px;
        background-color:#ffff;
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
        border-radius:12px;
        overflow: hidden;
    }
    .card .top{
        background-color:#3A3845;
        height:150px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .card .top h3{
        padding-top:4%;
        color:white;
        font-family:Dejavu sans mono;
        font-size:0.9rem;
    }
    .card .top .inputs{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:2%;
    }
    .card .top .inputs input{
        height:40px;
        width:80px;
        border-radius:5px;
        outline:none;
        border:none;
        text-align: center;
        font-size:2rem;
        font-family:poppins;
    }
    .card .top .inputs input::-webkit-inner-spin-button,
    .card .top .inputs input::-webkit-outer-spin-button{
        -webkit-appearance:none;
    }
    .card .top .inputs button{
        height:40px;
        width:80px;
        margin-left:5%;
        border-radius:3%;
        border:none;
        outline:none;
        background-color:#F7CCAC;
        color:#3A3845;
        font-family:poppins;
        cursor: pointer;
    }
    .card .middle{
        background-color:#F7CCAC;
        height:250px;
        display: flex;
        justify-content: center;
        align-items: center;
        color:#3A3845;
        font-family:Gilroy;
        font-size:1.5rem;
        text-align: center;
        font-weight:600;
    }
    .card .bottom{
        background-color:#3A3845;
        height:100px;
        display:flex;
        justify-content: center;
    }
    .card .bottom .tries{
        position:absolute;
        height:100px;
        width:100px;
        border-radius:50%;
        border:10px solid #ffff;
        margin-top:2%;
        background-color:#3A3845;
        text-align: center;
        color:white;
        display: flex;
        font-family:poppins;
        align-items: center;
        justify-content: center;
        font-size:3rem;
        cursor: pointer;
    }

JAVASCRIPT

let playernumber = document.getElementById('playernumber');
    let btn = document.getElementById('submit');
    let remarks = document.querySelector('.middle');
    let tries = document.querySelector('.tries');
    function randomnum() {
        random = Math.floor(Math.random() * 100);
        return random;
    }
    let y = 0;
    let guessnumber = randomnum();
    btn.addEventListener('click', () => {
        if (playernumber.value < 0 || playernumber.value > 100) {
            remarks.textContent = "Enter the Correct Number";
        }
        if (playernumber.value != "") {
            if (playernumber.value != guessnumber) {
                y++;
            }
        } else {
            remarks.textContent = "Please Enter the Number";
        }
        if (playernumber.value < guessnumber && playernumber.value!="") {
            remarks.textContent = "Your Number is Smaller";
            tries.textContent = y;
        }
        else if (playernumber.value > guessnumber) {
            remarks.textContent = "Your Number is Greater";
            tries.textContent = y;
        } else if (playernumber.value == guessnumber) {
            remarks.textContent = `Congrats You Won! You tried \$\{y} times`;
            tries.textContent = y;
        }
    })