Try it TODAY! Create a Random Number Guessing Game with JavaScript DOM Coding Exercise
JavaScript using 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 :
Youtube Video Solution
Source Code index.html
<!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>
Source Code app.js
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);
Recommended by LinkedIn
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>`;
}
}
function getRan(min,max){
return Math.floor(Math.random() * (max-min+1) + min);
}
https://youtu.be/lhMUpBEhgaU