Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Numbers!
You have completed JavaScript Numbers!
Preview
This video covers one solution to the random number challenge.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up