<!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";
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.