DEV Community

Cover image for How To: Create A Random Number Generator w. JavaScript
Amy Oulton
Amy Oulton

Posted on • Updated on

How To: Create A Random Number Generator w. JavaScript

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

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 by Daniel Simmons.

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

The Build

I've created a follow-along video that I originally recorded on CodeCast. 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

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>
Enter fullscreen mode Exit fullscreen mode

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

It's Called Style People 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;
 }
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

We'll then go ahead and create our function. We'll be using the built in .random method on the Math object.

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

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', () => {
 });
Enter fullscreen mode Exit fullscreen mode

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(); 
 });
Enter fullscreen mode Exit fullscreen mode

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!


For more of my content, follow me on Twitter & CodeCast!

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

Top comments (11)

Collapse
 
enkrateiaofcode profile image
IBRAHIM

I followed the steps and checked my code many times but when I click on generate a number nothing happens! still figuring out why.

Collapse
 
amyoulton profile image
Amy Oulton

Send me the code and I'll check it over!

Collapse
 
enkrateiaofcode profile image
IBRAHIM

Thank you so much for your time. A quick question can I attach the files here?

Thread Thread
 
amyoulton profile image
Amy Oulton

Nope. Either make a public GitHub repo or a codepen and attach the link!

Thread Thread
 
enkrateiaofcode profile image
IBRAHIM
Thread Thread
 
amyoulton profile image
Amy Oulton

It's a crazy simple error! The id you assigned to the number in your HTML file is Number, but in your javascript file you're searching for an id with number. JS is case-senstive. Change the casing and you should be good!

Thread Thread
 
enkrateiaofcode profile image
IBRAHIM

Now is working lol. Thank you so much Amy!

Thread Thread
 
amyoulton profile image
Amy Oulton

No problem!

Collapse
 
marcosrjjunior profile image
Marcos RJJunior

Super simple and effective

Collapse
 
amyoulton profile image
Amy Oulton

Thanks!

Collapse
 
cseiter profile image
cseiter

Saw your use of Schitt's Creek gifs. insta-follow.