<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number Guessing Game</title>
<style>
body {
font-family: sans-serif;
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Guess The Number</h1>
<p>
We have selected a random number
between 1 - 10. See if you can
guess it.
</p>
<div class="form">
<label for="guessField">
Enter a guess:
</label>
<input type="text" id="guessField"
class="guessField">
<input type="submit" value="Submit guess"
class="guessSubmit" id="submitguess">
</div>
<script type="text/javascript">
// Generate a Random Number
let y = Math.floor(Math.random() * 10 + 1);
// Counting the number of guesses
// made for correct Guess
let guess = 1;
document.getElementById("submitguess").onclick = function () {
// Number guessed by user
let x = document.getElementById("guessField").value;
if (x == y) {
alert("CONGRATULATIONS!!! YOU GUESSED IT RIGHT IN "
+ guess + " GUESS ");
}
/* If guessed number is greater than actual number*/
else if (x > y) {
guess++;
alert("OOPS SORRY!! TRY A SMALLER NUMBER");
}
else {
guess++;
alert("OOPS SORRY!! TRY A GREATER NUMBER")
}
}
</script>
</body>
</html>