How to Develop a Number Guessing Game in JavaScript?
Creating a Number Guessing Game: HTML,CSS & JS
Table of contents
In this article i will help you develop a simple web project titled Number Guessing Game using HTML, CSS and JavaScript.
Final Output
Youtube Video
For detailed explanation of code watch below video.
Code
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Guess Number</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="background-color:#323232;">
<br>
<h1 style="color:white;">
Number Guessing
</h1>
<br>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3">
</div>
<div class="col-lg-6 col-md-6">
<div class="container form">
<p>Guess a number between 1-100</p>
<p>Enter a number below</p>
<p id="chance">Chance Remaining: 5</p>
<input type="number" min="1" max="100" id="userInput">
<button id="btn">Enter</button>
<button id="refresh">Replay</button>
<p id="outputtext"></p>
<p id="replay"></p>
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
</div>
<script src="js/index.js">
</script>
</body>
</html>
CSS
h1
{
color: white;
text-align: center;
}
.form{
background-color: #0f4c75;
border: 5px solid white;
height: 275px;
width:750px;
margin: auto;
text-align: center;
padding-top: 10px;
}
p{
color: white;
font-size: 1.3rem;
}
JavaScript
let btn = document.getElementById('btn');
let number = [Math.floor(Math.random()*100)]
let rfrshButton = document.getElementById('refresh');
let chance = 5;
let low=1;
let high=100;
btn.addEventListener('click',function(){
let input = document.getElementById("userInput").value;
chance = chance -1;
document.getElementById("chance").innerHTML = "Chance Remaining: "+chance;
if(input == number)
{
document.getElementById("outputtext").innerHTML = "You Guessed it right number is "+number;
}
else if (input<number)
{
low = input;
document.getElementById("outputtext").innerHTML = "Wrong: Number is between "+ low + ' & ' +high;
}
else
{
high = input;
document.getElementById("outputtext").innerHTML = "Wrong: Number is between "+ low + ' & ' +high;
}
if(chance==0)
{
document.getElementById("btn").disabled= true;
if(input == number)
{
document.getElementById("outputtext").innerHTML = "You Guessed it right number is "+number;
}
else
{
document.getElementById('outputtext').innerHTML ="You Lost: Number was: "+number;
}
document.getElementById("replay").innerHTML ="Click Replay Button to play Again";
}
})
rfrshButton.addEventListener('click',function(){
window.location.reload();
})
I hope you find this article helpful.
Please don't forget to like, comment and share and you can also check out my other articles. Also, don't forget to subscribe to my newsletter so you can be notified about new articles.
I am looking to get into technical writing so if you want me to write an article then please connect with me on my Twitter handle here.
Let me also know which topic I should write about next.