Every game that you create is going to need to have some type of user interaction, and that's what
we're going to create in this lesson adding event listener to the button.
So it makes the button clickable.
So selecting that button object, now that we have it within an object format, we can add an event
listener adding an event listener called Click and also setting it up within an anonymous function.
So whenever this button gets clicked, these are the actions that we want to happen.
We can also select a function in order to handle that.
So let's do that instead.
And we can call it guests value initiating the guests value function.
It's already expecting a function there.
That's why you don't need the rounded brackets there in order to invoke it.
It's already expecting a function that's going to be invoking with the event listener.
So next, we need to create that function and this is the function that's going to get invoked whenever
the player makes the guess.
And for now, we can console log out a message and how about we do it?
Your guess is and this is where we need to select the value and we already have that game within the
game object.
We have the game input.
And that means that we can select a value from that input.
So whatever is available in that input is going to be what's going to show up in the console.
Try that.
It's a refresh.
Guess your guess is blank.
Your guess is for, your guess is five and so on.
So now we're returning back, I guess, value that we can use and we can use this guess in order to
detect to make sure then check to see how the player is doing and what their guesses.
So we're able to pick that up and notice that this is always changing, depending on what's entered
into our input field can see that as an input type number.
We can still enter in some text in there.
So we don't want that.
We don't want the user entering and text.
So we also have to check a few of the values here to make sure that it actually is a number.
So let's do that.
And this is going to be making use of some of the JavaScript utilities in order to handle different
data types and converting them so we can check to see.
So once we get that guess value, let's create a temporary variable for that.
And we can call it temporary.
Yes.
So this is going to be returning back the value console log that.
OK, so this is coming from an input.
And even though it's a no input type, you can see that whenever we guess it, it's still being written
as a string value.
Whereas if we have a number, you can see it shows up blue in the console.
So that means that we need to convert it into a number so we can take temp guess and we can equal it
to temp guess.
So we don't have to change the variable and manipulate this and change this into a number format.
The way to do that is you can do parse integer.
So this is going to automatically convert it into a number format.
So now whenever I type that, you see it's being converted into a number.
If I type in value of IEEE, we get returned back any end.
So we're checking to see if that value is a number.
And if it's not a number, then we can ask the player to suggest and to place a number in there.
Let's do that check.
And we can do this within a condition and we'll also have an elsea.
So we're checking to see if Tempa guess is a number.
There's a function in JavaScript that can determine whether the value is a number.
So placed that into the user, please digits and then the color can be read because this is kind of
like an error message.
And before we try that, this should be uppercase.
And so make sure that we can enter in a variable and says, please only enter in digits when we enter
in digits, that we get the value.
So we get everything is right there.
So if it is a digit, we can apply some other conditions.
And the condition here that we're looking for is if temp guess is equal to, we can do the three equal
signs because this is a number and we're expecting a number and we've got a number in game number and
let's say correct for this one.
And then we can make this green and you guessed and we can also enter in the game number and then else.
So this is the last one.
And this would this can just say your guess was incorrect and this one can be read.
So it was.
And then it'll tell us what the number was.
So guessing in five.
Not correct.
It was four.
So if we guess four.
Correct, you guessed four.
And if we enter in something that's not a number.
So if we're typing a bunch of letters in there, it says, please enter only digits.
So we've got some conditions that we're applying in order to make sure that the input value is what
we're looking for.
And we can also apply some additional conditions checking to see if the number is less than or greater
then, because we know at this point that it is actually a number.
So that passes that check over here.
We check to make sure that if the user guessed correctly, then we can run this block blockquote code.
And if it's not correct, but it was a number, that means that this guess is either higher or lower
so we can adjust accordingly.
And we're going to add that with the.
The message coming up as well, and then, of course, if you want the user to keep guessing at the
number and count how many tries they're using, then this is where you can update that to tell them
higher or lower.
And then all we do, we're not going to actually show them the number that they're trying to guess simply
output, whether it's higher or lower until they guess correctly.
And then once they guessed correctly, then we can run another block of code to take action once the
guess is correct and once they win the game.
So that's all still to come.
Go ahead and add in the ability to add the event listener making the guests, picking up the guests
input and then applying some conditions to that input.