Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video covers one solution to the first part of the "Number Guessing Game" challenge.
Resources
while loop solution
Review how you might write the number guessing program using a while loop.
const main = document.querySelector('main');
const randomNumber = getRandomNumber(10);
let guess;
function getRandomNumber(upper) {...}
while ( parseInt(guess) !== randomNumber ) {
guess = prompt('I am thinking of a number between 1 and 10. What is it?');
}
main.innerHTML = `<h1>You guessed the number! It was ${randomNumber}.</h1>`;
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
Hey, how'd it go?
0:00
Hopefully you were able to complete this
part of the practice session successfully.
0:01
The goal was to ask the user to guess
the number from one to 10 again and
0:05
again until their guests match the number
assigned to the randomNumber variable.
0:09
Now I'll show you my solution which
you can compare to what you wrote.
0:14
You can also reference all my code
when you download the project files.
0:18
I chose to use a do...while loop.
0:22
So I'll start by adding
a do while statement.
0:25
Everything you add inside this
do block is the loop itself, and
0:31
it's going to run at least once.
0:36
In the do block,
I'll first collect the player's guess.
0:38
I'll assign the guess variable, the prompt
method, and pass it the message.
0:42
I am thinking of a number between one and
ten.
0:49
What is it?
0:54
Now I need to exit out of this loop
when the players guess matches
1:04
the random number.
1:08
You've learned to use a counter
variable to make sure that a loop ran
1:10
a specified number of times.
1:13
Well, you don't always
need to use a counter or
1:15
specify an exact number of
times that a loop must run.
1:18
All you need is a condition that at
some point evaluates to false so
1:21
that the loop can end.
1:25
Remember the loop will run making
the prompt dialogue appear as
1:26
long as this while condition is true.
1:31
So when the user gets the correct answer
something needs to happen to make this
1:34
condition false.
1:38
That way the prompt dialogue
won't appear again.
1:38
There are several ways you might do this,
1:41
I'll use the strict inequality
comparison operator.
1:44
Between the parentheses,
I'll type parseInt,
1:47
passing it the value of guess and
not strictly equals randomNumber.
1:52
This compares the player's guess
to the number that's assigned to
1:58
the randomNumber variable.
2:03
Remember the exclamation point is
called a logical NOT operator.
2:05
So this means not strictly equal to,
2:09
as long as the users guess does
not equal the randomNumber,
2:12
this condition will evaluate to true and
the loop will run again.
2:16
And I'm using the parseInt method to
convert the string returned from the prompt()
2:20
method into an integer.
2:25
Now when the users guess is equal to
the value assigned to randomNumber, so
2:26
when this eventually evaluates to false,
the player correctly guessed the number.
2:31
The loop ends and
the rest of the program can run.
2:37
In that case, I'll display a success
message inside the pages main element.
2:41
With main.innerHTML,
2:45
I'll set it to a template literal.
2:48
That outputs an h1 with the text,
you guessed the number.
2:53
And I'll display the randomNumber
value using string interpolation.
3:03
Remember that's the dollar sign and
curly braces syntax.
3:06
So I'll type it was ${randomNumber}.
3:10
All right, let's try it.
3:17
I'll save the file and
preview index.html in the browser.
3:18
The prompt dialog appears.
3:22
And after 10 tries,
I guess the random number and
3:28
the message you guess the number it
was 10 displays on the page good.
3:31
Even though you could create this exact
number guessing game with a while loop,
3:36
I chose to use a do...while loop.
3:41
In fact, this is a good example of when
you might use do...while over while.
3:42
When the program first loads,
there's no condition to check yet.
3:47
So you want to run the loop at
least once to ask for a response.
3:51
Then the response gets checked.
3:56
Then you can run the loop more times,
3:58
until the program gets
the correct information.
4:00
You can also review how you might write
this program with a while loop and
4:02
the teachers notes with this video.
4:05
Now, don't worry if you were not able to
complete all the steps in the first part
4:07
of this practice session,
that's totally okay.
4:10
You could try starting over and trying
it again without looking at my version,
4:13
then be right back here when you're ready.
4:16
In the next step for this challenge,
you'll improve this guessing game by
4:18
keeping track of the number of times
the user tries to guess the number.
4:23
Then displaying that number in
the final message.
4:27
So up top, I'll leave a comment that says
4:30
keep track of the number
of guess attempts.
4:35
So for example,
when a user guesses the randomNumber,
4:42
they should get a message like it took
you 3 tries to guess the number 3.
4:46
In the next video,
I'll show you one way you could do this.
4:50
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