JavaScript Random Number Generator

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

YouTube Video: 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
*************************

<!DOCTYPE html>
                  <html>
                  <head>
                    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
                    <meta charset="UTF-8">
                    <title>JavaScript Random Number Generator</title>
                    <link rel="stylesheet" type="text/css" href="random.css">
                    <meta name="description" content="Use Vanilla JavaScript to generator a number in a given range!">

</head>
                  <body>
                      <script>
                         var sound = new Audio();
                         sound.src = 'chime.mp3';
                       </script>
                  <div class="row">
                  <div class="col-2"></div>
                  <div class="col-8" align="center">
                  <h1>JavaScript Random Number Generator</h1>
                  <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>
                  </div>
                  </div>
                  <script>
                  function randNum(min, max) {
                  min = Math.ceil(min);
                  max = Math.floor(max);
                  return Math.floor(Math.random() * (max - min + 1)) + min;
                  }

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;
                  }

document.getElementById("myBut").addEventListener("click", generate);
                  </script>
                  </body>
                  </html>

************************
random.css
*************************

.classy {
                    padding: 2.5px;
                    border-radius: 6px;
                    background-color: green;
                    color: white;
                    font-size: 24px;
                  }

.classy:hover {
                    opacity: .5;
                    background-color: black;
                  }

body {
                  background-color: black;
                  color: #49FF0D;
                  line-height: 1.5;
                  font-size: 24px;
                  }

/* All elements width includes borders and padding*/
                  * {
                  box-sizing: border-box;
                  }

/* Rows*/
                  .row::after {
                  content: "";
                  clear: both;
                  display: table;
                  }

/* Classes containing "col-"*/
                  [class*="col-"] {
                  float: left;
                  padding: 15px;
                  }

/* Column width for small devices (i.e. smart phones)*/
                  [class*="col-"] {
                  width: 100%;
                  }

/* Column width for large devices (i.e. computers)*/
                  @media only screen and (min-width: 768px) {
                  .col-1 {width: 8.33%;}
                  .col-2 {width: 16.66%;}
                  .col-3 {width: 25%;}
                  .col-4 {width: 33.33%;}
                  .col-5 {width: 41.66%;}
                  .col-6 {width: 50%;}
                  .col-7 {width: 58.33%;}
                  .col-8 {width: 66.66%;}
                  .col-9 {width: 75%;}
                  .col-10 {width: 83.33%;}
                  .col-11 {width: 91.66%;}
                  .col-12 {width: 100%;}
                  }

/* Column width for large devices (i.e. tablets)*/
                  @media only screen and (min-width: 600px) {
                  .col-t-1 {width: 8.33%;}
                  .col-t-2 {width: 16.66%;}
                  .col-t-3 {width: 25%;}
                  .col-t-4 {width: 33.33%;}
                  .col-t-5 {width: 41.66%;}
                  .col-t-6 {width: 50%;}
                  .col-t-7 {width: 58.33%;}
                  .col-t-8 {width: 66.66%;}
                  .col-t-9 {width: 75%;}
                  .col-t-10 {width: 83.33%;}
                  .col-t-11 {width: 91.66%;}
                  .col-t-12 {width: 100%;}
                  }

/* Style inputs with type="text", select elements and textareas */
                  input[type=number] {
                  background-color: rgb(8,13,32);
                  padding: 12px; /* Some padding */
                  color: lightgreen;
                  font-size: 24px;
                  border: 1px solid #ccc; /* Gray border */
                  border-radius: 4px; /* Rounded borders */
                  box-sizing: border-box; /* Make sure that padding and width stays in place */
                  margin-top: 6px; /* Add a top margin */
                  margin-bottom: 16px; /* Bottom margin */
                  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
                  }

button {
                  background-color: lightgreen;
                  color: black;
                  padding: 12px 20px;
                  border: none;
                  border-radius: 4px;
                  cursor: pointer;
                  font-size: 24px;
                  }

button:hover {
                  border-color: grey;
                  border-style: solid;
                  border-width: 1px;
                  opacity: .5;
                  }

.green {
                  color: lightgreen;
                  font-size: 56px;
                  }

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.

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.

Menu

JavaScript Random Number Generator

Video Tutorial: JavaScript Random Number Generator

Why Pseudo-Random?

Project File Structure

Project Code

Download Sound

Pre-defined JavaScript Functions

Math.random()

Math.floor()

What will num equal?

Math.ceil()

What will num equal?

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

function generate () {}

HTML

JavaScript

Button Sound

HTML

JavaScript