index.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>Guess Number</title>
    <link rel="stylesheet" href="style.css">
</head>

<body onload="init()">
    <img src="Image/bg.jpg" id="bg" alt="logo">
    <main>
        <div id="welcomeScreen">
            <h2>Guess The Random Number Between 1-100</h2>
            <div class="overflow">
                <img src="Image/playbg.jfif" id="playbg" alt="">
            </div>
            <section class="eventSection">
                <p>Select The Difficulty</p>
                <div class="button-wrapper">
                    <button onclick="easyMode()">Easy: 10 attempts</button>
                    <button onclick="hardMode()">Hard: 5 attempts</button>
                </div>
            </section>
        </div>

        <!-- Game Area -->

        <div id="gameArea">
            <div id="newGameButton">
                <button onclick="newGameBegin()">New Game</button>
            </div>

            <section>
                <h3 id="textOutput">Your Guess</h3>
                <input type="number" id="inputBox" min="1" max="100" placeholder="Enter Your Number"
                    onchange="compareGuess()">
            </section>
            <section class="stats">
                <div class="info">
                    <p>Number of previous attempts</p>
                    <span id="attempts"> 0 </span>
                </div>
                <div class="info">
                    <p>Number of previous attempts</p>
                    <span id="guesses"> 0 </span>
                </div>
            </section>

        </div>




    </main>

    <script src="script.js"></script>
</body>

</html>