<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <div class="name-container text-right d-flex flex-row justify-content-end">
        <h1 class="name-heading p-3">Swaroop Guessing Game</h1>
    </div>
    <div class="container-fluid bg-container">
        <div class="row bg-white">
            <div class="col-12 col-md-6 m-auto bg-white pt-5 pb-5">
                <img class="guess-game-img" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-dynamic-webapps/guess-game-img.png" />
                <p class="text-center game-description">
                    Find out the right number between 1 to 100
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-12 guess-bg-container text-center">
                <h1 class="guess-heading">
                    Guess The Number
                    <img class="guess-number-image" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-dynamic-webapps/guess-number-img.png" />
                </h1>
                <input type="text" class="user-input" id="userInput" />
                <div>
                    <button class="btn btn-info check-guess" onclick="checkGuess()">
                        Check
                    </button>
                </div>
                <p class="game-result" id="gameResult"></p>
            </div>
        </div>
    </div>
</body>

</html>
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");

.name-heading {
    color: #183b65;
    font-family: "Roboto";
    font-size: 14px;
}

.name-container {
    background-color: #dbdbdb;
}

.bg-container {
    background-color: #246db6;
    height: 100vh;
}

.guess-game-img {
    width: 100%;
}

.game-description {
    font-family: "Roboto";
    font-weight: 500;
    font-size: 24px;
    color: #323f4b;
    margin-top: 20px;
}

.guess-bg-container {
    background-color: #246db6;
    padding-bottom: 30px;
    padding-top: 30px;
}

.guess-heading {
    font-family: "Roboto";
    font-weight: bold;
    color: white;
    font-size: 34px;
}

.guess-number-image {
    width: 50px;
}

.user-input {
    width: 300px;
    font-family: "Roboto";
    font-weight: 500;
    font-size: 30px;
    color: #1f2933;
    padding: 10px;
    text-align: center;
}

.game-result {
    font-family: "Roboto";
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    padding: 10px;
}

.check-guess {
    border-radius: 5px;
    padding: 10px;
    margin: 20px;
    width: 170px;
}
let gameResult = document.getElementById("gameResult");
let userInput = document.getElementById("userInput");
let randomNumber = Math.ceil(Math.random() * 100);

function checkGuess() {
    let guessedNumber = parseInt(userInput.value);
    if (guessedNumber > randomNumber) {
        gameResult.textContent = "Too High! Try Again!";
        gameResult.style.backgroundColor = "#1e217c";
    } else if (guessedNumber < randomNumber) {
        gameResult.textContent = "Too Low! Try Again!";
        gameResult.style.backgroundColor = "#1e217c";
    } else if (guessedNumber === randomNumber) {
        gameResult.textContent = "Congractulations! You Got it Right!";
        gameResult.style.backgroundColor = "green";
    } else {
        gameResult.textContent = "Please Provide a Valid Input";
        gameResult.style.color = "red";
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.