JavaScript Random Number Generator


In this lesson, we build a vanilla JavaScript random number generator. The user enters a minimum and maximum value and our JavaScript will generate a pseudo-random integer.


Video Tutorial: JavaScript Random Number Generator


Why Pseudo-Random?

In this lesson we use the JavaScript pre-defined function Math.random() to generate a pseudo-random number. "Pseudo" means "not genuine" or "a sham".

Math.random uses an algorithim to simulate randomness. Because an algorithim is used, there is no way to produce actual randomness. Random means "chosen without method or conscious decision". The algorithm is the method used. If you know the algorithm, you can use it to predict results.

Don't get caught up on "pseudo". JavaScript, like other major programming languages, does a really good job at simulating randomness. It does so well, you can think of the results as a "random number".


Project File Structure

The file structure is how you organize the files in your project.

Mouse Hover over the blue text in the description to highlight.

random-number-generator
  index.html
  random.css
  chime.mp3


➼ Main Project Folder - All our project files go in here

➼ index.html - This is the main page users will be directed to when entering your application. HTML is the markup language that displays your content in the web browser. Our JavaScript Code is also located in this file.

➼ random.css - CSS formats HTML: color, size, shape, font ect.

➼ sound file - Our JavaScript button makes this sound!


Project Code

Below you will find quick copy boxes filled with the project code.

************************
   index.html
*************************
************************
   random.css
*************************

Download Sound



Pre-defined JavaScript Functions

Next, I will go ovewr the pre-defined functions we use to generate a random integer.

Math.random()

Math.random() returns a "random" number between 0 and 1. It may return 0, but will always return a number less than 1.

Math.floor()

Math.floor() rounds a number down to the nearest integer.

What will num equal?

var num = Math.floor(Math.random());

num will always equal 0. Why? Math.random() will always return a number less than 1. Then Math.floor will round that number down to 0.

Math.ceil()

Math.ceil() rounds a number up to the nearest integer.

What will num equal?

var num = Math.ceil(Math.random());

num will probably equal 1. In the rare case that Math.random returns 0, it will equal 0.

function randNum(min, max){...}

Now I will go over our JavaScript function used to generate a random integer between min and max.

function randNum (min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

➼ randNum - Our function's name.
➼ (min, max) - Our function's parameters. The user will enter these values. We are generating a random integer between min and max.
➼ min - We will round min up to the nearest integer.
➼ max - We will round max down to the nearest integer.
➼ return - This is the number we return. The function returns a random integer between the min and max value.


function generate () {}

This function generates a random number between min and max, than displays it to the user. It is attached to our HTML button with the id "myBut". When the user clicks that button the generate() code will run.

HTML

<div class="myform">
  I will generate a random integer between <br><br><input type="number" id="min_value" placeholder="Min Value"><br>
   <br>and<br><br>
  <input type="number" id="max_value" placeholder="Max Value"><br>
  <br><br>
  <button id="myBut" onclick="generate()" onmousedown="sound.play()">Generate!</button><br><br>
  <div class="green" id="output"> </div>
</div>

JavaScript

   function generate () {
     let min = document.getElementById('min_value').value;
     let max = document.getElementById('max_value').value;
     let rand = randNum(min,max);
     document.getElementById("output").innerHTML = rand;
   }

➼ min - We are declaring a variable called min and setting it equal to the minimum value entered by the user.
➼ max - We are declaring a variable called max and setting it equal to the maximum value entered by the user.
➼ rand - We are declaring a variable named rand and setting it equal to the value returned by our randNum function when minmax are passed in.
➼ output - We are taking the value of rand and displaying it to the user in the div with ID "output".


Button Sound

HTML

  <button id="myBut" onclick="generate()" onmousedown="sound.play()">Generate!</button><br><br>

JavaScript

var sound = new Audio();
sound.src = 'chime.mp3';


➼ onmousedown="sound.play()" - We added a "onmousedown" event to play our sound. We named our sound "sound".

➼ var sound - We declare a variable named "sound" and make it an audio element.
➼ src - We set sound's "src" attribute to "chime.mp3". This is the audio file's location.