Use the prompt() method to ask the user what the maximum number should be. The prompt should be in a loop with validation as demonstrated previously in the course making sure that the inputted value is a positive number. If the user inputs a decimal, simply round it.
When a valid number is inputted, change the content of the instructions to specify guesses between 1 and N.
When the user presses the guess button, validate the input:
If the guess is not a number, display a message: "That is not a number!" If the guess is out of range (1 to N), display a message: "That number is not in range, try again." Using an array, keep track of each guess by the user. When the user wins the game by guessing correctly, add the number of guesses and the list of guesses to the victory message. For example:
"You got it! It took you 5 tries and your guesses were 3, 14, 7, 9, 5"
Do not count invalid guesses (not numbers or out of range).
Since you are tracking the guesses, add validation to check if a number has already been guessed. If it has, display a message and do not count it as a guess.
HTML File:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Higher - Lower</title>
</head>
<body>
<div class="container">
<h1>Higher Lower</h1>
<p>Guess a number between 1 and <span class="max-number">N</span></p>
<div class="row">
<div class="col-lg-3 cold-md-6">
<form>
<div class="form-group">
<label>Your guess:</label>
<input type="text" id="userInput" class="form-control">
</div>
<button type="button" class="btn btn-primary" onclick= "do_guess()">Guess</button>
</form>
</div>
</div>
<p id="message"></p>
</div>
<script src="HigherLowerEnhanced.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
JavaScript File:
let maxNumber;
// use an infinite loop that continues until a users input is validated
while (true) {
maxNumber = prompt("What should the maximum number be?");
// check if the user input is actually a number
if (isNaN(maxNumber)) {
// keeps the loop going until input is validated
continue;
}
// check if the number is a decimal
if (!Number.isInteger(maxNumber)) {
// function that rounds numbers
maxNumber = Math.round(maxNumber);
}
if (maxNumber < 1) {
console.log("Please Enter number more than 0");
continue;
}
// function to set the spans value to the input number
const maxNumberSpan = document.querySelector('.max-number');
maxNumberSpan.innerHTML = maxNumber;
break;
}
// generate random number between 1 and infinite
let num = Math.floor(Math.random() * maxNumber) + 1;
// function stores users guesses
const inputArray = [];
document.querySelector('.btn').addEventListener("click", (e) => {
// prevents page from refreshing after you click submit
e.preventDefault();
// call do_guess() function on click
do_guess();
});
// do_guess function
function do_guess() {
// get message div
let message = document.getElementById("message");
// get input value
let guess = Number(document.getElementById("guess").value);
// if input is not a number
if (isNaN(guess)) {
message.innerHTML = "This is not a number";
// return function (so that user can submit another number)
return;
}
// if number is out of range
if (guess < 1 || guess > maxNumber) {
// show this message
message.innerHTML = "That number is not in range, try again";
// return function
return;
}
// indexOf() function finds guess in inputArray
if (inputArray.indexOf(guess) != -1) {
// when the guessed number is not found in the array it will return -1
message.innerHTML = "You already have tried this number";
return;
}
// now we have checked validation of input push guessed number on array
inputArray.push(guess);
// if input is equal to num
if (guess == num) {
message.innerHTML = "You got it! It took you " + inputArray.length + " tries and your guesses were " + inputArray.toString();
}
// if guess is more
else if (guess > num) {
message.innerHTML = "No, try a lower number.";
}
// if guessed number is less
else {
message.innerHTML = "No, try a higher number.";
}
}
Error:
[Running] node "/Users/tonyjones/Desktop/HigherLowerEnhanced/HigherLowerEnhanced.js"
/Users/tonyjones/Desktop/HigherLowerEnhanced/HigherLowerEnhanced.js:6
maxNumber = prompt("What should the maximum number be?");
^
ReferenceError: prompt is not defined
at Object.<anonymous> (/Users/tonyjones/Desktop/HigherLowerEnhanced/HigherLowerEnhanced.js:6:9)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47
Node.js v18.12.1
[Done] exited with code=1 in 0.324 seconds