Preview
Video Player
00:00
00:00
Random Number Challenge – Solution
6:04This video covers one solution to the random number challenge.
Hi, how'd you do?
0:00
Were you able to complete the challenge?
0:01
Now I'll show you how I did it.
0:03
In the random.js file, the first step
is collecting a number from a user.
0:06
So I started by declaring a variable and
0:10
storing input from
the user in the variable.
0:13
You learned that the prompt
method returns a string,
0:15
even if someone types
a number into the dialog box.
0:18
So the value of inputHigh needed to
be converted into a number type.
0:21
I used the parseInt method to do that,
and I stored the number value in
0:26
a variable named highNumber to represent
the highest possible random number.
0:30
With this, I was able to
generate a random number from 1
0:35
to whatever the user typed in.
0:38
I stored that in a variable
named randomNumber.
0:40
Remember, the Math.random method generates
a number from 0 up to but not including 1.
0:44
And it's usually a really long decimal
value, like 0.522403, and longer even.
0:51
So I multiplied the random decimal
number by the top number in the range,
0:56
or the number the user typed.
1:02
So this right here is going
to return a floating point or
1:05
a number with a decimal in it,
like 3.407394.
1:09
So next, I used the Math.floor
method to round that number down to
1:14
the nearest integer, for example,
from 3.407394 to just 3.
1:19
And like earlier, I added 1 to
Math.floor to make sure that the lowest
1:24
number is 1 and the highest number
is the value stored in highNumber.
1:29
Without the +1, the random number
range would be from 0 up to but
1:34
not including the number stored
in the highNumber variable.
1:38
If the highNumber was 25, for example,
the range would be from 0 to 24.
1:42
So the +1 makes sure that you'll
get a number from 1 to 25.
1:47
Finally, I printed a message
displaying the random number.
1:52
I used the console.log method and provided
it a template literal with the message
1:55
randomNumber is a random number
between 1 and highNumber.
2:00
I used string interpolation to
insert the value of randomNumber and
2:05
the highNumber value supplied by the user.
2:08
Let's see how it works.
2:11
I'll preview index.html in the browser,
type the number 15, and click OK.
2:13
In the console, I see the message 15
is a random number between 1 and 15.
2:20
I'll try another number, let's say 30.
2:26
That displays the message 12 is
a random number between 1 and 30, good.
2:31
So hopefully you were able to complete all
or most of the steps in this challenge.
2:36
If not, that's okay.
2:41
Why not start over and write it
again without looking at my version?
2:42
The random number generator works as
expected when a user supplies a number.
2:47
But the program does not work if the input
is something like the word seven or
2:52
if the input field is left blank.
2:57
In the console, notice the NaN value.
3:00
It says NaN is a random
number between 1 and NaN.
3:03
Earlier, you learned that NaN stands for
not a number, and
3:07
it's JavaScript's way of saying
that it can't find a number.
3:10
NaN is often the result of
an incorrect mathematical operation.
3:12
In this case, the parseInt method
can't convert a string of letters or
3:16
an empty string into a number that can be
used here in Math.random times highNumber.
3:20
So for the random number generator,
it would be a good idea to first check
3:26
if the input supplied by
the user is a number.
3:30
If it is, then generate a random
number and print it to the console.
3:34
If it's not a number, then print a message
like, you need to provide a number,
3:38
try again.
3:42
To do that,
I need to use a conditional statement,
3:43
which you learned about
in a previous course.
3:46
A conditional statement can make
a program react to different situations.
3:48
I'll start with an if statement.
3:52
And what should the condition
be in this case?
3:55
Remember, a condition evaluates
to either true or false.
3:58
The if statement executes
the code between the curly braces
4:03
if the specified condition
is considered true.
4:06
If the condition is considered false,
4:09
another statement is executed,
in an else clause, for example.
4:11
So in this condition, I can check
the value stored in highNumber.
4:15
If highNumber is a true number
value that I can use in my program,
4:20
then generate a random number with it.
4:24
Now I'll move the random number
variable inside the if code block,
4:27
as well as the console.log statement.
4:32
NaN, or not a number,
4:40
is a value that is always considered
false when encountered in a condition.
4:42
So if the value of highNumber is NaN,
4:47
then the condition evaluates to false, and
the code in the else clause runs instead.
4:50
Here I'll use console.log to
display a message that says,
4:56
you need to provide a number, try again.
5:00
And now I'll test my latest changes.
5:11
I'll save my file, refresh the page.
5:14
And this time type three, the word
three cannot be parsed to a number.
5:18
So the console outputs you need
to provide a number, try again.
5:23
This time I'll leave the input field
blank, and I get the same message.
5:28
But if I enter a number, like 12,
5:32
the console outputs 4 is a random
number between 1 and 12, perfect.
5:35
To take this challenge even further,
why don't you adjust the program so
5:42
that it accepts two numbers from a user,
a low number and a high number.
5:45
And then generates a random number from
the lowest number to the highest number,
5:50
for example, a number that's at least 10,
but no bigger than 25.
5:55
In the next video,
I'll show you my solution.
5:59