# Number Guessing Game using JavaScript with Source code

• Post author:

Dive into the realm of interactive fun with our Number Guessing Game project using JavaScript. In this article, we’ll guide you through the development process and provide you with the source code to create an exciting and engaging game, challenging users to test their guessing skills and have a blast in the process.

## index.html

``````
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Number Guessing Game</title>
<body>
<h1>Number guessing game</h1>
<p>Try and guess a random number between 1 and 100.</p>
<p>You have 10 attempts to guess the right number.</p>
</br>
<div id="wrapper">
<form class="form">
<label2 for="guessField" id="guess">Guess a number</label>
<input type="text" id="guessField" class="guessField">
<input type="submit" id="subt" value="Submit guess" class="guessSubmit">
</form>

<div class="resultParas">
<p >Previous Guesses: <span class="guesses"></span></p>
<p >Guesses Remaining: <span class="lastResult">10</span></p>
<p class="lowOrHi"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
``````

## Style.css

``````
html {
font-family: sans-serif;
}

body {
width: 50%;
max-width: 750px;
min-width: 480px;
margin: 0 auto;
}

.lastResult {
color: white;
}

.guesses {
color: white;
}

button {
background-color: purple;
color: #fff;
width: 250px;
height: 50px;
font-size: 30px;
border-style: none;
margin-top: 30px;
/* margin-left: 50px; */
}

#subt {
background-color: yellow;
color: #000;
width: 350px;
height: 50px;
font-size: 30px;
border-style: none;
margin-top: 50px;
/* margin-left: 75px; */
}

#guessField {
color: #000;
width: 550px;
height: 100px;
font-size: 30px;
border-style: none;
margin-top: 25px;
font-size: 45px;
/* margin-left: 50px; */
border: 5px solid #14727d;
text-align: center;
}

#guess {
font-size: 55px;
/* margin-left: 90px; */
margin-top: 120px;
color: #fff;
}

.guesses {
background-color: #12aab4;
}

#wrapper {
box-sizing: border-box;
text-align: center;
width: 750px;
height: 550px;
background-color: #12aab4;
color: #fff;
font-size: 25px;
}

h1 {
background-color: #7b3056;
color: #fff;
text-align: center;
width: 750px;
}

p {
font-size: 20px;
text-align: center;
}
``````

## script.js

``````
//Generate a random number between 1 and 500
let randomNumber = parseInt((Math.random()*100)+1);
const submit = document.querySelector('#subt');
const userInput = document.querySelector('#guessField');
const guessSlot = document.querySelector('.guesses');
const remaining = document.querySelector('.lastResult');
const startOver = document.querySelector('.resultParas');
const lowOrHi = document.querySelector('.lowOrHi');
const p = document.createElement('p');
let previousGuesses = [];
let numGuesses = 1;
let playGame = true;

if (playGame){
e.preventDefault();
//Grab guess from user
const guess = parseInt(userInput.value);
validateGuess(guess);
});
}

function validateGuess(guess){
if (isNaN(guess)){
} else if (guess < 1) {
} else if (guess > 100){
} else {
//Keep record of number of attempted guesses
previousGuesses.push(guess);
//Check to see if game is over
if (numGuesses === 11){
displayGuesses(guess);
displayMessage(`Game Over! Number was \${randomNumber}`);
endGame();
} else {
//Display previous guessed numbers
displayGuesses(guess);
//Check guess and display if wrong
checkGuess(guess);
}
}
}

function checkGuess(guess){
//Display clue if guess is too high or too low
if (guess === randomNumber){
displayMessage(`You guessed correctly!`);
endGame();
} else if (guess < randomNumber) {
displayMessage(`Too low! Try again!`);
} else if (guess > randomNumber) {
displayMessage(`Too High! Try again!`);
}
}

function displayGuesses(guess){
userInput.value = '';
guessSlot.innerHTML += `\${guess}  `;
numGuesses++
remaining.innerHTML = `\${11 - numGuesses}  `;
}

function displayMessage(message){
lowOrHi.innerHTML = `<h1>\${message}</h1>`
}

function endGame(){
//Clear user input
userInput.value = '';
//Disable user input button
userInput.setAttribute('disabled', '');
//Display Start new Game Button
p.innerHTML = `<h1 id="newGame">Start New Game</h1>`
startOver.appendChild(p);
playGame = false;
newGame();
}

function newGame(){
const newGameButton = document.querySelector('#newGame');
//Pick a new random number
randomNumber = parseInt((Math.random()*100)+1);
previousGuesses = [];
numGuesses = 1;
guessSlot.innerHTML = '';
lowOrHi.innerHTML = '';
remaining.innerHTML = `\${11 - numGuesses}  `;
userInput.removeAttribute('disabled');
startOver.removeChild(p);
playGame = true;
})
}
//Allow to restart game with restart button
//Change DIV to a form so it can accept the enter key

//NOTES:
//NaN != NaN
``````