## DEV Community

Kurapati Mahesh

Posted on • Updated on

# 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 !

# 💎 Love to see your response

1. Like - You reached here means. I think, I deserve a like.
2. Comment - We can learn together.
3. Share - Makes others also find this resource useful.
4. Subscribe / Follow - to stay up to date with my daily articles.
5. Encourage me - You can buy me a Coffee

## Let's discuss further.

1. Just DM @urstrulyvishwak
2. Or mention
@urstrulyvishwak