Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,390 --> 00:00:04,650
Welcome back to project number three
2
2
00:00:04,650 --> 00:00:06,590
of this section,
3
3
00:00:06,590 --> 00:00:09,730
and this project is going to be the most exciting one
4
4
00:00:09,730 --> 00:00:12,570
because now we will take everything that we learned
5
5
00:00:12,570 --> 00:00:15,950
in the first two projects to a whole new level
6
6
00:00:15,950 --> 00:00:19,163
and build a really cool and amazing game.
7
7
00:00:20,840 --> 00:00:23,610
And this is the game that I was talking about
8
8
00:00:23,610 --> 00:00:25,730
and it's called the pick game.
9
9
00:00:25,730 --> 00:00:27,160
Now this project here
10
10
00:00:27,160 --> 00:00:30,260
is really going to be a practice project.
11
11
00:00:30,260 --> 00:00:32,170
So a project where you and me
12
12
00:00:32,170 --> 00:00:36,200
will together reinforce all the skills that you have learned
13
13
00:00:36,200 --> 00:00:37,990
up until this point,
14
14
00:00:37,990 --> 00:00:40,750
because remember from the last section,
15
15
00:00:40,750 --> 00:00:44,510
reinforcing knowledge is one of the most important things
16
16
00:00:44,510 --> 00:00:47,170
that you can do to learn, right?
17
17
00:00:47,170 --> 00:00:48,730
So in this project,
18
18
00:00:48,730 --> 00:00:52,450
I will do a little bit less explaining than before,
19
19
00:00:52,450 --> 00:00:55,180
at least about the stuff that we already learned,
20
20
00:00:55,180 --> 00:00:59,030
because we are really just practicing here. Okay.
21
21
00:00:59,030 --> 00:01:02,030
Now, if you're in a hurry and just want to learn the basics,
22
22
00:01:02,030 --> 00:01:04,340
please feel free to skip this project.
23
23
00:01:04,340 --> 00:01:06,950
But of course, I would still really advise you
24
24
00:01:06,950 --> 00:01:08,853
to code along with me here,
25
25
00:01:09,700 --> 00:01:13,270
but now let's see how this game actually works.
26
26
00:01:13,270 --> 00:01:15,810
And in fact, you can try that along with me
27
27
00:01:16,773 --> 00:01:20,860
because this time I hosted this demo, on a live website.
28
28
00:01:20,860 --> 00:01:25,623
So you can access that by pickgamev2.netlify.app
29
29
00:01:26,620 --> 00:01:28,990
And the link is also in the read me file
30
30
00:01:28,990 --> 00:01:33,790
of the repository for this course on github.com.
31
31
00:01:33,790 --> 00:01:36,970
But anyway, this is more of a real game now
32
32
00:01:36,970 --> 00:01:39,630
because we actually have two players.
33
33
00:01:39,630 --> 00:01:42,740
So you can play this with a friend or something
34
34
00:01:42,740 --> 00:01:44,970
or just against yourself.
35
35
00:01:44,970 --> 00:01:47,630
So the idea is that we roll a dice.
36
36
00:01:47,630 --> 00:01:49,830
And so now I'm playing number one.
37
37
00:01:49,830 --> 00:01:52,320
So this one is now the active player.
38
38
00:01:52,320 --> 00:01:54,220
So I roll a dice,
39
39
00:01:54,220 --> 00:01:56,050
And so you see that I rolled a two.
40
40
00:01:56,050 --> 00:02:00,750
And so this number gets added to my current score down here.
41
41
00:02:00,750 --> 00:02:04,090
Okay. So this is my current score for the current round.
42
42
00:02:04,090 --> 00:02:06,000
And this year is my total score.
43
43
00:02:06,000 --> 00:02:08,350
And so let's see how that's going to work
44
44
00:02:08,350 --> 00:02:11,570
so I can roll the dice again now if I want to,
45
45
00:02:11,570 --> 00:02:12,850
and now I rolled a four
46
46
00:02:14,167 --> 00:02:16,720
and that four got added to the two that it had previously.
47
47
00:02:16,720 --> 00:02:21,120
So now that's six and now I can choose to hold this score.
48
48
00:02:21,120 --> 00:02:22,730
So if I click this button,
49
49
00:02:22,730 --> 00:02:24,950
this score of the current round
50
50
00:02:24,950 --> 00:02:26,940
will get added to my total score,
51
51
00:02:26,940 --> 00:02:28,900
which right now is zero.
52
52
00:02:28,900 --> 00:02:33,007
And so when I hold a den, my score will be zero now.
53
53
00:02:33,007 --> 00:02:36,640
And we switched to player number two,
54
54
00:02:36,640 --> 00:02:39,340
and now I can click roll dice again.
55
55
00:02:39,340 --> 00:02:42,800
So we rolled a two and I can hold again.
56
56
00:02:42,800 --> 00:02:45,650
And so now play it two as two points.
57
57
00:02:45,650 --> 00:02:49,260
Now, the thing here is that whenever we roll a one,
58
58
00:02:49,260 --> 00:02:51,320
we lose all our current score
59
59
00:02:51,320 --> 00:02:53,630
and it's then the next players turn.
60
60
00:02:53,630 --> 00:02:57,260
And so that's why sometimes we need to hold or points.
61
61
00:02:57,260 --> 00:02:58,803
So let me show that to you.
62
62
00:02:59,670 --> 00:03:02,580
And indeed, I rolled a one right away.
63
63
00:03:02,580 --> 00:03:04,313
And so now it's player two again.
64
64
00:03:05,710 --> 00:03:07,820
So let's keep rolling the dice.
65
65
00:03:07,820 --> 00:03:09,930
And I will now again, wait for one
66
66
00:03:09,930 --> 00:03:13,463
so that you can see that all my current score will be lost.
67
67
00:03:21,290 --> 00:03:24,180
So that's a lot of points already there.
68
68
00:03:24,180 --> 00:03:28,480
And now I rolled a one and a player lost all the points.
69
69
00:03:28,480 --> 00:03:30,650
Okay. So I could have hold the points
70
70
00:03:30,650 --> 00:03:33,020
and then I would have added all these points
71
71
00:03:33,020 --> 00:03:34,623
here to my score.
72
72
00:03:35,650 --> 00:03:36,770
So let's do that here
73
73
00:03:37,640 --> 00:03:39,650
and again, a one.
74
74
00:03:39,650 --> 00:03:42,890
And so yeah, now here I hold
75
75
00:03:42,890 --> 00:03:45,230
and I edit them to these points.
76
76
00:03:45,230 --> 00:03:49,200
And I think by now you get how the game works, right?
77
77
00:03:49,200 --> 00:03:53,450
So the first player to reach 100 points then wins the game.
78
78
00:03:53,450 --> 00:03:55,490
But I will now not demonstrate that
79
79
00:03:55,490 --> 00:03:58,090
because that's going to take too long.
80
80
00:03:58,090 --> 00:03:59,620
So we have these two buttons here,
81
81
00:03:59,620 --> 00:04:02,490
and then we also have just like in the previous game,
82
82
00:04:02,490 --> 00:04:04,350
a way of resetting the game.
83
83
00:04:04,350 --> 00:04:07,460
So when I click here, as you might expect,
84
84
00:04:07,460 --> 00:04:09,510
this dice will disappear
85
85
00:04:09,510 --> 00:04:12,940
and all the scores are set back to zero.
86
86
00:04:12,940 --> 00:04:15,360
And to understand this game a little bit better
87
87
00:04:15,360 --> 00:04:16,440
for this application,
88
88
00:04:16,440 --> 00:04:19,260
I designed something called a flow chart.
89
89
00:04:19,260 --> 00:04:20,710
So let's take a look at that.
90
90
00:04:21,970 --> 00:04:24,880
And this is what a flow chart looks like.
91
91
00:04:24,880 --> 00:04:27,060
So basically it's a representation
92
92
00:04:27,060 --> 00:04:30,650
of everything that can happen in the application.
93
93
00:04:30,650 --> 00:04:33,640
So on the left side, we have in yellow,
94
94
00:04:33,640 --> 00:04:36,310
the possible actions that the user can take.
95
95
00:04:36,310 --> 00:04:40,040
And then from there we see what happens in the application.
96
96
00:04:40,040 --> 00:04:43,020
As one of these options is basically chosen.
97
97
00:04:43,020 --> 00:04:46,770
So as one of the actions is executed.
98
98
00:04:46,770 --> 00:04:49,370
So whenever the user rolls to dice,
99
99
00:04:49,370 --> 00:04:52,160
so clicks that roll dice button,
100
100
00:04:52,160 --> 00:04:55,030
then we need to generate a random dice roll.
101
101
00:04:55,030 --> 00:04:57,260
Then we displayed at dice roll,
102
102
00:04:57,260 --> 00:04:59,650
and then we check whether it is a one.
103
103
00:04:59,650 --> 00:05:00,940
If it's not one,
104
104
00:05:00,940 --> 00:05:03,920
then add the dice roll to the current score.
105
105
00:05:03,920 --> 00:05:06,440
And of course this play it, right?
106
106
00:05:06,440 --> 00:05:09,010
So that is exactly the behavior that we saw
107
107
00:05:09,010 --> 00:05:12,140
when we tested out the game earlier. Right?
108
108
00:05:12,140 --> 00:05:14,530
Now, if the dice roll is actually a one,
109
109
00:05:14,530 --> 00:05:16,730
then simply switch the player.
110
110
00:05:16,730 --> 00:05:19,400
And so in this case, the dice roll will not get added
111
111
00:05:19,400 --> 00:05:21,070
to the current score.
112
112
00:05:21,070 --> 00:05:22,700
Next, the other option is that
113
113
00:05:22,700 --> 00:05:25,020
the user wants to hold his score.
114
114
00:05:25,020 --> 00:05:28,330
And then we add the current score to the total score.
115
115
00:05:28,330 --> 00:05:29,490
Once that is done,
116
116
00:05:29,490 --> 00:05:33,390
we must check if the score is above or equal 100,
117
117
00:05:33,390 --> 00:05:36,810
because as I said, the player wins whenever the score
118
118
00:05:36,810 --> 00:05:39,980
is at least 100 points, right?
119
119
00:05:39,980 --> 00:05:42,410
And if it's not, then we just switch the player
120
120
00:05:42,410 --> 00:05:44,950
and the game keeps on running.
121
121
00:05:44,950 --> 00:05:47,540
Finally, when the user chooses to reset the game ,
122
122
00:05:47,540 --> 00:05:49,810
we simply set all scores to zero
123
123
00:05:49,810 --> 00:05:51,830
and set the player number one,
124
124
00:05:51,830 --> 00:05:54,040
back to being the starting player.
125
125
00:05:54,040 --> 00:05:57,000
All right. So this is a very nice way again,
126
126
00:05:57,000 --> 00:05:59,790
to visualize what happens in the application.
127
127
00:05:59,790 --> 00:06:02,120
And it's also a very good guide for us
128
128
00:06:02,120 --> 00:06:05,330
to actually implement the application in coat.
129
129
00:06:05,330 --> 00:06:08,640
So usually whenever I built a project like this one,
130
130
00:06:08,640 --> 00:06:11,660
I like to draw a flow chart like this,
131
131
00:06:11,660 --> 00:06:14,020
and it doesn't need to have all this precision
132
132
00:06:14,020 --> 00:06:15,470
right from the start.
133
133
00:06:15,470 --> 00:06:18,320
So we can just start out with a rough sketch
134
134
00:06:18,320 --> 00:06:21,900
without the complete plan of what we're going to build.
135
135
00:06:21,900 --> 00:06:24,170
But anyway, this is very helpful
136
136
00:06:24,170 --> 00:06:26,320
before we actually start writing code
137
137
00:06:26,320 --> 00:06:29,380
to have a good idea of what we will have to do.
138
138
00:06:29,380 --> 00:06:31,780
And if you want to build your own flow charts
139
139
00:06:31,780 --> 00:06:33,340
that look like this,
140
140
00:06:33,340 --> 00:06:36,210
you can do so on diagrams.net.
141
141
00:06:36,210 --> 00:06:38,700
So that's where I designed this flow chart,
142
142
00:06:38,700 --> 00:06:41,900
and it's a very nice online drawing application
143
143
00:06:41,900 --> 00:06:45,873
that is completely free and really easy and fast to use.
144
144
00:06:47,230 --> 00:06:50,770
Now. Okay. And so now as always let's open up
145
145
00:06:50,770 --> 00:06:55,003
or project folder. So I have to start a files here already,
146
146
00:06:55,990 --> 00:06:58,453
and now I need a new vs code window.
147
147
00:07:00,830 --> 00:07:02,823
And then I just opened a Pitt game.
148
148
00:07:05,400 --> 00:07:09,510
And this time, since the application needs this whole space,
149
149
00:07:09,510 --> 00:07:12,543
let's actually put it here on a separate desktop.
150
150
00:07:14,770 --> 00:07:16,390
And then as we attest out,
151
151
00:07:16,390 --> 00:07:19,263
I will just move here from one desktop to the other.
152
152
00:07:20,340 --> 00:07:22,923
So let's make this bigger this time.
153
153
00:07:23,880 --> 00:07:28,330
And so like always, we already have all our files here,
154
154
00:07:28,330 --> 00:07:32,620
so let's take a look at them and JavaScript.
155
155
00:07:32,620 --> 00:07:35,383
So here as always just the use strict,
156
156
00:07:36,520 --> 00:07:38,390
then here we have all the styles
157
157
00:07:38,390 --> 00:07:40,650
that we need for the application.
158
158
00:07:40,650 --> 00:07:42,860
And we will take a look at them as we go
159
159
00:07:42,860 --> 00:07:44,350
through the project.
160
160
00:07:44,350 --> 00:07:46,833
And then finally the HTML file.
161
161
00:07:49,610 --> 00:07:52,170
Okay, and they also actually included
162
162
00:07:52,170 --> 00:07:54,660
the image of this flow chart here for you,
163
163
00:07:54,660 --> 00:07:57,200
so that you can maybe take a look at it yourself
164
164
00:07:57,200 --> 00:08:00,073
to make sure that you really understand how it works.
165
165
00:08:01,000 --> 00:08:05,110
Okay. So take a minute or two to maybe test the app again
166
166
00:08:05,110 --> 00:08:09,113
and check out this flow chart before we actually start.
167
167
00:08:11,200 --> 00:08:15,440
Alright. Also, I wanted to show you that I have one image
168
168
00:08:15,440 --> 00:08:17,550
here for each of the dices.
169
169
00:08:17,550 --> 00:08:19,390
So dice one looks like this,
170
170
00:08:19,390 --> 00:08:22,120
like two, it looks like this
171
171
00:08:22,120 --> 00:08:23,730
and so on and so forth.
172
172
00:08:23,730 --> 00:08:28,730
So we have one image for each of the possible six numbers.
173
173
00:08:28,880 --> 00:08:31,660
So that's going to be important later,
174
174
00:08:31,660 --> 00:08:35,000
but now let's just start to,
175
175
00:08:35,000 --> 00:08:36,603
write a little bit of code here.
176
176
00:08:37,670 --> 00:08:40,370
Let's get ourselves a new terminal here
177
177
00:08:41,620 --> 00:08:45,120
so that we can take a look at the application
178
178
00:08:45,120 --> 00:08:47,280
as it looks right now.
179
179
00:08:47,280 --> 00:08:52,280
Interior. I like to minimize it a little bit life server.
180
180
00:08:56,350 --> 00:09:01,350
Okay. And so this is our life version of the pic game.
181
181
00:09:02,528 --> 00:09:05,960
So again, we are here at this local host at port 8080.
182
182
00:09:05,960 --> 00:09:07,930
And if you are seeing some other ports,
183
183
00:09:07,930 --> 00:09:11,080
that's no problem at all, as long as it works.
184
184
00:09:11,080 --> 00:09:14,470
So maybe you still have something running on this port,
185
185
00:09:14,470 --> 00:09:16,450
maybe from the previous project.
186
186
00:09:16,450 --> 00:09:19,140
And then this project will run on another port.
187
187
00:09:19,140 --> 00:09:20,840
That doesn't really matter.
188
188
00:09:20,840 --> 00:09:22,920
So right now in the starting point,
189
189
00:09:22,920 --> 00:09:25,820
this is what our application looks like.
190
190
00:09:25,820 --> 00:09:27,830
But of course in the demo,
191
191
00:09:27,830 --> 00:09:30,110
we don't see the dice in the beginning
192
192
00:09:30,110 --> 00:09:33,070
and we don't see any scores here.
193
193
00:09:33,070 --> 00:09:36,380
Okay. And so the first thing that we're going to do
194
194
00:09:36,380 --> 00:09:39,040
is to basically put these scores to zero
195
195
00:09:39,040 --> 00:09:40,930
and make this dice disappear.
196
196
00:09:40,930 --> 00:09:42,590
And so that's going to be basically
197
197
00:09:42,590 --> 00:09:44,780
the starting condition here.
198
198
00:09:44,780 --> 00:09:47,690
So let's go back here to the coat.
199
199
00:09:47,690 --> 00:09:48,840
And let me just tell you where
200
200
00:09:48,840 --> 00:09:51,500
these initial values come from.
201
201
00:09:51,500 --> 00:09:54,070
So this is the 43 score that we just saw,
202
202
00:09:54,070 --> 00:09:56,170
and this is the 24.
203
203
00:09:56,170 --> 00:09:58,950
And so let's take a moment to inspect the code
204
204
00:09:58,950 --> 00:10:00,800
because as you already know,
205
205
00:10:00,800 --> 00:10:02,310
we need the class names.
206
206
00:10:02,310 --> 00:10:05,640
And in this case also the IDs to then identify
207
207
00:10:05,640 --> 00:10:07,860
and select the elements.
208
208
00:10:07,860 --> 00:10:11,550
So basically here we have one of these sections here
209
209
00:10:11,550 --> 00:10:13,500
for each of the players
210
210
00:10:13,500 --> 00:10:16,920
and you see that the first one is player zero.
211
211
00:10:16,920 --> 00:10:19,830
And the second one is player one.
212
212
00:10:19,830 --> 00:10:21,700
And I will explain you why
213
213
00:10:21,700 --> 00:10:23,830
the players are called zero and one
214
214
00:10:23,830 --> 00:10:25,350
instead of one and two,
215
215
00:10:25,350 --> 00:10:27,090
probably in the next lecture.
216
216
00:10:27,090 --> 00:10:29,090
So it will make sense by then.
217
217
00:10:29,090 --> 00:10:31,720
okay. But now about the scores,
218
218
00:10:31,720 --> 00:10:34,130
they are stored in this element
219
219
00:10:34,130 --> 00:10:35,850
and in this one here.
220
220
00:10:35,850 --> 00:10:39,160
And so you'll see both of them have to score class,
221
221
00:10:39,160 --> 00:10:42,040
but then each of them has a different ID.
222
222
00:10:42,040 --> 00:10:44,840
And so this time we need to select these two elements
223
223
00:10:44,840 --> 00:10:48,373
using their unique ID instead of a class name.
224
224
00:10:49,290 --> 00:10:52,730
So that's the idea of score dash dash zero
225
225
00:10:52,730 --> 00:10:54,950
and score dash dash one.
226
226
00:10:54,950 --> 00:10:56,783
So let's do that.
227
227
00:10:59,080 --> 00:11:04,080
So const score one and then document query selector.
228
228
00:11:08,560 --> 00:11:11,130
So this is the way that we learned it before.
229
229
00:11:11,130 --> 00:11:15,360
And now here, we actually need the hash symbol.
230
230
00:11:15,360 --> 00:11:20,253
So score zero. So actually I'm interested in zero here.
231
231
00:11:21,390 --> 00:11:24,250
Okay. And so again, now we used the,
232
232
00:11:24,250 --> 00:11:27,890
this hash because that is the selector for the ID
233
233
00:11:29,212 --> 00:11:33,880
and a dot that we used to use is only four classes. Okay.
234
234
00:11:33,880 --> 00:11:36,900
Now, when we're selecting using an ID.
235
235
00:11:36,900 --> 00:11:40,970
Then there's actually another way of selecting an element.
236
236
00:11:40,970 --> 00:11:43,330
And right now that's exactly what we're doing.
237
237
00:11:43,330 --> 00:11:46,377
So we're interested in IDs, not in classes.
238
238
00:11:46,377 --> 00:11:49,730
And so let me show you that other way of selecting elements
239
239
00:11:49,730 --> 00:11:51,283
that only works by ID.
240
240
00:11:52,390 --> 00:11:55,363
So let's call this one, score one,
241
241
00:11:56,230 --> 00:11:58,360
and then again, we use document,
242
242
00:11:58,360 --> 00:12:01,210
but then we're not calling query selector.
243
243
00:12:01,210 --> 00:12:05,783
Instead we call get element by ID.
244
244
00:12:08,780 --> 00:12:11,540
And then here, we just pass in the name of the ID.
245
245
00:12:11,540 --> 00:12:14,080
So just score one.
246
246
00:12:14,080 --> 00:12:16,040
So without the hash here,
247
247
00:12:16,040 --> 00:12:18,490
because now we're not writing a selector,
248
248
00:12:18,490 --> 00:12:21,310
we are only passing in the name of the ID
249
249
00:12:21,310 --> 00:12:23,500
that we're looking for. Okay?
250
250
00:12:23,500 --> 00:12:27,490
So this works exactly the same as this,
251
251
00:12:27,490 --> 00:12:29,900
but the get element by ID
252
252
00:12:29,900 --> 00:12:33,830
is supposed to be a little bit faster than query selector,
253
253
00:12:33,830 --> 00:12:35,900
but I guess that's only relevant
254
254
00:12:35,900 --> 00:12:40,140
if you're selecting like thousands of elements at once.
255
255
00:12:40,140 --> 00:12:43,100
So usually I like to always use query selector,
256
256
00:12:43,100 --> 00:12:46,210
but I still wanted to show you that there also exists
257
257
00:12:46,210 --> 00:12:50,263
get element by ID. Alright?
258
258
00:12:51,130 --> 00:12:55,680
And actually let's call these two here, score zero L,
259
259
00:12:56,540 --> 00:12:58,590
which stands for element
260
260
00:12:58,590 --> 00:13:01,790
because you might then confuse maybe this variable
261
261
00:13:01,790 --> 00:13:06,620
here for simply the score value of players zero. Right?
262
262
00:13:06,620 --> 00:13:07,560
And so in this case,
263
263
00:13:07,560 --> 00:13:11,330
we are making it really clear that this is a dumb element.
264
264
00:13:11,330 --> 00:13:16,000
So score is zero L all right. Okay.
265
265
00:13:16,000 --> 00:13:18,000
So we're selecting these here
266
266
00:13:18,000 --> 00:13:22,020
and now we can use the variables to do something on them.
267
267
00:13:22,020 --> 00:13:23,270
And again, we do that
268
268
00:13:23,270 --> 00:13:26,750
because probably we will need to do something with
269
269
00:13:26,750 --> 00:13:29,220
these selected elements multiple times
270
270
00:13:29,220 --> 00:13:30,780
throughout the application.
271
271
00:13:30,780 --> 00:13:32,680
And so we just defined them once at the
272
272
00:13:32,680 --> 00:13:35,500
top of our file instead of having to select
273
273
00:13:35,500 --> 00:13:38,300
the same elements over and over again.
274
274
00:13:38,300 --> 00:13:40,530
So let's just add a comment here.
275
275
00:13:40,530 --> 00:13:43,940
And comments are also a good way of structuring the code
276
276
00:13:43,940 --> 00:13:47,273
and also of planning how we will build some features.
277
277
00:13:49,620 --> 00:13:53,120
So selecting elements.
278
278
00:13:53,120 --> 00:13:55,036
And so in this project,
279
279
00:13:55,036 --> 00:13:57,330
we will try to get a little bit more used
280
280
00:13:57,330 --> 00:13:59,703
to actually write in comments. Alright?
281
281
00:14:01,300 --> 00:14:04,240
Anyway, let's now set these initial conditions
282
282
00:14:04,240 --> 00:14:06,460
of score zero element.
283
283
00:14:06,460 --> 00:14:09,600
And then as you know, we use text content
284
284
00:14:09,600 --> 00:14:13,830
and then we set it to zero. Alright?
285
285
00:14:13,830 --> 00:14:17,790
And now the same four score one score,
286
286
00:14:17,790 --> 00:14:22,440
one element.textcontent to zero.
287
287
00:14:23,580 --> 00:14:27,150
And here we are specifying numbers, not strings,
288
288
00:14:27,150 --> 00:14:29,470
but JavaScript will then automatically convert them
289
289
00:14:29,470 --> 00:14:33,140
to strings to actually display them on the page.
290
290
00:14:33,140 --> 00:14:35,920
So if we go now to the application
291
291
00:14:35,920 --> 00:14:38,500
that should already be in effect,
292
292
00:14:38,500 --> 00:14:43,240
and indeed you see that now the scores are actually at zero.
293
293
00:14:43,240 --> 00:14:47,780
Great. Now all we have to do is to hide this dice here.
294
294
00:14:47,780 --> 00:14:50,090
And so let's do that using the technique
295
295
00:14:50,090 --> 00:14:52,620
that we learned in the previous project,
296
296
00:14:52,620 --> 00:14:55,420
which is basically creating a hidden class
297
297
00:14:55,420 --> 00:14:58,663
and then add that hidden class here at the beginning. Okay.
298
298
00:14:59,910 --> 00:15:01,890
So let's go to our style.
299
299
00:15:01,890 --> 00:15:04,550
And right now I don't have that class yet.
300
300
00:15:04,550 --> 00:15:05,780
So that's just created
301
301
00:15:06,880 --> 00:15:08,753
and I can close the terminal here.
302
302
00:15:10,240 --> 00:15:12,023
Let's just do that at the very end.
303
303
00:15:15,110 --> 00:15:19,580
So we create a class like this
304
304
00:15:19,580 --> 00:15:23,750
and then we just set the display to none.
305
305
00:15:23,750 --> 00:15:26,510
So that's exactly the class that we had in the
306
306
00:15:26,510 --> 00:15:29,293
previous project as well. Okay.
307
307
00:15:30,780 --> 00:15:32,240
And so now we can just add that class
308
308
00:15:32,240 --> 00:15:34,653
to the dice at the beginning of the game.
309
309
00:15:35,850 --> 00:15:38,110
So that's easy enough,
310
310
00:15:38,110 --> 00:15:39,660
but first we need to select it.
311
311
00:15:42,220 --> 00:15:46,560
So let's call it dice L for the dice element.
312
312
00:15:46,560 --> 00:15:51,560
Let's check out what the ID or the class of it is.
313
313
00:15:52,240 --> 00:15:56,370
And here we see that it's actually just this dice class.
314
314
00:15:56,370 --> 00:15:58,793
So this image with his class of a dice,
315
315
00:16:00,950 --> 00:16:04,600
so document not query selector dice.
316
316
00:16:09,120 --> 00:16:11,050
And so here we have to start in conditions
317
317
00:16:14,940 --> 00:16:19,940
and now let's simply do dice element.classlist.add.
318
318
00:16:23,100 --> 00:16:24,720
And now simply this string,
319
319
00:16:24,720 --> 00:16:27,710
which contains the name of the class
320
320
00:16:27,710 --> 00:16:31,700
and that's the hidden class, give it a safe,
321
321
00:16:31,700 --> 00:16:32,923
let's check it out.
322
322
00:16:33,872 --> 00:16:35,640
And indeed, now the dice has gone
323
323
00:16:35,640 --> 00:16:39,550
and let's see the HTML here, actually,
324
324
00:16:39,550 --> 00:16:42,910
you now indeed we have the hidden class here,
325
325
00:16:42,910 --> 00:16:45,750
besides the dice class. Great.
326
326
00:16:45,750 --> 00:16:49,220
And then as we implement the roll dice functionality,
327
327
00:16:49,220 --> 00:16:52,340
of course, we will want the dyes to be visible.
328
328
00:16:52,340 --> 00:16:56,380
And then we can simply remove that class
329
329
00:16:56,380 --> 00:16:59,410
again from the dice. Okay.
330
330
00:16:59,410 --> 00:17:02,526
And actually that's exactly what we're going to do
331
331
00:17:02,526 --> 00:17:03,426
in the next video.
28940
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.