An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Project 5: Random number game in Javascript
Random number can be generated easily in Javascript. Hence, by using it we can build a game to guess a number.
If we are building a random number between 1-10 range, then guessing in between will be a fun.
Let's have a look at the code here first:
<html><body> <p>Guess the number between 1-10</p> <input id="guessed" type="text" style="padding: 5px" /> <button onclick="verify()">Submit!</button> <script> function verify() { const value = document.getElementById('guessed').value; const getRandom = Math.floor((Math.random() * 10 + 1)); const p = document.createElement('p'); if (value == getRandom) { p.innerHTML = 'You have successfully guessed the right number.'; } else { p.innerHTML = `You havent guessed the random number i.e.${getRandom}. Please try again!`; } document.body.append(p); } </script></body></html>
Let's go through line by line to understand it.
<p>Guess the number between 1-10</p><input id="guessed" type="text" style="padding: 5px" /><button onclick="verify()">Submit!</button>
p
-> shows the mentioned message on web page.input
-> allows user to enter the number.button
-> to perform action after entering.
onclick="verify()"
is the one responsible to perform validation against the random number with given number.
Ok. now, what is there inside the verify()
?
const value = document.getElementById('guessed').value;
- get you the value entered by user.
const getRandom = Math.floor((Math.random() * 10 + 1));
- calculates random number between 1-10. To dig little deeper, Math.random()
generates number from 0(inclusive)-1(exclusive).
Let's say, Math.random()
given value as 0.23... * 10
gives 2.3.. + 1
gives 3.3... Hence, Math.floor(3.3) - 3
.
const p = document.createElement('p');
- creates p
element.
In if...else
, setting p
s innerHtml
the message to show to the user based on the matching condition.
document.body.append(p);
- once we set message to p
then appending it to body
to show on web page.
Depends of the range we need we can update Math.random() * 10 + 1
.
at last, here is the result:
Thank you Happy Reading !
Original Link: https://dev.to/urstrulyvishwak/project-5-random-number-game-in-javascript-12fk
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To