1
00:00:00,210 --> 00:00:05,340
Every game that you create is going to need to have some type of user interaction, and that's what

2
00:00:05,340 --> 00:00:08,850
we're going to create in this lesson adding event listener to the button.

3
00:00:08,970 --> 00:00:10,770
So it makes the button clickable.

4
00:00:10,920 --> 00:00:15,360
So selecting that button object, now that we have it within an object format, we can add an event

5
00:00:15,360 --> 00:00:20,970
listener adding an event listener called Click and also setting it up within an anonymous function.

6
00:00:21,090 --> 00:00:25,110
So whenever this button gets clicked, these are the actions that we want to happen.

7
00:00:25,320 --> 00:00:28,590
We can also select a function in order to handle that.

8
00:00:28,860 --> 00:00:30,290
So let's do that instead.

9
00:00:30,630 --> 00:00:35,310
And we can call it guests value initiating the guests value function.

10
00:00:35,340 --> 00:00:37,180
It's already expecting a function there.

11
00:00:37,200 --> 00:00:40,830
That's why you don't need the rounded brackets there in order to invoke it.

12
00:00:40,980 --> 00:00:44,460
It's already expecting a function that's going to be invoking with the event listener.

13
00:00:44,490 --> 00:00:49,440
So next, we need to create that function and this is the function that's going to get invoked whenever

14
00:00:49,440 --> 00:00:51,120
the player makes the guess.

15
00:00:51,120 --> 00:00:55,320
And for now, we can console log out a message and how about we do it?

16
00:00:55,320 --> 00:01:02,610
Your guess is and this is where we need to select the value and we already have that game within the

17
00:01:02,610 --> 00:01:03,390
game object.

18
00:01:03,390 --> 00:01:04,650
We have the game input.

19
00:01:04,650 --> 00:01:07,950
And that means that we can select a value from that input.

20
00:01:07,950 --> 00:01:12,280
So whatever is available in that input is going to be what's going to show up in the console.

21
00:01:12,300 --> 00:01:12,750
Try that.

22
00:01:12,750 --> 00:01:13,860
It's a refresh.

23
00:01:13,860 --> 00:01:15,600
Guess your guess is blank.

24
00:01:15,810 --> 00:01:19,540
Your guess is for, your guess is five and so on.

25
00:01:19,560 --> 00:01:25,200
So now we're returning back, I guess, value that we can use and we can use this guess in order to

26
00:01:25,200 --> 00:01:30,210
detect to make sure then check to see how the player is doing and what their guesses.

27
00:01:30,480 --> 00:01:35,460
So we're able to pick that up and notice that this is always changing, depending on what's entered

28
00:01:35,460 --> 00:01:40,020
into our input field can see that as an input type number.

29
00:01:40,050 --> 00:01:42,450
We can still enter in some text in there.

30
00:01:42,450 --> 00:01:43,350
So we don't want that.

31
00:01:43,350 --> 00:01:45,180
We don't want the user entering and text.

32
00:01:45,390 --> 00:01:50,700
So we also have to check a few of the values here to make sure that it actually is a number.

33
00:01:50,700 --> 00:01:51,540
So let's do that.

34
00:01:51,540 --> 00:01:56,760
And this is going to be making use of some of the JavaScript utilities in order to handle different

35
00:01:56,760 --> 00:02:00,480
data types and converting them so we can check to see.

36
00:02:00,480 --> 00:02:05,760
So once we get that guess value, let's create a temporary variable for that.

37
00:02:05,790 --> 00:02:07,320
And we can call it temporary.

38
00:02:07,320 --> 00:02:07,800
Yes.

39
00:02:07,810 --> 00:02:11,310
So this is going to be returning back the value console log that.

40
00:02:11,320 --> 00:02:13,470
OK, so this is coming from an input.

41
00:02:13,470 --> 00:02:19,980
And even though it's a no input type, you can see that whenever we guess it, it's still being written

42
00:02:19,980 --> 00:02:20,940
as a string value.

43
00:02:21,090 --> 00:02:24,510
Whereas if we have a number, you can see it shows up blue in the console.

44
00:02:24,720 --> 00:02:31,200
So that means that we need to convert it into a number so we can take temp guess and we can equal it

45
00:02:31,200 --> 00:02:32,360
to temp guess.

46
00:02:32,360 --> 00:02:37,640
So we don't have to change the variable and manipulate this and change this into a number format.

47
00:02:37,680 --> 00:02:40,310
The way to do that is you can do parse integer.

48
00:02:40,560 --> 00:02:44,050
So this is going to automatically convert it into a number format.

49
00:02:44,070 --> 00:02:47,850
So now whenever I type that, you see it's being converted into a number.

50
00:02:48,030 --> 00:02:53,010
If I type in value of IEEE, we get returned back any end.

51
00:02:53,010 --> 00:02:56,460
So we're checking to see if that value is a number.

52
00:02:56,460 --> 00:03:02,550
And if it's not a number, then we can ask the player to suggest and to place a number in there.

53
00:03:02,560 --> 00:03:03,630
Let's do that check.

54
00:03:03,630 --> 00:03:06,570
And we can do this within a condition and we'll also have an elsea.

55
00:03:06,570 --> 00:03:10,380
So we're checking to see if Tempa guess is a number.

56
00:03:10,650 --> 00:03:15,330
There's a function in JavaScript that can determine whether the value is a number.

57
00:03:15,330 --> 00:03:22,110
So placed that into the user, please digits and then the color can be read because this is kind of

58
00:03:22,110 --> 00:03:23,260
like an error message.

59
00:03:23,260 --> 00:03:25,530
And before we try that, this should be uppercase.

60
00:03:25,530 --> 00:03:31,710
And so make sure that we can enter in a variable and says, please only enter in digits when we enter

61
00:03:31,710 --> 00:03:33,690
in digits, that we get the value.

62
00:03:33,690 --> 00:03:35,780
So we get everything is right there.

63
00:03:35,790 --> 00:03:39,540
So if it is a digit, we can apply some other conditions.

64
00:03:39,540 --> 00:03:47,130
And the condition here that we're looking for is if temp guess is equal to, we can do the three equal

65
00:03:47,130 --> 00:03:53,070
signs because this is a number and we're expecting a number and we've got a number in game number and

66
00:03:53,070 --> 00:03:54,780
let's say correct for this one.

67
00:03:54,780 --> 00:04:01,980
And then we can make this green and you guessed and we can also enter in the game number and then else.

68
00:04:02,010 --> 00:04:03,330
So this is the last one.

69
00:04:03,330 --> 00:04:07,890
And this would this can just say your guess was incorrect and this one can be read.

70
00:04:08,160 --> 00:04:09,300
So it was.

71
00:04:09,420 --> 00:04:11,220
And then it'll tell us what the number was.

72
00:04:11,220 --> 00:04:12,360
So guessing in five.

73
00:04:12,660 --> 00:04:13,350
Not correct.

74
00:04:13,350 --> 00:04:14,120
It was four.

75
00:04:14,610 --> 00:04:15,690
So if we guess four.

76
00:04:15,900 --> 00:04:17,370
Correct, you guessed four.

77
00:04:17,370 --> 00:04:20,000
And if we enter in something that's not a number.

78
00:04:20,010 --> 00:04:24,390
So if we're typing a bunch of letters in there, it says, please enter only digits.

79
00:04:24,400 --> 00:04:31,410
So we've got some conditions that we're applying in order to make sure that the input value is what

80
00:04:31,410 --> 00:04:32,220
we're looking for.

81
00:04:32,640 --> 00:04:38,310
And we can also apply some additional conditions checking to see if the number is less than or greater

82
00:04:38,310 --> 00:04:42,030
then, because we know at this point that it is actually a number.

83
00:04:42,040 --> 00:04:44,430
So that passes that check over here.

84
00:04:44,430 --> 00:04:49,590
We check to make sure that if the user guessed correctly, then we can run this block blockquote code.

85
00:04:49,920 --> 00:04:55,860
And if it's not correct, but it was a number, that means that this guess is either higher or lower

86
00:04:55,980 --> 00:04:57,720
so we can adjust accordingly.

87
00:04:57,810 --> 00:04:59,210
And we're going to add that with the.

88
00:04:59,320 --> 00:05:04,810
The message coming up as well, and then, of course, if you want the user to keep guessing at the

89
00:05:04,810 --> 00:05:11,600
number and count how many tries they're using, then this is where you can update that to tell them

90
00:05:11,620 --> 00:05:12,850
higher or lower.

91
00:05:12,970 --> 00:05:17,500
And then all we do, we're not going to actually show them the number that they're trying to guess simply

92
00:05:17,500 --> 00:05:20,380
output, whether it's higher or lower until they guess correctly.

93
00:05:20,390 --> 00:05:25,480
And then once they guessed correctly, then we can run another block of code to take action once the

94
00:05:25,480 --> 00:05:27,430
guess is correct and once they win the game.

95
00:05:27,460 --> 00:05:28,700
So that's all still to come.

96
00:05:28,720 --> 00:05:35,320
Go ahead and add in the ability to add the event listener making the guests, picking up the guests

97
00:05:35,320 --> 00:05:38,140
input and then applying some conditions to that input.