How To: Create A Random Number Generator w. JavaScript
Tags: javascript, tutorial, beginners, programming
Published: 2022-01-07 19:56:35

Today we're going to build out a random number generator using JavaScript. Random number generators are a fantastic beginner JavaScript project. You get to work with some of the important basics while creating something that serves an actual use!

![Alexis Random Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6xjovd06v892266ts1a.gif)

### What Are Random Number Generators Used For?

I've been asked before about when we would actually use a random number generator. Sure, it's a fun quick, project, but what are some of the real life use cases?

Typically, you would use it as a standalone app like we've created here. It would likely be used within a larger application. A function such as `randomNum()` would return a random number, which could in turn do something like grab a specific item from an array (at the index of the random number returned). This allows you to create a basic lottery style system within an application.

I feel it's important to mention here that there is a lot of conversation regarding *exactly* how random these built out random generators are. When it comes to the way we're building it out here (using `Math.random()`), the answer is well, *not so random*. It's technically pseudo-random. I'm not going to delve deep into the mechanics behind that but if you're curious I would highly recommend [this article](https://hackernoon.com/how-does-javascripts-math-random-generate-random-numbers-ef0de6a20131) by [Daniel Simmons](https://hackernoon.com/u/dsimmons_23530).

With all that being said, let's get started building.

### The Build

{% youtube mLyPZ90NKzc %}

I've created a follow along video that I originally recorded on [CodeCast](https://www.codecast.io/casts/dOyLamkoLx7m-javascript-random-number-generator). I would recommend watching it on CodeCast over YouTube because you can follow along with the code and copy it as I write it (as seen in the gif below)! 

![Using The Player Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1507azwph2ce1ej8563u.gif) 
 
If you prefer written tutorials then keep reading!

I went ahead and started with some simple HTML:

     <div class="cont">
       <h2 id="number">0</h2>
       <button class="btn" id="generate">Random Number</button>
     </div>

I also added in some styles because they never made anything worse! 🦄


![It's Called Style People Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6cvs2lmrezwexqa7wmm.gif)
 

     body {
       background-color: #00242e;
     }

     .cont {
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-top: 100px;
     }

     .btn {
       background-color: #32edd7;
       border: none;
       padding: 16px 32px;
       border-radius: 4px;
       font-size: 16px;
       cursor: pointer;
     }

     .btn:hover {
       background-color: #2ad1bd;
     }

     #number {
       font-size: 28px;
       color: pink;
     }
 


Next we'll begin writing out our JavaScript!

We start by writing two variables, `num` and `btn` and assign them to the correct node.

     const num = document.getElementById('number');
     const btn = document.getElementById('generate');

We'll then go ahead and create our function. We'll be using the built in `.random` [method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) on the Math object. 

     const randomNum = () => {
       return Math.floor(Math.random() * 1000);
     };

Next, we wanna add an event listener on the button to listen for whenever it's clicked. We can do that as follows:

     btn.addEventListener('click', () => {
     });

Now within the body of this, we want to add the logic that replaces the current `num` with a random number, as produced by the `randomNum` function.

     btn.addEventListener('click', () => {
       num.innerHTML = randomNum(); 
     });

Make sure you assign it to `num.innerHTML` and not `num`. Otherwise, we'll be overwriting the `num` variable and not updating the actual number visible on the page.

And there we are, a functioning random number generator! You can check out the built out product in the codepen below!

{% codepen 
https://codepen.io/amyeoulton/pen/VwMBVBj %}
______________________________________________________________
For more of my content, follow me on like [Twitter](https://twitter.com/amyeoulton) & [CodeCast](https://www.codecast.io/users/amy)! 

You can also read one of my latest articles on branding yourself as a developer below:

{% link https://dev.to/amyoulton/how-to-brand-yourself-as-a-developer-397b %}