Preview
Video Player
00:00
00:00
Create the Loop – One Solution
4:54This video covers one solution to the first part of the "Number Guessing Game" challenge.
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