Math Random Values
Javascript Math object contains various methods that can be used for math functionality, in addition it also contains the random method that creates random values in JavaScript. The Math.random() method returns a floating-point number in the range 0 (inclusive of 0) to less than 1 (not including 1). The random value can then be multiplied and rounded to the nearest whole number to include the randomized range of values desired by the developer.
Random values are ideal for games and to create unique custom experiences for web users.
Random Number Interactive Guessing Game with JavaScript and the DOM coding exercise
In this exercise create a random number guessing game that will provide a random range of numbers that the user has to guess the correct number from. The application will provide the user feedback whether the guess was too high or too low, allowing for the user to narrow the range of the hidden number. Once the solution is found matching the input value to the hidden number, the game starts again generating the random number and a new range to guess. Feedback is provided to the user in the HTML element, so that the user playing the game knows the results and what to do next. This is a perfect example of a simple game that can be created with JavaScript and interacting with the DOM page elements.
Exercise :
- Select the HTML page elements as variables within your JavaScript code.
- Create declare variables globally for a lowValue, highValue, and hiddenNumber
- Create a function to start the game called starter().
- Create a function to generate random numbers using min and max values are parameters within the function. Wrap the Math.random() within the Math.floor() to round down to the nearest whole number. Math.floor(Math.random()). Multiply the random value by the max minus the minimum, to include the max value add plus 1 to the multiplied number. Within the result add 1 to increment from 0 to the starting value of the minimum number.
- Within the starter() function, generate a low value, a high value and a hidden number value with random numbers.
- Update the HTML output div to provide instructions for the user to guess a number between the random range.
- For the input element, change the type to number, and set attributes to min and max from the random values.
- Add an event listener for onclick to the button page element, once clicked the button should invoke a function called clickedMe()
- Within the clickerMe() function get the input value.
- Check if the hidden number matches the value of the input value. If it does then output is correct and run the starter function again.
- If the guess is incorrect, check whether the guess is lower or higher than the hidden number value. If it’s lower, update the lowValue with the input value, and provide feedback to the user to guess higher. If the guess is high, provide feedback to the user, and update the high value with the input value.
- The game should continue until the correct number is guessed, once the correct number is found then the game will reset and run again with new random numbers.
<!doctype html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<div>Hello World 1</div>
<input type=”text” >
<button type=”button”>Click</button>
<script src=”app.js”></script>
</body>
</html>
const output = document.querySelector(‘div’);
const myInput = document.querySelector(‘input’);
const btn = document.querySelector(‘button’);
let lowValue = 1;
let highValue = 10;
let hiddenNumber = 0;
output.innerHTML = ”;
starter();
function starter(){
myInput.value = ”;
lowValue = getRan(0,5);
highValue = getRan(lowValue +1,50);
hiddenNumber = getRan(lowValue,highValue);
output.innerHTML += `<div>Guess a number between ${lowValue} and ${highValue}</div>`;
btn.onclick = clickedMe;
myInput.setAttribute(‘type’,’number’);
myInput.setAttribute(‘min’,lowValue);
myInput.setAttribute(‘max’,highValue);
btn.textContent = ‘Enter Guess’;
}
function clickedMe(){
const valInput = myInput.value;
if(valInput == hiddenNumber){
console.log(‘correct’);
output.innerHTML = `<div>Correct it was ${ hiddenNumber}</div>`;
starter();
}else{
//let message = (valInput < hiddenNumber) ? ‘Go Higher!’ : ‘Go Lower’;
let message ;
if(valInput < hiddenNumber){
message = `${valInput} was wrong Go Higher!`;
lowValue = valInput;
}else{
message = `${valInput} was wrong Go Lower!`;
highValue = valInput;
}
output.innerHTML = `<div>${message}</div>`;
console.log(hiddenNumber);
myInput.value = ”;
output.innerHTML += `<div>Guess Again between ${lowValue} and ${highValue}!</div>`;
}
//let temp = Math.random()*10+1;
//console.log(temp);
//temp = Math.floor(temp);
//output.textContent += `${temp}, `;
}
function getRan(min,max){
return Math.floor(Math.random() * (max-min+1) + min);
}