Well done!

You have completed Practice JavaScript Loops!

Preview

Create the Loop – One Solution

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

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.

You need to sign up for Treehouse in order to set up Workspace

Practice JavaScript Loops

Well done!

You have completed Practice JavaScript Loops!

Create the Loop – One Solution

Resources

while loop solution

Related Discussions

Related Discussions

`while` loop solution