This video we're going to use boolean logic and some conditionals to build a simple number guessing
game.
So this is how it works.
When I load the page it asks me to guess the number and behind the scenes there is a number.
In this case it's set as 7 a number that I need to pick to get it right.
So if I guess something like 9 which is too high it tells me to high try again.
So if I refresh and this time I guess two tells me that's too low.
Try again.
And finally if I get it correctly with 7 it tells me you guessed it.
So to build this maybe go ahead and open up supply and make a new file game.
H Tim L I didn't my e-mail here.
And then I'm going to add a script tag and set it equal to B game.
Yes which doesn't exist yet.
Now I'll add that file.
Game dot japes and in there I'm just going to put alert.
Hello.
Just as always I want to make sure things are connected OK.
So now I'm going to open this up.
All right.
Everything looks good so the first thing that we want to do is figure out our logic.
So I'm going to write some comments that are going to guide us throughout this.
So the first thing we want to do is create a secret number and then ask user for guess and then check
.
So to start let's create the secret number which we'll just start with a variable that is hardcoded
.
So it's always the same.
Our secret number equals and let's this time do four.
Then we're going to ask the user for their guess.
So far I guess he calls prompt
let's say guess a number and that's all we need to do their save.
And then as our first step let's just alert.
Guess
so let's go back refresh.
Guess a number 104 and then it tells me 104.
All right.
So the first thing that we want to do is just check if they guessed correctly.
So that conditional.
That's right.
This is check if guess is right.
That conditional is just if guess chirpily calls secret number and if that's the case let's do an alert
.
You got it right and safe.
So there is one small problem but I want to show it.
Failing first so I'm going to run this.
Remember our secret number is four.
So if I refresh and I type four I should see you got it right but I'm not and here's why.
Open up the javascript Council to illustrate this.
When I do prompt when I ask for a number.
So let's do this line here.
Var gas equals prompt.
Yes
when I typed the number four in here it's not actually stored as a number.
So if I look at what guess is you can see it's a string.
And if I wanted to prove that it was a string I could use javascript's type of which tells me type of
guess is string.
OK.
So More importantly though I'm trying to compare it to secret number which remember is a number.
So if I move this back here and I pasted in we have secret number which is the number four.
And then we have Guess which is the string for.
So as we saw in the Boolean logic video those do not triple equals one another.
So what we could do is use double calls so I could say guess double equals.
Secret number.
But there's another way that I prefer because we still get to keep triple equals and the way that we
do that is using a bit of new code and it looks like this number capital and guess.
So we pass something in and what that will do is actually take the string of gas and turn it into a
number.
So we get the number four there.
So then what we can do is triple equals like that where we would take guess the string.
Turn it into a number.
Then check if it equals the secret number.
So that's what we're going to do.
Going to go back over here and just check if the number version I guess is equal to the secret number
we're going to print out.
You got it right.
So let's refresh let's guess four and it tells us you've got it right.
Awesome.
So if we get it wrong though nothing happens yet so let's add a message that says you got it wrong.
So we'll have an otherwise.
You got it wrong.
And to do that we just want our.
Else statement else and we'll just do a alert wrong like that.
Now let's try that refresh Let's type in two.
And we see wrong.
So if you remember earlier on the solution that I had would tell you if you too high or too low.
So rather than just saying wrong we actually don't want to do that.
We want to say otherwise check if higher
otherwise check if lower.
So something like this.
So to check if guess is higher.
We're going to write in.
Else if.
Else if we need to convert it to a number again.
Number guess is greater than secret number.
We'll do an alert too.
Hi guess again.
There we go.
And just to check that I refresh and I enter something in too high like nine.
It tells me to high Guess again.
But if for entrance thing to low like to nothing happens.
So then we need to build in the final catch all which is if it's not equal to the secret number and
if it's not higher then what about if it's lower.
So what we could do is add another else if and I'll just copy this one.
We could do LCF number I guess is less than secret number and we could say to low guess again.
But there's an easier way which is just to use else.
And that's because if the number is not equal and it's not greater then than it has to be less then
.
So I can just reduce all of this to else.
And then we alert to low guess again let's save.
Open it up.
So let's try something too low like to tells me to low guess again.
Let's try something too high like 98 to high Guess again and just try something just right.
The number four.
You got it right.
Excellent.
So there's one small small improvement we could make.
You'll notice here that this code is being duplicated.
We're returning guess the string into a number rather than doing that twice.
What we could do is just get it out of the way up top one time right here where I could say Vargus is
equal to the number of whatever the user types in to just get it out of the way all in one line and
then we can just leave this as guess because guess is now a number rather than a string.
And if we try that it works exactly the same.
And if you prefer we could make this a little clearer.
Some people might argue that doing this on one line is unnecessary.
So what we could do instead is something like this Var gas let's call it string guess equals prompt
.
A number and then we would say Var gas equals number of string guess.
So it's more explicit to do it this way.
So we get the string guess as just from prompted this string.
Then we turn it into a number and save it to a variable called guess.
And then we're using that variable called guess.
So just double check it still works too high to low just right.
OK.
So in future versions we're going to make this guessing game actually repeat and give you another turn
where you don't have to refresh the page.
It will just continue to ask you.
Guess again too high Guess again too high I guess again.
And then eventually hopefully get it right.