Day 2: Random Number Generator

Hi all!

Day 2 of the 100 days of Javascript challenge is creating a random number generator. Similar to counter app from day 1. It will display a random number above a button labeled generate that will display a new random number between 1 and 10 each time it is clicked.

The javascript today utilizes the built-in javascript functions of math.random and math.floor. Math.random() method returns a random decimal greater than or equal to zero and less than 1. You can scale it, which I will do here, to your desired range, mine being 10. Math.floor() method always rounds down and returns the largest integer less than or equal to a given number.

I started the javascript by creating two variables. One for number and one for btn that are both querySelectors for our number class and generate class.

Then I created an arrow function for my logic. Inside my curly brackets I defined a variable called randomNumber and used math.random() to generate my random number. I then set math.random() to be multiplied by 10. This will generate floats between 0 and 9.9. This is great but I want a whole number generated. To do this I wrapped my math.random() method within the math.floor() method knowing that math.floor rounds down to the largest whole integer. Great. But now my number generator will only generator numbers from 0 to 9. To include 10 in the generator I simply added 1 to the math.random() logic. My final randomNumber variable looks like this:

const randomNumber = Math.floor(Math.random() * 10 + 1);

From there I need to input the randomNumber variable to the DOM. I call my number variable that I defined earlier outside of my function and use innerhtml which gets the HTML markup contained within the element and set it equal to randomNumber.

number.innerHTML = randomNumber;

Outside the function I now just need to set and event listener to my generate button to generate a different number each time it is clicked.

btn.addEventListener("click", generateNumber);

One last thing. Right now when the page loads it starts at zero. If I want it to generate a random number right when it loads I simply call the generateNumber() function at the bottom.

My final code looks like this...