WEBVTT

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.