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!
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)!
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! 🦄
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 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!
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)
I followed the steps and checked my code many times but when I click on generate a number nothing happens! still figuring out why.
Send me the code and I'll check it over!
Thank you so much for your time. A quick question can I attach the files here?
Nope. Either make a public GitHub repo or a codepen and attach the link!
github.com/abe2dev/Random_Number
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 withnumber. JS is case-senstive. Change the casing and you should be good!Now is working lol. Thank you so much Amy!
No problem!
Super simple and effective
Thanks!
Saw your use of Schitt's Creek gifs. insta-follow.