I’ve found that explaining concepts reinforces the knowledge. Thus, I will posting frequent “bytes” of simple to moderate code, explaining why they work and the steps involved throughout the thinking process. By doing this, I will help solidify what has been learned, and create a useful reference point for future use by myself and others!
Let’s make a very, very basic number generator in JS. We want the user to choose a minimum number and a maximum number, and the program should return a random number between the range provided.
We’re going to need a two variables to store the user’s inputs via prompt commands. I’m naming them strings because I will convert them to integers. This is an important step – we must convert the given number into an integer. Otherwise, it will return as typeof string, due to input from the prompt window.
var firstIntString = prompt(“Give me a minimum number!”);
var minimumInt = parseInt(firstIntString);
var secondIntString = prompt(“Give me a maximum number!”);
var maximumInt = parseInt(secondIntString);
Now we use the Math library to calculate various instances of random numbers. We need to use the .floor property so that our value does not have a chance to equal zero. Our Math.random() cannot be allowed to equal zero because anything multiplied by zero would give us zero. It is tempting to use .ceiling, but that property returns the smallest integer greater than, or equal to a given number.
The program needs to go from a range of z to x, so we need to subtract the maximum range and the minimum range. Why?
Let’s say we gave a minimum of 5 and a max of 10.
If Math.random() * (maximumInt – minimumInt + 1) returns a 1, we will then add it to the minimum number again, as we do in the equation, and we get a 6.
If the random method returns a 4, we add it again to the minimum number and get a 9.
Let’s say our range was 10 to 25, our first range would be 16 with the added 1. The 1 is there due to the .floor property. Given our range and adding 1, .floor will return a number from 0 – to, but not including, 16. Without the 1, we would not get any float values of 15 due to floor rounding down. We then take that number, and add it to our minimum number again.
Therefore, we create a random number from 10 (0 + 10), to 25 (15 + 10). Perfect! That is what we want the program to do.
var randomInt = Math.floor(Math.random() * (maximumInt – minimumInt + 1)) + minimumInt;
Finally, we want to write this to our basic little webpage.
var answer = “<p>” + randomInt + ” is a number between ” + minimumInt + ” and ” + maximumInt + “.</p>”;
Last but not least, we need to put this in our index.html. After running the webpage, we should have a neat little random number generator!