1
00:00:02,130 --> 00:00:04,400
So let's now add the logic

2
00:00:04,400 --> 00:00:06,150
that we need to this page,

3
00:00:06,150 --> 00:00:08,010
and we get different pieces of logic

4
00:00:08,010 --> 00:00:09,620
that need to be added.

5
00:00:09,620 --> 00:00:13,140
For example, we need to make our game configurable.

6
00:00:13,140 --> 00:00:14,900
That means that we should be able

7
00:00:14,900 --> 00:00:16,440
to click these edit buttons

8
00:00:16,440 --> 00:00:19,300
and choose player names.

9
00:00:19,300 --> 00:00:21,590
We should be able to click the Start New Game button

10
00:00:21,590 --> 00:00:24,040
and then only show this game board

11
00:00:24,040 --> 00:00:26,400
if we did click this button,

12
00:00:26,400 --> 00:00:27,860
and this button, on the other hand,

13
00:00:27,860 --> 00:00:31,620
should only be clickable if we did choose player names,

14
00:00:31,620 --> 00:00:35,020
so if we don't have these placeholders anymore.

15
00:00:35,020 --> 00:00:37,740
And, of course, we then also need the entire logic

16
00:00:37,740 --> 00:00:40,760
for making these game board items clickable,

17
00:00:40,760 --> 00:00:43,890
and we need a way of finding out who won.

18
00:00:43,890 --> 00:00:45,930
So we also need some logic for checking

19
00:00:45,930 --> 00:00:48,660
if we have three in a row horizontally,

20
00:00:48,660 --> 00:00:50,433
vertically or diagonally.

21
00:00:51,770 --> 00:00:53,460
Now, let's get there step by step,

22
00:00:53,460 --> 00:00:56,190
and let's start with the configuration

23
00:00:56,190 --> 00:00:59,223
with making these buttons here clickable.

24
00:01:00,240 --> 00:01:02,610
For that, in index.html,

25
00:01:02,610 --> 00:01:05,870
I wanna select these Edit buttons here

26
00:01:05,870 --> 00:01:07,520
and we have various way

27
00:01:07,520 --> 00:01:11,160
of making them selectable in JavaScript.

28
00:01:11,160 --> 00:01:13,590
The easiest way is to just add an id

29
00:01:13,590 --> 00:01:18,590
to the first button and name it edit-player-1-btn maybe.

30
00:01:19,780 --> 00:01:21,890
The name is up to you, of course.

31
00:01:21,890 --> 00:01:24,020
And add a similar id to the other button

32
00:01:24,020 --> 00:01:26,473
for player-2 but name it edit-player-2-btn.

33
00:01:27,800 --> 00:01:29,770
Now we can add JavaScript files

34
00:01:29,770 --> 00:01:31,520
and select these buttons by id,

35
00:01:31,520 --> 00:01:34,560
and then add an event listener to them.

36
00:01:34,560 --> 00:01:36,310
Add event listeners where we listen

37
00:01:36,310 --> 00:01:37,810
for the click event.

38
00:01:37,810 --> 00:01:39,890
Now, for that, I will add a brand new folder

39
00:01:39,890 --> 00:01:42,720
in this project, the scripts folder,

40
00:01:42,720 --> 00:01:44,780
which will hold my script files

41
00:01:44,780 --> 00:01:48,700
because I plan on using multiple script files,

42
00:01:48,700 --> 00:01:52,060
not just one large file with all the logic

43
00:01:52,060 --> 00:01:53,620
but instead, different files

44
00:01:53,620 --> 00:01:55,870
with different responsibilities

45
00:01:55,870 --> 00:01:57,840
to keep our code manageable

46
00:01:57,840 --> 00:02:01,600
and structure it such that it's easy to work with.

47
00:02:01,600 --> 00:02:02,433
And for this,

48
00:02:02,433 --> 00:02:06,570
I actually wanna have three script files in here.

49
00:02:06,570 --> 00:02:08,690
I'll name the first one app.js,

50
00:02:08,690 --> 00:02:09,930
and this should be the file

51
00:02:09,930 --> 00:02:14,930
which executes first, which initializes a bunch of things.

52
00:02:15,440 --> 00:02:18,190
For example, I wanna use this app.js file

53
00:02:18,190 --> 00:02:21,990
to reach out to different HTML elements,

54
00:02:21,990 --> 00:02:26,530
and store these elements or pointers at these elements

55
00:02:26,530 --> 00:02:29,813
in different JavaScript variables or constants.

56
00:02:30,740 --> 00:02:34,150
And then in the other JavaScript files which we'll add,

57
00:02:34,150 --> 00:02:36,580
I wanna use these constants and variables,

58
00:02:36,580 --> 00:02:39,640
which are initialized here in app.js

59
00:02:39,640 --> 00:02:42,530
so that this is our main entry file

60
00:02:42,530 --> 00:02:46,850
but not the file where we have the actual logic.

61
00:02:46,850 --> 00:02:49,340
Instead for this, I'll add a config.js file,

62
00:02:49,340 --> 00:02:52,380
which will be responsible for all the logic related

63
00:02:52,380 --> 00:02:54,520
to configuring players.

64
00:02:54,520 --> 00:02:56,530
So this is the file that should open

65
00:02:56,530 --> 00:02:58,150
and close the overlay.

66
00:02:58,150 --> 00:03:01,690
This is the file that should take the user input,

67
00:03:01,690 --> 00:03:04,450
validate it and store it.

68
00:03:04,450 --> 00:03:06,680
And then I wanna add a game.js file,

69
00:03:06,680 --> 00:03:09,250
which you guessed it will be responsible

70
00:03:09,250 --> 00:03:10,403
for the game logic.

71
00:03:11,700 --> 00:03:13,710
Now, let's start with app.js

72
00:03:13,710 --> 00:03:16,750
and then let's start with selecting these buttons

73
00:03:16,750 --> 00:03:19,833
to which we wanna add event listeners, click listeners.

74
00:03:20,690 --> 00:03:21,620
Now, for that, of course,

75
00:03:21,620 --> 00:03:24,620
first of all, we should make sure that these script files

76
00:03:24,620 --> 00:03:28,130
are loaded, and for that we need to add special elements

77
00:03:28,130 --> 00:03:30,180
in our index.html file.

78
00:03:30,180 --> 00:03:32,830
And that would be the script elements.

79
00:03:32,830 --> 00:03:35,760
I'm using separate JavaScript files, by the way,

80
00:03:35,760 --> 00:03:38,530
instead of just putting my JavaScript code right

81
00:03:38,530 --> 00:03:40,270
into this HTML file

82
00:03:40,270 --> 00:03:43,310
because we will write quite a bit of JavaScript code,

83
00:03:43,310 --> 00:03:46,470
and if we would put that all into this HTML file,

84
00:03:46,470 --> 00:03:50,000
this file would get very cluttered with JavaScript,

85
00:03:50,000 --> 00:03:50,970
and as you learned,

86
00:03:50,970 --> 00:03:53,680
you should try to keep your code files clean

87
00:03:53,680 --> 00:03:57,340
and maintainable and relatively lean.

88
00:03:57,340 --> 00:04:01,320
So the HTML file should really focus on HTML

89
00:04:01,320 --> 00:04:04,643
and not contain a lot of JavaScript code, for example.

90
00:04:05,660 --> 00:04:08,970
That's why instead, I'll add these script elements here

91
00:04:08,970 --> 00:04:11,070
in the head section,

92
00:04:11,070 --> 00:04:13,460
and it is important that you add opening

93
00:04:13,460 --> 00:04:15,660
and closing tags here.

94
00:04:15,660 --> 00:04:17,550
Unlike the link element,

95
00:04:17,550 --> 00:04:20,399
the script element is not self-closing.

96
00:04:20,399 --> 00:04:22,700
It's not a void element.

97
00:04:22,700 --> 00:04:26,100
And then here, I'll add source, src,

98
00:04:26,100 --> 00:04:29,390
to link to a different script file.

99
00:04:29,390 --> 00:04:34,310
And that's important it's src, not href for script files.

100
00:04:34,310 --> 00:04:39,243
And here we then link to scripts/app.js.

101
00:04:40,810 --> 00:04:45,810
I also wanna link to my config and game.js files.

102
00:04:45,870 --> 00:04:47,540
And actually, what I'll do

103
00:04:47,540 --> 00:04:52,540
is I'll add them before the app.js file gets executed.

104
00:04:54,960 --> 00:04:57,460
So I'll then first add config.js

105
00:04:57,460 --> 00:04:59,490
and then game.js.

106
00:04:59,490 --> 00:05:01,830
And why am I doing that?

107
00:05:01,830 --> 00:05:03,940
Because as I said, in app.js,

108
00:05:03,940 --> 00:05:06,430
I wanna initialize all my constants,

109
00:05:06,430 --> 00:05:08,120
and I wanna kick off the game

110
00:05:08,120 --> 00:05:10,410
but in order to do that,

111
00:05:10,410 --> 00:05:13,580
I, first of all, need to define all my configuration

112
00:05:13,580 --> 00:05:16,870
and game logic so that I can then refer

113
00:05:16,870 --> 00:05:20,660
to that already-defined game and config logic in app.js

114
00:05:20,660 --> 00:05:22,760
as a last step.

115
00:05:22,760 --> 00:05:24,820
And that's why config and game.js need

116
00:05:24,820 --> 00:05:26,420
to be defined first

117
00:05:26,420 --> 00:05:28,970
so that I can use the logic defined in there

118
00:05:28,970 --> 00:05:31,603
in app.js to then start everything.

119
00:05:32,490 --> 00:05:36,310
You'll see it come together once we start writing the code.

120
00:05:36,310 --> 00:05:39,830
Now, very important, we should add the defer attribute

121
00:05:39,830 --> 00:05:41,420
to all these scripts

122
00:05:41,420 --> 00:05:44,530
to ensure that they are only executed

123
00:05:44,530 --> 00:05:47,540
once the entire HTML content of this page

124
00:05:47,540 --> 00:05:49,390
has been loaded and parsed,

125
00:05:49,390 --> 00:05:52,913
otherwise interacting with the DOM won't be possible here.

126
00:05:53,970 --> 00:05:58,200
And now with that, we can start writing code.

127
00:05:58,200 --> 00:06:00,130
And even though it will execute last,

128
00:06:00,130 --> 00:06:01,810
I will start with app.js

129
00:06:01,810 --> 00:06:05,620
because here I now wanna get access to these edit buttons.

130
00:06:05,620 --> 00:06:07,620
For this, I'll add a new constant

131
00:06:07,620 --> 00:06:11,210
because I don't plan on reassigning a new value

132
00:06:11,210 --> 00:06:12,470
to this variable here,

133
00:06:12,470 --> 00:06:14,620
hence I'll make it a constant.

134
00:06:14,620 --> 00:06:19,620
And name it editPlayer1BtnElement.

135
00:06:20,655 --> 00:06:21,488
This name is up to you

136
00:06:21,488 --> 00:06:24,140
but it should describe what will be stored in here

137
00:06:24,140 --> 00:06:26,840
and here, I plan on storing a pointer

138
00:06:26,840 --> 00:06:30,640
at this button that allows us to edit player one.

139
00:06:30,640 --> 00:06:33,930
Hence, this sounds like a fitting constant name.

140
00:06:33,930 --> 00:06:37,063
And now we gave that button an id,

141
00:06:37,970 --> 00:06:41,970
the id of edit-player-1-btn with dashes,

142
00:06:41,970 --> 00:06:44,280
and hence, I wanna select by that ID,

143
00:06:44,280 --> 00:06:45,800
so I'll get access to this button

144
00:06:45,800 --> 00:06:47,660
by using the document object,

145
00:06:47,660 --> 00:06:49,510
which exists globally.

146
00:06:49,510 --> 00:06:50,960
And then using getElementById

147
00:06:52,110 --> 00:06:55,373
and using that ID to get hold of that button.

148
00:06:57,054 --> 00:07:01,950
And now we can repeat that for the button for player two.

149
00:07:01,950 --> 00:07:04,460
Name that constant differently, of course.

150
00:07:04,460 --> 00:07:07,490
Name it editPlayer2BtnElement.

151
00:07:07,490 --> 00:07:10,270
And also use the different ID here

152
00:07:10,270 --> 00:07:12,470
because in index.html, of course,

153
00:07:12,470 --> 00:07:14,803
we also have the different ID here.

154
00:07:16,750 --> 00:07:18,970
Now we got hold of these buttons,

155
00:07:18,970 --> 00:07:21,460
now the goal is to connect these buttons

156
00:07:21,460 --> 00:07:24,410
with click listeners or to add click listeners

157
00:07:24,410 --> 00:07:25,690
to these buttons.

158
00:07:25,690 --> 00:07:28,070
To then open the overlay,

159
00:07:28,070 --> 00:07:29,810
which we saw before on the screen

160
00:07:29,810 --> 00:07:32,403
whenever we click one of these edit buttons.

161
00:07:33,520 --> 00:07:34,530
Now, for that, of course,

162
00:07:34,530 --> 00:07:37,760
we can use the editPlayer1BtnElement here

163
00:07:37,760 --> 00:07:40,080
and add an EventListener.

164
00:07:40,080 --> 00:07:43,430
That's how we learned to add event listeners before.

165
00:07:43,430 --> 00:07:46,410
And there are all kinds of listeners we can add.

166
00:07:46,410 --> 00:07:49,490
Here, I wanna listen for standard clicks.

167
00:07:49,490 --> 00:07:52,740
So as a string and as a first parameter value,

168
00:07:52,740 --> 00:07:54,653
I pass click here.

169
00:07:55,490 --> 00:07:57,340
Now the second value,

170
00:07:57,340 --> 00:07:59,820
which we have to pass to addEventListener

171
00:07:59,820 --> 00:08:02,790
should be a pointer at the function

172
00:08:02,790 --> 00:08:04,630
that should be executed.

173
00:08:04,630 --> 00:08:06,930
And that's now the interesting part.

174
00:08:06,930 --> 00:08:09,410
This function doesn't exist yet.

175
00:08:09,410 --> 00:08:12,630
We could define it here in this app.js file

176
00:08:12,630 --> 00:08:15,500
but by idea is that I don't do this here

177
00:08:15,500 --> 00:08:18,490
but that we instead do this in config.js

178
00:08:18,490 --> 00:08:21,370
because that is the file that should hold all the logic

179
00:08:21,370 --> 00:08:24,023
related to configuring our players.

180
00:08:24,930 --> 00:08:28,660
That's why I now will add a function in config.js

181
00:08:28,660 --> 00:08:30,440
with the function keyword,

182
00:08:30,440 --> 00:08:33,010
which I will name openPlayerConfig.

183
00:08:35,400 --> 00:08:36,750
Like this.

184
00:08:36,750 --> 00:08:40,419
And that's the function I wanna use in app.js.

185
00:08:40,419 --> 00:08:44,740
Now, the great thing is that with JavaScript in the browser,

186
00:08:44,740 --> 00:08:48,690
you can define a function or a constant

187
00:08:48,690 --> 00:08:53,410
in file A and then use it in file B.

188
00:08:53,410 --> 00:08:54,430
That works.

189
00:08:54,430 --> 00:08:57,030
That is something you can do in JavaScript

190
00:08:57,030 --> 00:08:58,310
in the browser.

191
00:08:58,310 --> 00:09:01,190
What's important though is the order.

192
00:09:01,190 --> 00:09:03,830
You, first of all, have to execute the file

193
00:09:03,830 --> 00:09:06,060
where you define something.

194
00:09:06,060 --> 00:09:07,400
Let's say a function

195
00:09:07,400 --> 00:09:08,750
and then in a second step,

196
00:09:08,750 --> 00:09:13,310
you execute the file where you use that thing.

197
00:09:13,310 --> 00:09:16,950
So if in app.js I wanna use the function defined

198
00:09:16,950 --> 00:09:20,660
in config.js, the openPlayerConfig function,

199
00:09:20,660 --> 00:09:24,720
then I, first of all, have to execute config.js

200
00:09:24,720 --> 00:09:27,640
so that the function is defined globally

201
00:09:27,640 --> 00:09:29,430
in this loaded page

202
00:09:29,430 --> 00:09:32,580
and then I execute app.js in a second step

203
00:09:32,580 --> 00:09:36,860
so that I can use the globally defined function there.

204
00:09:36,860 --> 00:09:37,910
And that's what we're doing here

205
00:09:37,910 --> 00:09:40,520
by loading config.js first.

206
00:09:40,520 --> 00:09:43,000
Now, in config.js, I define this function,

207
00:09:43,000 --> 00:09:45,490
which at the moment doesn't do anything.

208
00:09:45,490 --> 00:09:47,700
In app.js, we can now add a pointer

209
00:09:47,700 --> 00:09:51,153
at this function as a second parameter value.

210
00:09:52,410 --> 00:09:55,240
Very important, don't add parentheses here.

211
00:09:55,240 --> 00:09:57,980
Instead really just use the function name

212
00:09:57,980 --> 00:10:00,430
because we don't wanna execute it immediately

213
00:10:00,430 --> 00:10:02,800
when this file of code gets parsed.

214
00:10:02,800 --> 00:10:05,400
Instead, when this line of code gets parsed,

215
00:10:05,400 --> 00:10:07,160
the browser should just know

216
00:10:07,160 --> 00:10:08,970
which function to execute

217
00:10:08,970 --> 00:10:11,960
when such a click on that button occurs.

218
00:10:11,960 --> 00:10:15,360
And then the browser will execute the function for us

219
00:10:15,360 --> 00:10:17,430
when that is the case.

220
00:10:17,430 --> 00:10:19,770
So therefore, we then just point at the function here

221
00:10:19,770 --> 00:10:22,290
so that the browser knows what to execute

222
00:10:22,290 --> 00:10:23,763
when that button is clicked.

223
00:10:25,070 --> 00:10:27,670
And I'll add that exact same function

224
00:10:27,670 --> 00:10:31,840
to my editPlayer2BtnElement here.

225
00:10:31,840 --> 00:10:34,780
Now, we'll then add some logic inside of the function

226
00:10:34,780 --> 00:10:37,900
that allows us to find out which button was clicked.

227
00:10:37,900 --> 00:10:39,250
But that's a start now

228
00:10:39,250 --> 00:10:41,870
and that's how we can add these click listeners.

229
00:10:41,870 --> 00:10:42,950
Now let's continue

230
00:10:42,950 --> 00:10:46,870
with adding the logic inside of openPlayerConfig.