WEBVTT 1 00:00:01.390 --> 00:00:04.650 Welcome back to project number three 2 00:00:04.650 --> 00:00:06.590 of this section, 3 00:00:06.590 --> 00:00:09.730 and this project is going to be the most exciting one 4 00:00:09.730 --> 00:00:12.570 because now we will take everything that we learned 5 00:00:12.570 --> 00:00:15.950 in the first two projects to a whole new level 6 00:00:15.950 --> 00:00:19.163 and build a really cool and amazing game. 7 00:00:20.840 --> 00:00:23.610 And this is the game that I was talking about 8 00:00:23.610 --> 00:00:25.730 and it's called the pick game. 9 00:00:25.730 --> 00:00:27.160 Now this project here 10 00:00:27.160 --> 00:00:30.260 is really going to be a practice project. 11 00:00:30.260 --> 00:00:32.170 So a project where you and me 12 00:00:32.170 --> 00:00:36.200 will together reinforce all the skills that you have learned 13 00:00:36.200 --> 00:00:37.990 up until this point, 14 00:00:37.990 --> 00:00:40.750 because remember from the last section, 15 00:00:40.750 --> 00:00:44.510 reinforcing knowledge is one of the most important things 16 00:00:44.510 --> 00:00:47.170 that you can do to learn, right? 17 00:00:47.170 --> 00:00:48.730 So in this project, 18 00:00:48.730 --> 00:00:52.450 I will do a little bit less explaining than before, 19 00:00:52.450 --> 00:00:55.180 at least about the stuff that we already learned, 20 00:00:55.180 --> 00:00:59.030 because we are really just practicing here. Okay. 21 00:00:59.030 --> 00:01:02.030 Now, if you're in a hurry and just want to learn the basics, 22 00:01:02.030 --> 00:01:04.340 please feel free to skip this project. 23 00:01:04.340 --> 00:01:06.950 But of course, I would still really advise you 24 00:01:06.950 --> 00:01:08.853 to code along with me here, 25 00:01:09.700 --> 00:01:13.270 but now let's see how this game actually works. 26 00:01:13.270 --> 00:01:15.810 And in fact, you can try that along with me 27 00:01:16.773 --> 00:01:20.860 because this time I hosted this demo, on a live website. 28 00:01:20.860 --> 00:01:25.623 So you can access that by pickgamev2.netlify.app 29 00:01:26.620 --> 00:01:28.990 And the link is also in the read me file 30 00:01:28.990 --> 00:01:33.790 of the repository for this course on github.com. 31 00:01:33.790 --> 00:01:36.970 But anyway, this is more of a real game now 32 00:01:36.970 --> 00:01:39.630 because we actually have two players. 33 00:01:39.630 --> 00:01:42.740 So you can play this with a friend or something 34 00:01:42.740 --> 00:01:44.970 or just against yourself. 35 00:01:44.970 --> 00:01:47.630 So the idea is that we roll a dice. 36 00:01:47.630 --> 00:01:49.830 And so now I'm playing number one. 37 00:01:49.830 --> 00:01:52.320 So this one is now the active player. 38 00:01:52.320 --> 00:01:54.220 So I roll a dice, 39 00:01:54.220 --> 00:01:56.050 And so you see that I rolled a two. 40 00:01:56.050 --> 00:02:00.750 And so this number gets added to my current score down here. 41 00:02:00.750 --> 00:02:04.090 Okay. So this is my current score for the current round. 42 00:02:04.090 --> 00:02:06.000 And this year is my total score. 43 00:02:06.000 --> 00:02:08.350 And so let's see how that's going to work 44 00:02:08.350 --> 00:02:11.570 so I can roll the dice again now if I want to, 45 00:02:11.570 --> 00:02:12.850 and now I rolled a four 46 00:02:14.167 --> 00:02:16.720 and that four got added to the two that it had previously. 47 00:02:16.720 --> 00:02:21.120 So now that's six and now I can choose to hold this score. 48 00:02:21.120 --> 00:02:22.730 So if I click this button, 49 00:02:22.730 --> 00:02:24.950 this score of the current round 50 00:02:24.950 --> 00:02:26.940 will get added to my total score, 51 00:02:26.940 --> 00:02:28.900 which right now is zero. 52 00:02:28.900 --> 00:02:33.007 And so when I hold a den, my score will be zero now. 53 00:02:33.007 --> 00:02:36.640 And we switched to player number two, 54 00:02:36.640 --> 00:02:39.340 and now I can click roll dice again. 55 00:02:39.340 --> 00:02:42.800 So we rolled a two and I can hold again. 56 00:02:42.800 --> 00:02:45.650 And so now play it two as two points. 57 00:02:45.650 --> 00:02:49.260 Now, the thing here is that whenever we roll a one, 58 00:02:49.260 --> 00:02:51.320 we lose all our current score 59 00:02:51.320 --> 00:02:53.630 and it's then the next players turn. 60 00:02:53.630 --> 00:02:57.260 And so that's why sometimes we need to hold or points. 61 00:02:57.260 --> 00:02:58.803 So let me show that to you. 62 00:02:59.670 --> 00:03:02.580 And indeed, I rolled a one right away. 63 00:03:02.580 --> 00:03:04.313 And so now it's player two again. 64 00:03:05.710 --> 00:03:07.820 So let's keep rolling the dice. 65 00:03:07.820 --> 00:03:09.930 And I will now again, wait for one 66 00:03:09.930 --> 00:03:13.463 so that you can see that all my current score will be lost. 67 00:03:21.290 --> 00:03:24.180 So that's a lot of points already there. 68 00:03:24.180 --> 00:03:28.480 And now I rolled a one and a player lost all the points. 69 00:03:28.480 --> 00:03:30.650 Okay. So I could have hold the points 70 00:03:30.650 --> 00:03:33.020 and then I would have added all these points 71 00:03:33.020 --> 00:03:34.623 here to my score. 72 00:03:35.650 --> 00:03:36.770 So let's do that here 73 00:03:37.640 --> 00:03:39.650 and again, a one. 74 00:03:39.650 --> 00:03:42.890 And so yeah, now here I hold 75 00:03:42.890 --> 00:03:45.230 and I edit them to these points. 76 00:03:45.230 --> 00:03:49.200 And I think by now you get how the game works, right? 77 00:03:49.200 --> 00:03:53.450 So the first player to reach 100 points then wins the game. 78 00:03:53.450 --> 00:03:55.490 But I will now not demonstrate that 79 00:03:55.490 --> 00:03:58.090 because that's going to take too long. 80 00:03:58.090 --> 00:03:59.620 So we have these two buttons here, 81 00:03:59.620 --> 00:04:02.490 and then we also have just like in the previous game, 82 00:04:02.490 --> 00:04:04.350 a way of resetting the game. 83 00:04:04.350 --> 00:04:07.460 So when I click here, as you might expect, 84 00:04:07.460 --> 00:04:09.510 this dice will disappear 85 00:04:09.510 --> 00:04:12.940 and all the scores are set back to zero. 86 00:04:12.940 --> 00:04:15.360 And to understand this game a little bit better 87 00:04:15.360 --> 00:04:16.440 for this application, 88 00:04:16.440 --> 00:04:19.260 I designed something called a flow chart. 89 00:04:19.260 --> 00:04:20.710 So let's take a look at that. 90 00:04:21.970 --> 00:04:24.880 And this is what a flow chart looks like. 91 00:04:24.880 --> 00:04:27.060 So basically it's a representation 92 00:04:27.060 --> 00:04:30.650 of everything that can happen in the application. 93 00:04:30.650 --> 00:04:33.640 So on the left side, we have in yellow, 94 00:04:33.640 --> 00:04:36.310 the possible actions that the user can take. 95 00:04:36.310 --> 00:04:40.040 And then from there we see what happens in the application. 96 00:04:40.040 --> 00:04:43.020 As one of these options is basically chosen. 97 00:04:43.020 --> 00:04:46.770 So as one of the actions is executed. 98 00:04:46.770 --> 00:04:49.370 So whenever the user rolls to dice, 99 00:04:49.370 --> 00:04:52.160 so clicks that roll dice button, 100 00:04:52.160 --> 00:04:55.030 then we need to generate a random dice roll. 101 00:04:55.030 --> 00:04:57.260 Then we displayed at dice roll, 102 00:04:57.260 --> 00:04:59.650 and then we check whether it is a one. 103 00:04:59.650 --> 00:05:00.940 If it's not one, 104 00:05:00.940 --> 00:05:03.920 then add the dice roll to the current score. 105 00:05:03.920 --> 00:05:06.440 And of course this play it, right? 106 00:05:06.440 --> 00:05:09.010 So that is exactly the behavior that we saw 107 00:05:09.010 --> 00:05:12.140 when we tested out the game earlier. Right? 108 00:05:12.140 --> 00:05:14.530 Now, if the dice roll is actually a one, 109 00:05:14.530 --> 00:05:16.730 then simply switch the player. 110 00:05:16.730 --> 00:05:19.400 And so in this case, the dice roll will not get added 111 00:05:19.400 --> 00:05:21.070 to the current score. 112 00:05:21.070 --> 00:05:22.700 Next, the other option is that 113 00:05:22.700 --> 00:05:25.020 the user wants to hold his score. 114 00:05:25.020 --> 00:05:28.330 And then we add the current score to the total score. 115 00:05:28.330 --> 00:05:29.490 Once that is done, 116 00:05:29.490 --> 00:05:33.390 we must check if the score is above or equal 100, 117 00:05:33.390 --> 00:05:36.810 because as I said, the player wins whenever the score 118 00:05:36.810 --> 00:05:39.980 is at least 100 points, right? 119 00:05:39.980 --> 00:05:42.410 And if it's not, then we just switch the player 120 00:05:42.410 --> 00:05:44.950 and the game keeps on running. 121 00:05:44.950 --> 00:05:47.540 Finally, when the user chooses to reset the game , 122 00:05:47.540 --> 00:05:49.810 we simply set all scores to zero 123 00:05:49.810 --> 00:05:51.830 and set the player number one, 124 00:05:51.830 --> 00:05:54.040 back to being the starting player. 125 00:05:54.040 --> 00:05:57.000 All right. So this is a very nice way again, 126 00:05:57.000 --> 00:05:59.790 to visualize what happens in the application. 127 00:05:59.790 --> 00:06:02.120 And it's also a very good guide for us 128 00:06:02.120 --> 00:06:05.330 to actually implement the application in coat. 129 00:06:05.330 --> 00:06:08.640 So usually whenever I built a project like this one, 130 00:06:08.640 --> 00:06:11.660 I like to draw a flow chart like this, 131 00:06:11.660 --> 00:06:14.020 and it doesn't need to have all this precision 132 00:06:14.020 --> 00:06:15.470 right from the start. 133 00:06:15.470 --> 00:06:18.320 So we can just start out with a rough sketch 134 00:06:18.320 --> 00:06:21.900 without the complete plan of what we're going to build. 135 00:06:21.900 --> 00:06:24.170 But anyway, this is very helpful 136 00:06:24.170 --> 00:06:26.320 before we actually start writing code 137 00:06:26.320 --> 00:06:29.380 to have a good idea of what we will have to do. 138 00:06:29.380 --> 00:06:31.780 And if you want to build your own flow charts 139 00:06:31.780 --> 00:06:33.340 that look like this, 140 00:06:33.340 --> 00:06:36.210 you can do so on diagrams.net. 141 00:06:36.210 --> 00:06:38.700 So that's where I designed this flow chart, 142 00:06:38.700 --> 00:06:41.900 and it's a very nice online drawing application 143 00:06:41.900 --> 00:06:45.873 that is completely free and really easy and fast to use. 144 00:06:47.230 --> 00:06:50.770 Now. Okay. And so now as always let's open up 145 00:06:50.770 --> 00:06:55.003 or project folder. So I have to start a files here already, 146 00:06:55.990 --> 00:06:58.453 and now I need a new vs code window. 147 00:07:00.830 --> 00:07:02.823 And then I just opened a Pitt game. 148 00:07:05.400 --> 00:07:09.510 And this time, since the application needs this whole space, 149 00:07:09.510 --> 00:07:12.543 let's actually put it here on a separate desktop. 150 00:07:14.770 --> 00:07:16.390 And then as we attest out, 151 00:07:16.390 --> 00:07:19.263 I will just move here from one desktop to the other. 152 00:07:20.340 --> 00:07:22.923 So let's make this bigger this time. 153 00:07:23.880 --> 00:07:28.330 And so like always, we already have all our files here, 154 00:07:28.330 --> 00:07:32.620 so let's take a look at them and JavaScript. 155 00:07:32.620 --> 00:07:35.383 So here as always just the use strict, 156 00:07:36.520 --> 00:07:38.390 then here we have all the styles 157 00:07:38.390 --> 00:07:40.650 that we need for the application. 158 00:07:40.650 --> 00:07:42.860 And we will take a look at them as we go 159 00:07:42.860 --> 00:07:44.350 through the project. 160 00:07:44.350 --> 00:07:46.833 And then finally the HTML file. 161 00:07:49.610 --> 00:07:52.170 Okay, and they also actually included 162 00:07:52.170 --> 00:07:54.660 the image of this flow chart here for you, 163 00:07:54.660 --> 00:07:57.200 so that you can maybe take a look at it yourself 164 00:07:57.200 --> 00:08:00.073 to make sure that you really understand how it works. 165 00:08:01.000 --> 00:08:05.110 Okay. So take a minute or two to maybe test the app again 166 00:08:05.110 --> 00:08:09.113 and check out this flow chart before we actually start. 167 00:08:11.200 --> 00:08:15.440 Alright. Also, I wanted to show you that I have one image 168 00:08:15.440 --> 00:08:17.550 here for each of the dices. 169 00:08:17.550 --> 00:08:19.390 So dice one looks like this, 170 00:08:19.390 --> 00:08:22.120 like two, it looks like this 171 00:08:22.120 --> 00:08:23.730 and so on and so forth. 172 00:08:23.730 --> 00:08:28.730 So we have one image for each of the possible six numbers. 173 00:08:28.880 --> 00:08:31.660 So that's going to be important later, 174 00:08:31.660 --> 00:08:35.000 but now let's just start to, 175 00:08:35.000 --> 00:08:36.603 write a little bit of code here. 176 00:08:37.670 --> 00:08:40.370 Let's get ourselves a new terminal here 177 00:08:41.620 --> 00:08:45.120 so that we can take a look at the application 178 00:08:45.120 --> 00:08:47.280 as it looks right now. 179 00:08:47.280 --> 00:08:52.280 Interior. I like to minimize it a little bit life server. 180 00:08:56.350 --> 00:09:01.350 Okay. And so this is our life version of the pic game. 181 00:09:02.528 --> 00:09:05.960 So again, we are here at this local host at port 8080. 182 00:09:05.960 --> 00:09:07.930 And if you are seeing some other ports, 183 00:09:07.930 --> 00:09:11.080 that's no problem at all, as long as it works. 184 00:09:11.080 --> 00:09:14.470 So maybe you still have something running on this port, 185 00:09:14.470 --> 00:09:16.450 maybe from the previous project. 186 00:09:16.450 --> 00:09:19.140 And then this project will run on another port. 187 00:09:19.140 --> 00:09:20.840 That doesn't really matter. 188 00:09:20.840 --> 00:09:22.920 So right now in the starting point, 189 00:09:22.920 --> 00:09:25.820 this is what our application looks like. 190 00:09:25.820 --> 00:09:27.830 But of course in the demo, 191 00:09:27.830 --> 00:09:30.110 we don't see the dice in the beginning 192 00:09:30.110 --> 00:09:33.070 and we don't see any scores here. 193 00:09:33.070 --> 00:09:36.380 Okay. And so the first thing that we're going to do 194 00:09:36.380 --> 00:09:39.040 is to basically put these scores to zero 195 00:09:39.040 --> 00:09:40.930 and make this dice disappear. 196 00:09:40.930 --> 00:09:42.590 And so that's going to be basically 197 00:09:42.590 --> 00:09:44.780 the starting condition here. 198 00:09:44.780 --> 00:09:47.690 So let's go back here to the coat. 199 00:09:47.690 --> 00:09:48.840 And let me just tell you where 200 00:09:48.840 --> 00:09:51.500 these initial values come from. 201 00:09:51.500 --> 00:09:54.070 So this is the 43 score that we just saw, 202 00:09:54.070 --> 00:09:56.170 and this is the 24. 203 00:09:56.170 --> 00:09:58.950 And so let's take a moment to inspect the code 204 00:09:58.950 --> 00:10:00.800 because as you already know, 205 00:10:00.800 --> 00:10:02.310 we need the class names. 206 00:10:02.310 --> 00:10:05.640 And in this case also the IDs to then identify 207 00:10:05.640 --> 00:10:07.860 and select the elements. 208 00:10:07.860 --> 00:10:11.550 So basically here we have one of these sections here 209 00:10:11.550 --> 00:10:13.500 for each of the players 210 00:10:13.500 --> 00:10:16.920 and you see that the first one is player zero. 211 00:10:16.920 --> 00:10:19.830 And the second one is player one. 212 00:10:19.830 --> 00:10:21.700 And I will explain you why 213 00:10:21.700 --> 00:10:23.830 the players are called zero and one 214 00:10:23.830 --> 00:10:25.350 instead of one and two, 215 00:10:25.350 --> 00:10:27.090 probably in the next lecture. 216 00:10:27.090 --> 00:10:29.090 So it will make sense by then. 217 00:10:29.090 --> 00:10:31.720 okay. But now about the scores, 218 00:10:31.720 --> 00:10:34.130 they are stored in this element 219 00:10:34.130 --> 00:10:35.850 and in this one here. 220 00:10:35.850 --> 00:10:39.160 And so you'll see both of them have to score class, 221 00:10:39.160 --> 00:10:42.040 but then each of them has a different ID. 222 00:10:42.040 --> 00:10:44.840 And so this time we need to select these two elements 223 00:10:44.840 --> 00:10:48.373 using their unique ID instead of a class name. 224 00:10:49.290 --> 00:10:52.730 So that's the idea of score dash dash zero 225 00:10:52.730 --> 00:10:54.950 and score dash dash one. 226 00:10:54.950 --> 00:10:56.783 So let's do that. 227 00:10:59.080 --> 00:11:04.080 So const score one and then document query selector. 228 00:11:08.560 --> 00:11:11.130 So this is the way that we learned it before. 229 00:11:11.130 --> 00:11:15.360 And now here, we actually need the hash symbol. 230 00:11:15.360 --> 00:11:20.253 So score zero. So actually I'm interested in zero here. 231 00:11:21.390 --> 00:11:24.250 Okay. And so again, now we used the, 232 00:11:24.250 --> 00:11:27.890 this hash because that is the selector for the ID 233 00:11:29.212 --> 00:11:33.880 and a dot that we used to use is only four classes. Okay. 234 00:11:33.880 --> 00:11:36.900 Now, when we're selecting using an ID. 235 00:11:36.900 --> 00:11:40.970 Then there's actually another way of selecting an element. 236 00:11:40.970 --> 00:11:43.330 And right now that's exactly what we're doing. 237 00:11:43.330 --> 00:11:46.377 So we're interested in IDs, not in classes. 238 00:11:46.377 --> 00:11:49.730 And so let me show you that other way of selecting elements 239 00:11:49.730 --> 00:11:51.283 that only works by ID. 240 00:11:52.390 --> 00:11:55.363 So let's call this one, score one, 241 00:11:56.230 --> 00:11:58.360 and then again, we use document, 242 00:11:58.360 --> 00:12:01.210 but then we're not calling query selector. 243 00:12:01.210 --> 00:12:05.783 Instead we call get element by ID. 244 00:12:08.780 --> 00:12:11.540 And then here, we just pass in the name of the ID. 245 00:12:11.540 --> 00:12:14.080 So just score one. 246 00:12:14.080 --> 00:12:16.040 So without the hash here, 247 00:12:16.040 --> 00:12:18.490 because now we're not writing a selector, 248 00:12:18.490 --> 00:12:21.310 we are only passing in the name of the ID 249 00:12:21.310 --> 00:12:23.500 that we're looking for. Okay? 250 00:12:23.500 --> 00:12:27.490 So this works exactly the same as this, 251 00:12:27.490 --> 00:12:29.900 but the get element by ID 252 00:12:29.900 --> 00:12:33.830 is supposed to be a little bit faster than query selector, 253 00:12:33.830 --> 00:12:35.900 but I guess that's only relevant 254 00:12:35.900 --> 00:12:40.140 if you're selecting like thousands of elements at once. 255 00:12:40.140 --> 00:12:43.100 So usually I like to always use query selector, 256 00:12:43.100 --> 00:12:46.210 but I still wanted to show you that there also exists 257 00:12:46.210 --> 00:12:50.263 get element by ID. Alright? 258 00:12:51.130 --> 00:12:55.680 And actually let's call these two here, score zero L, 259 00:12:56.540 --> 00:12:58.590 which stands for element 260 00:12:58.590 --> 00:13:01.790 because you might then confuse maybe this variable 261 00:13:01.790 --> 00:13:06.620 here for simply the score value of players zero. Right? 262 00:13:06.620 --> 00:13:07.560 And so in this case, 263 00:13:07.560 --> 00:13:11.330 we are making it really clear that this is a dumb element. 264 00:13:11.330 --> 00:13:16.000 So score is zero L all right. Okay. 265 00:13:16.000 --> 00:13:18.000 So we're selecting these here 266 00:13:18.000 --> 00:13:22.020 and now we can use the variables to do something on them. 267 00:13:22.020 --> 00:13:23.270 And again, we do that 268 00:13:23.270 --> 00:13:26.750 because probably we will need to do something with 269 00:13:26.750 --> 00:13:29.220 these selected elements multiple times 270 00:13:29.220 --> 00:13:30.780 throughout the application. 271 00:13:30.780 --> 00:13:32.680 And so we just defined them once at the 272 00:13:32.680 --> 00:13:35.500 top of our file instead of having to select 273 00:13:35.500 --> 00:13:38.300 the same elements over and over again. 274 00:13:38.300 --> 00:13:40.530 So let's just add a comment here. 275 00:13:40.530 --> 00:13:43.940 And comments are also a good way of structuring the code 276 00:13:43.940 --> 00:13:47.273 and also of planning how we will build some features. 277 00:13:49.620 --> 00:13:53.120 So selecting elements. 278 00:13:53.120 --> 00:13:55.036 And so in this project, 279 00:13:55.036 --> 00:13:57.330 we will try to get a little bit more used 280 00:13:57.330 --> 00:13:59.703 to actually write in comments. Alright? 281 00:14:01.300 --> 00:14:04.240 Anyway, let's now set these initial conditions 282 00:14:04.240 --> 00:14:06.460 of score zero element. 283 00:14:06.460 --> 00:14:09.600 And then as you know, we use text content 284 00:14:09.600 --> 00:14:13.830 and then we set it to zero. Alright? 285 00:14:13.830 --> 00:14:17.790 And now the same four score one score, 286 00:14:17.790 --> 00:14:22.440 one element.textcontent to zero. 287 00:14:23.580 --> 00:14:27.150 And here we are specifying numbers, not strings, 288 00:14:27.150 --> 00:14:29.470 but JavaScript will then automatically convert them 289 00:14:29.470 --> 00:14:33.140 to strings to actually display them on the page. 290 00:14:33.140 --> 00:14:35.920 So if we go now to the application 291 00:14:35.920 --> 00:14:38.500 that should already be in effect, 292 00:14:38.500 --> 00:14:43.240 and indeed you see that now the scores are actually at zero. 293 00:14:43.240 --> 00:14:47.780 Great. Now all we have to do is to hide this dice here. 294 00:14:47.780 --> 00:14:50.090 And so let's do that using the technique 295 00:14:50.090 --> 00:14:52.620 that we learned in the previous project, 296 00:14:52.620 --> 00:14:55.420 which is basically creating a hidden class 297 00:14:55.420 --> 00:14:58.663 and then add that hidden class here at the beginning. Okay. 298 00:14:59.910 --> 00:15:01.890 So let's go to our style. 299 00:15:01.890 --> 00:15:04.550 And right now I don't have that class yet. 300 00:15:04.550 --> 00:15:05.780 So that's just created 301 00:15:06.880 --> 00:15:08.753 and I can close the terminal here. 302 00:15:10.240 --> 00:15:12.023 Let's just do that at the very end. 303 00:15:15.110 --> 00:15:19.580 So we create a class like this 304 00:15:19.580 --> 00:15:23.750 and then we just set the display to none. 305 00:15:23.750 --> 00:15:26.510 So that's exactly the class that we had in the 306 00:15:26.510 --> 00:15:29.293 previous project as well. Okay. 307 00:15:30.780 --> 00:15:32.240 And so now we can just add that class 308 00:15:32.240 --> 00:15:34.653 to the dice at the beginning of the game. 309 00:15:35.850 --> 00:15:38.110 So that's easy enough, 310 00:15:38.110 --> 00:15:39.660 but first we need to select it. 311 00:15:42.220 --> 00:15:46.560 So let's call it dice L for the dice element. 312 00:15:46.560 --> 00:15:51.560 Let's check out what the ID or the class of it is. 313 00:15:52.240 --> 00:15:56.370 And here we see that it's actually just this dice class. 314 00:15:56.370 --> 00:15:58.793 So this image with his class of a dice, 315 00:16:00.950 --> 00:16:04.600 so document not query selector dice. 316 00:16:09.120 --> 00:16:11.050 And so here we have to start in conditions 317 00:16:14.940 --> 00:16:19.940 and now let's simply do dice element.classlist.add. 318 00:16:23.100 --> 00:16:24.720 And now simply this string, 319 00:16:24.720 --> 00:16:27.710 which contains the name of the class 320 00:16:27.710 --> 00:16:31.700 and that's the hidden class, give it a safe, 321 00:16:31.700 --> 00:16:32.923 let's check it out. 322 00:16:33.872 --> 00:16:35.640 And indeed, now the dice has gone 323 00:16:35.640 --> 00:16:39.550 and let's see the HTML here, actually, 324 00:16:39.550 --> 00:16:42.910 you now indeed we have the hidden class here, 325 00:16:42.910 --> 00:16:45.750 besides the dice class. Great. 326 00:16:45.750 --> 00:16:49.220 And then as we implement the roll dice functionality, 327 00:16:49.220 --> 00:16:52.340 of course, we will want the dyes to be visible. 328 00:16:52.340 --> 00:16:56.380 And then we can simply remove that class 329 00:16:56.380 --> 00:16:59.410 again from the dice. Okay. 330 00:16:59.410 --> 00:17:02.526 And actually that's exactly what we're going to do 331 00:17:02.526 --> 00:17:03.426 in the next video.