1
00:00:01,320 --> 00:00:04,820
<v ->Let's now make our application actually do something</v>

2
00:00:04,820 --> 00:00:06,943
when we click on the Check button.

3
00:00:08,610 --> 00:00:11,740
So this is going to be the first time that our code

4
00:00:11,740 --> 00:00:15,430
reacts to something that happens in the DOM.

5
00:00:15,430 --> 00:00:16,340
And for that,

6
00:00:16,340 --> 00:00:19,120
we need to use an event listener.

7
00:00:19,120 --> 00:00:23,170
Now, an event is something that happens on the page.

8
00:00:23,170 --> 00:00:25,220
For example, a mouse click,

9
00:00:25,220 --> 00:00:26,910
or a mouse moving,

10
00:00:26,910 --> 00:00:28,300
or a key press,

11
00:00:28,300 --> 00:00:30,450
or many other events.

12
00:00:30,450 --> 00:00:32,530
Then, with an event listener,

13
00:00:32,530 --> 00:00:35,180
we can wait for a certain event to happen,

14
00:00:35,180 --> 00:00:37,660
and then react to it.

15
00:00:37,660 --> 00:00:39,650
So let's try it out now.

16
00:00:39,650 --> 00:00:42,630
And let's actually start by getting rid of this code

17
00:00:42,630 --> 00:00:45,310
because this has actually nothing yet to do

18
00:00:45,310 --> 00:00:46,910
with the application.

19
00:00:46,910 --> 00:00:49,060
But now we will actually start developing

20
00:00:49,060 --> 00:00:51,253
the application step by step.

21
00:00:52,200 --> 00:00:54,900
Anyway, in order to listen for events,

22
00:00:54,900 --> 00:00:56,910
we first need to select the element

23
00:00:56,910 --> 00:00:58,940
where the event should happen.

24
00:00:58,940 --> 00:00:59,773
And in this case,

25
00:00:59,773 --> 00:01:02,440
we want to listen to the event on this

26
00:01:02,440 --> 00:01:03,560
button element here,

27
00:01:03,560 --> 00:01:05,120
so this Check button.

28
00:01:05,120 --> 00:01:06,910
Because this is where the click

29
00:01:06,910 --> 00:01:09,840
that we're interested in will happen.

30
00:01:09,840 --> 00:01:11,230
So when we click on this button,

31
00:01:11,230 --> 00:01:12,853
something should happen.

32
00:01:14,810 --> 00:01:19,000
So let's select that button element.

33
00:01:19,000 --> 00:01:20,730
So querySelector.

34
00:01:22,510 --> 00:01:24,650
And then once more, we need to go ahead

35
00:01:24,650 --> 00:01:28,760
and grab the class name of this button.

36
00:01:28,760 --> 00:01:31,360
And so here it is.

37
00:01:31,360 --> 00:01:33,760
Now here, we actually have two class names,

38
00:01:33,760 --> 00:01:36,000
we have button and check.

39
00:01:36,000 --> 00:01:38,900
But the button class here is the more generic one,

40
00:01:38,900 --> 00:01:41,350
which also applies to this other button,

41
00:01:41,350 --> 00:01:43,050
this Again button here.

42
00:01:43,050 --> 00:01:45,230
So the class that we are interested in

43
00:01:45,230 --> 00:01:46,793
is just the check class.

44
00:01:48,110 --> 00:01:52,760
So again, the dot for the class selector,

45
00:01:52,760 --> 00:01:53,763
and then check.

46
00:01:54,740 --> 00:01:58,740
And so this will select the button element itself.

47
00:01:58,740 --> 00:02:00,170
So just as before,

48
00:02:00,170 --> 00:02:03,130
this here will then return an element.

49
00:02:03,130 --> 00:02:04,630
And now on that element,

50
00:02:04,630 --> 00:02:08,070
we can call the addEventListener method.

51
00:02:08,070 --> 00:02:11,773
So addEventListener.

52
00:02:12,800 --> 00:02:13,920
And this is a method

53
00:02:13,920 --> 00:02:17,700
and so we need to call it once more using the parenthesis.

54
00:02:17,700 --> 00:02:19,770
Now, there are actually multiple ways

55
00:02:19,770 --> 00:02:22,600
to listen for events in JavaScript.

56
00:02:22,600 --> 00:02:25,430
But using this addEventListener method

57
00:02:25,430 --> 00:02:28,980
is the best one and also the most used one.

58
00:02:28,980 --> 00:02:29,813
Okay.

59
00:02:29,813 --> 00:02:32,160
Now into this addEventListener method,

60
00:02:32,160 --> 00:02:35,940
we first need to pass in the type of the event.

61
00:02:35,940 --> 00:02:38,353
And in this case, it's just a simple click.

62
00:02:39,280 --> 00:02:42,200
So the name of the event is actually Click,

63
00:02:42,200 --> 00:02:44,980
and so that is the first argument

64
00:02:44,980 --> 00:02:47,290
that we pass here into this function.

65
00:02:47,290 --> 00:02:48,770
But now, we actually need

66
00:02:48,770 --> 00:02:52,280
to tell the event listener what to do.

67
00:02:52,280 --> 00:02:55,600
So basically, we need to specify the reaction

68
00:02:55,600 --> 00:02:57,230
to the Click event.

69
00:02:57,230 --> 00:02:59,667
And we do that by defining a function.

70
00:02:59,667 --> 00:03:02,930
And that function will contain exactly the code

71
00:03:02,930 --> 00:03:06,890
that should be executed whenever this click event happens

72
00:03:06,890 --> 00:03:08,680
on this Check button.

73
00:03:08,680 --> 00:03:11,950
And that function is going to be called the event handler.

74
00:03:11,950 --> 00:03:15,430
Now, this method, this addEventListener method here

75
00:03:15,430 --> 00:03:17,630
is a special kind of function.

76
00:03:17,630 --> 00:03:20,200
That's because as a second argument,

77
00:03:20,200 --> 00:03:22,503
it expects this event handler function

78
00:03:22,503 --> 00:03:24,420
that we just talked about.

79
00:03:24,420 --> 00:03:27,230
So again, here as the second argument,

80
00:03:27,230 --> 00:03:31,870
we now need to pass in a function value as an argument.

81
00:03:31,870 --> 00:03:34,990
And that's probably quite confusing, I know.

82
00:03:34,990 --> 00:03:36,950
But that's no problem at this point.

83
00:03:36,950 --> 00:03:38,270
This will make more sense,

84
00:03:38,270 --> 00:03:40,656
as we do this over and over again.

85
00:03:40,656 --> 00:03:43,040
For now, just remember what you learned

86
00:03:43,040 --> 00:03:44,920
in the fundamental section,

87
00:03:44,920 --> 00:03:48,720
which is that a function is also just a value.

88
00:03:48,720 --> 00:03:50,920
And if a function is just a value,

89
00:03:50,920 --> 00:03:54,020
then we can also pass it into another function

90
00:03:54,020 --> 00:03:55,290
as an argument,

91
00:03:55,290 --> 00:03:59,410
just like any other value,
like a string or a number.

92
00:03:59,410 --> 00:04:02,060
So let's create that function here.

93
00:04:02,060 --> 00:04:06,573
And just like before, we do that writing function,

94
00:04:08,281 --> 00:04:11,780
and then the curly braces for the function body.

95
00:04:11,780 --> 00:04:12,613
Okay.

96
00:04:12,613 --> 00:04:16,220
And now all we have to do is to specify what should happen.

97
00:04:16,220 --> 00:04:18,060
And to start, what we want to happen

98
00:04:18,060 --> 00:04:19,790
is to simply log to the console,

99
00:04:19,790 --> 00:04:23,643
the value that is here in this input field.

100
00:04:25,450 --> 00:04:27,640
So console.log,

101
00:04:27,640 --> 00:04:29,650
document.querySelector.

102
00:04:31,590 --> 00:04:34,430
And actually, we already have this code up there,

103
00:04:34,430 --> 00:04:36,670
but let's just write it again.

104
00:04:36,670 --> 00:04:41,253
So remember that this element here has the class guess.

105
00:04:42,100 --> 00:04:45,223
And then from this element, we take the value.

106
00:04:47,290 --> 00:04:48,123
Okay?

107
00:04:48,123 --> 00:04:49,530
And that's it.

108
00:04:49,530 --> 00:04:50,660
So let's save it.

109
00:04:50,660 --> 00:04:55,000
Let's test it, and then we will just go over this again.

110
00:04:55,000 --> 00:04:56,350
So I will write nine.

111
00:04:56,350 --> 00:04:57,970
And now when I click this button,

112
00:04:57,970 --> 00:05:00,733
this nine should appear down here in the console.

113
00:05:02,410 --> 00:05:03,943
And it does.

114
00:05:05,170 --> 00:05:06,740
Okay, great.

115
00:05:06,740 --> 00:05:08,180
Great job.

116
00:05:08,180 --> 00:05:10,860
So let's quickly go over this again.

117
00:05:10,860 --> 00:05:15,330
So we selected this button here using querySelector.

118
00:05:15,330 --> 00:05:19,490
And then we use the addEventListener method on that element

119
00:05:19,490 --> 00:05:21,510
to attach an event handler.

120
00:05:21,510 --> 00:05:25,190
And that event handler is this function here.

121
00:05:25,190 --> 00:05:28,940
Okay, so this is, again, just a function expression.

122
00:05:28,940 --> 00:05:32,713
So it's similar to when we do just, for example,

123
00:05:33,920 --> 00:05:37,573
this and then just log something to the console.

124
00:05:38,790 --> 00:05:42,030
So this is also just a function value, right?

125
00:05:42,030 --> 00:05:45,720
And then we can assign that to a variable.

126
00:05:45,720 --> 00:05:49,320
And then we call all of this a function expression.

127
00:05:49,320 --> 00:05:51,580
You will remember that, right?

128
00:05:51,580 --> 00:05:54,520
And so here, basically, we did the exact same thing.

129
00:05:54,520 --> 00:05:56,860
So we wrote here a function

130
00:05:56,860 --> 00:05:59,170
that has a similar format as this.

131
00:05:59,170 --> 00:06:02,120
We simply did not assign it to any variable.

132
00:06:02,120 --> 00:06:04,700
Instead, we passed it directly here

133
00:06:04,700 --> 00:06:07,723
into the addEventListener method.

134
00:06:08,750 --> 00:06:10,380
So as the first argument,

135
00:06:10,380 --> 00:06:13,290
we had the name of the event that we're listening for,

136
00:06:13,290 --> 00:06:14,580
which is a click.

137
00:06:14,580 --> 00:06:16,400
And then as the second argument,

138
00:06:16,400 --> 00:06:18,770
we have this function value.

139
00:06:18,770 --> 00:06:21,010
And this function simply contains the code

140
00:06:21,010 --> 00:06:24,940
that we want to execute whenever the event happens.

141
00:06:24,940 --> 00:06:27,590
Also, note that we do not call

142
00:06:27,590 --> 00:06:30,280
this function here anywhere, right?

143
00:06:30,280 --> 00:06:32,690
We only define the function here,

144
00:06:32,690 --> 00:06:35,350
and then pass it into the event handler.

145
00:06:35,350 --> 00:06:37,290
But it is the JavaScript engine

146
00:06:37,290 --> 00:06:40,731
who will call this function as soon as the event happens.

147
00:06:40,731 --> 00:06:41,564
Okay?

148
00:06:41,564 --> 00:06:43,510
That's important to understand.

149
00:06:43,510 --> 00:06:46,890
So again, this function will not be called immediately

150
00:06:46,890 --> 00:06:49,940
once the script here is executed.

151
00:06:49,940 --> 00:06:52,260
This function will only be called

152
00:06:52,260 --> 00:06:54,820
as soon as the event happens.

153
00:06:54,820 --> 00:06:57,160
And you can also see that here in the code,

154
00:06:57,160 --> 00:07:00,070
because, well, we don't call the function anywhere

155
00:07:00,070 --> 00:07:02,960
using the parenthesis, right?

156
00:07:02,960 --> 00:07:06,830
And so, now, again, we're just really passing it

157
00:07:06,830 --> 00:07:09,053
into the addEventListener function.

158
00:07:10,890 --> 00:07:12,020
So this works just fine.

159
00:07:12,020 --> 00:07:14,750
Now, let's try here, another number.

160
00:07:14,750 --> 00:07:16,610
So now we get 99.

161
00:07:16,610 --> 00:07:20,800
And of course, we can also do some DOM manipulation here.

162
00:07:20,800 --> 00:07:22,530
For example, let's just, for example,

163
00:07:22,530 --> 00:07:27,250
grab this piece of code here and paste it here as well.

164
00:07:29,780 --> 00:07:31,210
Give it a save.

165
00:07:31,210 --> 00:07:33,100
And now when I click this here,

166
00:07:33,100 --> 00:07:36,030
not only the value from this input field

167
00:07:36,030 --> 00:07:37,660
will get logged to the console,

168
00:07:37,660 --> 00:07:40,200
but also this message here will change.

169
00:07:40,200 --> 00:07:42,163
So the text content of this element.

170
00:07:45,070 --> 00:07:48,520
So you see, correct number and now 22.

171
00:07:48,520 --> 00:07:52,963
Now, of course, this has nothing to do with the game yet.

172
00:07:54,210 --> 00:07:56,200
So I just wanted to show you that.

173
00:07:56,200 --> 00:07:59,580
But let me get rid of this, actually.

174
00:07:59,580 --> 00:08:03,870
But now let's actually start to slowly build up the game.

175
00:08:03,870 --> 00:08:05,060
So in the real game,

176
00:08:05,060 --> 00:08:06,317
when we click on this button here,

177
00:08:06,317 --> 00:08:09,710
of course, this number from this input field

178
00:08:09,710 --> 00:08:11,720
will have to get retrieved.

179
00:08:11,720 --> 00:08:13,200
So let's start with that.

180
00:08:13,200 --> 00:08:16,080
And so we already did this here,

181
00:08:16,080 --> 00:08:18,600
but instead of just logging it to the console,

182
00:08:18,600 --> 00:08:21,303
let's actually save it into a variable.

183
00:08:23,110 --> 00:08:28,050
So const, guess, and then equal this.

184
00:08:29,220 --> 00:08:30,090
Okay?

185
00:08:30,090 --> 00:08:33,713
And now let's log it to the console just so we see it.

186
00:08:34,790 --> 00:08:37,580
And so this should now do the exact same thing.

187
00:08:37,580 --> 00:08:40,570
But we first stored that value into a variable,

188
00:08:40,570 --> 00:08:42,553
and then we log it afterwards.

189
00:08:44,950 --> 00:08:46,360
All right.

190
00:08:46,360 --> 00:08:49,550
Now, remember how I said in the fundamental section,

191
00:08:49,550 --> 00:08:52,220
that usually whenever we get something

192
00:08:52,220 --> 00:08:55,770
from the user interface, for example, from an input field,

193
00:08:55,770 --> 00:08:58,030
it usually always is a string.

194
00:08:58,030 --> 00:08:59,830
So let me show that to you here now.

195
00:09:02,090 --> 00:09:03,810
So again, we use the type of operator

196
00:09:03,810 --> 00:09:06,080
that we already learned before.

197
00:09:06,080 --> 00:09:09,833
And now when I put this here, we indeed get a string.

198
00:09:11,160 --> 00:09:14,890
However, we will eventually have to compare this number here

199
00:09:14,890 --> 00:09:17,420
with a randomly generated number.

200
00:09:17,420 --> 00:09:19,583
So that's going to be basically the secret number

201
00:09:19,583 --> 00:09:21,063
that we will have to guess.

202
00:09:22,030 --> 00:09:25,420
And so if we want to compare numbers with numbers,

203
00:09:25,420 --> 00:09:28,223
we need to first convert this string to a number.

204
00:09:29,300 --> 00:09:32,270
So let's do that here, using the number of function

205
00:09:32,270 --> 00:09:34,603
that we also already used before.

206
00:09:35,620 --> 00:09:39,083
And so now, let's print both here.

207
00:09:40,338 --> 00:09:42,003
So the guess and then the type.

208
00:09:44,670 --> 00:09:46,420
And now we get five.

209
00:09:46,420 --> 00:09:48,520
And now it's also here in purple,

210
00:09:48,520 --> 00:09:51,480
and we get that it's a number.

211
00:09:51,480 --> 00:09:55,250
And now, let's start to implement the game logic

212
00:09:55,250 --> 00:09:56,480
here a little bit.

213
00:09:56,480 --> 00:09:58,100
But just the simplest case,

214
00:09:58,100 --> 00:10:02,320
which is the case that there's a actually no guess.

215
00:10:02,320 --> 00:10:04,620
So usually in an application like this,

216
00:10:04,620 --> 00:10:06,950
which has an input value from the user,

217
00:10:06,950 --> 00:10:07,960
the first thing to do

218
00:10:07,960 --> 00:10:10,940
is to check if there actually is a value.

219
00:10:10,940 --> 00:10:12,940
And if there is no value, well,

220
00:10:12,940 --> 00:10:16,970
then we can print something to the console as a response.

221
00:10:16,970 --> 00:10:21,463
So we can say, if there is no guess.

222
00:10:22,490 --> 00:10:25,203
And let me actually show you how that would look like.

223
00:10:26,050 --> 00:10:30,160
So if I click on the button now, indeed, we get zero,

224
00:10:30,160 --> 00:10:32,580
and zero is a false value.

225
00:10:32,580 --> 00:10:33,413
Okay?

226
00:10:33,413 --> 00:10:36,290
And so guess our here, in this logical context

227
00:10:36,290 --> 00:10:39,770
of the FL statement, will be false.

228
00:10:39,770 --> 00:10:42,920
So that's what we learned in the fundamental section, right?

229
00:10:42,920 --> 00:10:45,760
So any value that is here in this condition part

230
00:10:45,760 --> 00:10:48,370
will always get evaluated to a Boolean.

231
00:10:48,370 --> 00:10:53,250
And so since this guess, is zero, in this case,

232
00:10:53,250 --> 00:10:57,850
and zero is a false value, it will be converted to false.

233
00:10:57,850 --> 00:11:01,690
But we want something to happen whenever this is false.

234
00:11:01,690 --> 00:11:05,640
And so here, we actually want a true value, right?

235
00:11:05,640 --> 00:11:06,923
And so we simply use the negation operator

236
00:11:06,923 --> 00:11:11,923
to then invert this Boolean from false to true.

237
00:11:13,950 --> 00:11:17,410
So in this case, we can then print some sort of message

238
00:11:17,410 --> 00:11:21,490
here to our message field, or message element.

239
00:11:21,490 --> 00:11:24,090
And so let me, again, go ahead and copy it from here

240
00:11:24,970 --> 00:11:26,723
because we already did that before.

241
00:11:30,370 --> 00:11:33,983
So let's say no number.

242
00:11:35,310 --> 00:11:37,573
And then as always an emoji here.

243
00:11:39,300 --> 00:11:40,423
Let's do this one.

244
00:11:42,050 --> 00:11:44,273
Or actually, it's more like forbidden.

245
00:11:46,540 --> 00:11:47,853
So that's the one I used.

246
00:11:49,080 --> 00:11:50,340
Let's save it.

247
00:11:50,340 --> 00:11:54,330
And so now whenever I click this button, let's check it,

248
00:11:54,330 --> 00:11:57,370
then indeed, we get no number.

249
00:11:57,370 --> 00:11:58,680
Okay?

250
00:11:58,680 --> 00:12:02,360
So again, this works because zero is false

251
00:12:02,360 --> 00:12:05,250
And so guess here is false now.

252
00:12:05,250 --> 00:12:08,640
But then we use the NOT operator to convert it to true.

253
00:12:08,640 --> 00:12:12,640
And like this, we can then make this block of code execute.

254
00:12:12,640 --> 00:12:14,930
Because remember, it only executes

255
00:12:14,930 --> 00:12:18,340
whenever this whole condition here is true.

256
00:12:18,340 --> 00:12:19,173
Okay.

257
00:12:19,173 --> 00:12:22,190
And so with this, we implemented the first scenario.

258
00:12:22,190 --> 00:12:24,340
So again, usually, the first scenario

259
00:12:24,340 --> 00:12:27,410
is always to assume that there is actually no input,

260
00:12:27,410 --> 00:12:30,670
and then we need to respond to that somehow.

261
00:12:30,670 --> 00:12:31,670
Now, in the next video,

262
00:12:31,670 --> 00:12:34,290
we will then implement all the other scenarios,

263
00:12:34,290 --> 00:12:38,020
for example, where this guess here is actually correct.

264
00:12:38,020 --> 00:12:40,630
So where it's equal to the secret number.

265
00:12:40,630 --> 00:12:43,360
So we will have to generate that secret number then

266
00:12:43,360 --> 00:12:45,500
and compare it to the guess.

267
00:12:45,500 --> 00:12:47,853
But let's leave that to the next video.