Table of Contents
Number Guessing Game Javascript | Guess Number Javascript
Welcome🎉 to Code With Random blog. This blog teaches us how we create a Number Guessing Game. We use HTML, Css, and javascript for the Number Guessing Game. I hope you enjoy our blog so let’s start with a basic HTML structure for the Number Guessing Game.
HTML Code
<!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">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>Guess Number</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<main>
<h1>Guess My Number</h1>
<p id="header">I'm a number between 1 and 100</p>
<h4># of times you've guessed:<p id="guesses"></p></h4>
<form id="thegame" action="" method="get">
<fieldset>
<input type="text" pattern="\d*" id="guess" maxlength="3" />
<input type="submit" value="Guess" />
</fieldset>
</form>
<a href="#">New game</a>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="app.js"></script>
</body>
</html>
There is all the HTML code for the Number Guessing Game. Now, you can see an output with a Number Guessing Game then we write javascript for the Number Guessing Game.
Output
CSS Code
html, body {
padding: 25px 0;
margin: 0;
font: normal 16px "Helvetica Neue", Arial, sans-serif;
text-align: center;
color: #16997c;
background: url("http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
main {
display: block;
max-width: 400px;
min-width: 250px;
padding: 20px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
box-sizing: border-box;
}
@media (max-width: 480px) {
main {
width: 90%;
}
}
h1 {
color: #d35400;
}
fieldset {
padding: 0 0 25px 0;
margin: 0;
border: none;
}
input[type="text"] {
width: 40px;
height: 40px;
padding: 10px;
margin: 0 0 20px 0;
font: normal 20px "Helvetica Neue", Arial, sans-serif;
text-align: center;
border: none;
box-sizing: border-box;
}
input[type="submit"] {
display: block;
width: 50%;
margin: 0 auto;
text-align: center;
padding: 15px 0;
font: normal 20px Helvetica, Arial, sans-serif;
color: #ffffff;
text-shadow: 1px 1px 5px rgba(80, 80, 80, .8);
border: none;
background: linear-gradient(to bottom, #f39c12 0%, #d35400 100%);
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
}
a {
color: #d35400;
font-size: 1.4em;
text-decoration: none;
font-weight: bold;
}
#guess {
width: 90px;
}
Css Updated output
Javascript Code
$(document).ready(function() {
var answer = Math.floor(Math.random() * 100) + 1;
console.log(answer);
var guess_count = 0;
console.log(guess_count);
// on submit even for the guess
$("form").on("submit", function(e) {
e.preventDefault();
var guess = +$("input#guess").val();
console.log(guess);
guess_count++;
$("#guesses").text(guess_count);
// comparisons to see if guess is right
if (guess > answer) {
var high_message = "My number is less than " + guess;
$("#header").text(high_message);
} else if (guess < answer) {
var low_message = "My number is greater than " + guess;
$("#header").text(low_message);
} else {
var congrat_message = "Congratulations " + guess + " is the number";
$("#header").text(congrat_message);
}
});
$("input:text").focus(function(){$(this).val("")});
// on click event to reset the game
$("a").on("click", function(e) {
e.preventDefault();
answer = Math.floor(Math.random() * 100) + 1;
$("p").text("Guess a number from 1 to 100");
console.log(answer);
guess_count = 0;
})
});
Final output
Now that we have completed our javascript section, our updated output with javascript. Hope you like the number guessing game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
This post teaches us how to create a number guessing game using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code By – Luke Genco
Check out more…..