Create a simple Number Guessing Game in JavaScript
- Subject: Javascript Tutorials
- Learning Time: 30 mins
In this tutorial we will demonstrate how to create a simple Number Guessing Game using JavaScript programming language. To follow this tutorial you can use any code editor you like, we are using the Visual Studio Code because its amazing when coding HTML CSS and JavaScript. This tutorial will build up on the last couple tutorials we have done on this topic. A number guessing is pure and simple, its one of the easiest projects you can do as a beginner programmer and also it helps build the foundation to understanding programming. We will be using HTML, CSS and JavaScript to build this project step by step.
Lesson Objectives –
- Create a JavaScript project from start to finish in VS Code
- Use an external style sheet (CSS) to style the components inside of the HTML page
- Create custom variables and functions
- Create and link a key up function to the input box
- Check if the values being passed to the code is a number
- Change values from the JavaScript code to the HTML element
- Show custom messages to the user
Video Tutorial –
style.CSS source code –
html, body
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #6a6c6d;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#main
{
width: 60%;
display: block;
margin: auto;
text-align: center;
align-items: center;
border-radius: 20px;
border: 2px solid black;
margin-top: 50px;
background-color: wheat;
}
input
{
padding: 10px;
margin: 10px;
border-radius: 10px;
font-size: 18pt;
text-align: center;
display: block;
margin: auto;
box-shadow: 0px 10px 14px -7px #6a6c6d;
text-shadow: 0px 1px 0px #6a6c6d;
}
button
{
font-size: 15px;
width: 140px;
height: 50px;
border-width: 1px;
color: #fff;
border-color:#a511c0;
font-weight: bold;
border-radius: 6px;
box-shadow: 0px 10px 14px -7px #6a6c6d;
text-shadow:inset 0px 1px 0px #9b14b3;
background:linear-gradient(#c123de, #a20dbd);
margin: 20px;
}
button:hover
{
background: linear-gradient(#a20dbd, #c123de);
}
p
{
font-weight: bold;
}
index.html source code – JavaScript code is embedded into the HTML page. In the future tutorials we will demonstrate how to create external JavaScript files and have them embed it into the HTML for this project we don’t need to do that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Guessing Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<h1>MOO ICT Number Guessing Game with JS</h1>
<h2>Guess The Number Between 1 and <span id="number">00</span> </h2>
<input type="text" id="input">
<button onclick="checkInput()">Enter</button>
<p id="message">Message</p>
</div>
<script>
var numberLimit = 30;
var randomNumber = Math.floor(Math.random()*numberLimit);
document.getElementById("number").innerHTML = numberLimit;
function checkInput()
{
var inputNumber = parseInt(document.getElementById("input").value);
console.log(randomNumber);
if(Number.isInteger(inputNumber))
{
if(inputNumber < randomNumber)
{
document.getElementById("message").innerHTML = inputNumber + " is low, go higher";
document.getElementById("input").value = "";
}
else if (inputNumber > randomNumber)
{
document.getElementById("message").innerHTML = inputNumber + " is high, go lower";
document.getElementById("input").value = "";
}
else
{
document.getElementById("message").innerHTML = "You Win, You Guessed Correctly, it was " + inputNumber + ", lets play again";
randomNumber = Math.floor(Math.random() * numberLimit);
document.getElementById("input").value = "";
console.log(randomNumber);
}
}
else
{
document.getElementById("message").innerHTML = "Value entered is not a number, do not use spaces or letters. ";
}
}
document.getElementById("input").addEventListener("keyup", function(e)
{
if(e.key == "Enter")
{
checkInput();
}
}
);
</script>
</body>
</html>