Project 5: Random number game in Javascript
Tags: javascript, html, css, discuss
Published: 2022-02-27 03:13:42

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cqbt1th47u00r6imdu1.gif)
 

Thank you 😊 Happy Reading !

<hr style="border-width: 2px;border-color: #87CEEB;">
<h1> 💎 Love to see your response</h1>
<ol>
<li style="padding: 10px;font-size: 30px;"><b>Like</b> - You reached here means. I think, I deserve a like.  </li>
<li style="padding: 10px;font-size: 30px;"><b>Comment</b> - We can learn together. </li>
<li style="padding: 10px;font-size: 30px;"><b>Share</b> - Makes others also find this resource useful.</li>
<li style="padding: 10px;font-size: 30px;"><b>Subscribe / Follow</b> - to stay up to date with my daily articles. </li>
<li style="padding: 10px;font-size: 30px;"><b>Encourage me</b> - <a href="https://www.buymeacoffee.com/urstrulyvishwak" target="_blank">You can buy me a Coffee</a>
</ol>
<hr style="border-width: 2px;border-color: #87CEEB;">

<h2> Let's discuss further. </h2>

<ol style="padding: 20px;">
<li style="padding: 10px;font-size: 30px;">Just DM <br> <a href="https://twitter.com/messages/compose?recipient_id=1388837509824610314&text=Hello world"
class="twitter-dm-button" data-screen-name=“@urstrulyvishwak” data-size="large">@urstrulyvishwak</a>
</li>
<li style="padding: 10px;font-size: 30px;">
<p> Or mention <br> <a href="https://twitter.com/intent/tweet?screen_name=urstrulyvishwak&ref_src=twsrc^tfw" class="twitter-mention-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">@urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> </li>
</ol>

<h2> For further updates: </h2>
<a href="https://twitter.com/urstrulyvishwak?ref_src=twsrc^tfw" class="twitter-follow-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">Follow @urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>