WEBVTT 1 00:01.280 --> 00:05.650 Welcome to the first coding challenge of this section. 2 00:05.650 --> 00:08.383 And this one is gonna be an exciting one. 3 00:10.160 --> 00:11.450 Because in this one, 4 00:11.450 --> 00:14.980 we are building a simple Pol application. 5 00:14.980 --> 00:17.370 So a pol has a question, 6 00:17.370 --> 00:20.790 an array of options from which people can choose, 7 00:20.790 --> 00:25.270 and an array with the number of replies for each option. 8 00:25.270 --> 00:28.240 And this data is stored in this object here 9 00:28.240 --> 00:30.430 that it already created for you. 10 00:30.430 --> 00:32.960 Now you can copy this object from here, 11 00:32.960 --> 00:35.110 or you can get it from the final code 12 00:35.110 --> 00:38.723 that's available for the section in the GitHub repository. 13 00:40.130 --> 00:43.180 Now, okay, so you see, we have to question, 14 00:43.180 --> 00:48.180 the array of options, and also a new array of answers. 15 00:48.840 --> 00:50.040 So this code here, 16 00:50.040 --> 00:52.660 we will learn how it works in the next lecture. 17 00:52.660 --> 00:57.180 But this will create this array of four zeros. 18 00:57.180 --> 01:00.360 And that's because there are four options here, 19 01:00.360 --> 01:01.473 for this question. 20 01:03.900 --> 01:06.520 And now, here are your tasks. 21 01:06.520 --> 01:09.340 So first up in that poll object, 22 01:09.340 --> 01:13.040 create a new method called register new answer. 23 01:13.040 --> 01:15.990 And this method does two things. 24 01:15.990 --> 01:17.770 So displays a prompt window 25 01:17.770 --> 01:21.500 for the user to input the number of the selected option. 26 01:21.500 --> 01:25.163 And here, I want the text to look exactly like this. 27 01:26.200 --> 01:27.159 Then, 28 01:27.159 --> 01:30.210 based on the inputted number, 29 01:30.210 --> 01:34.750 so the user should input either zero, one, two or three. 30 01:34.750 --> 01:37.863 So based on that, update the answers array. 31 01:38.800 --> 01:40.670 So if the user, 32 01:40.670 --> 01:42.479 gives three here, 33 01:42.479 --> 01:43.770 as the option, 34 01:43.770 --> 01:47.850 then increase the value at position three of the array. 35 01:47.850 --> 01:50.223 And of course, increase that by one. 36 01:51.580 --> 01:55.410 To do this, make sure that the input is actually a number. 37 01:55.410 --> 01:57.793 And if that number makes sense, 38 02:00.600 --> 02:03.150 then I want you to call this method, 39 02:03.150 --> 02:06.580 whenever the user clicks on this button. 40 02:06.580 --> 02:09.170 And so this is where the second button here, 41 02:09.170 --> 02:10.573 comes into play. 42 02:11.720 --> 02:16.240 Then number three, create a method called display results. 43 02:16.240 --> 02:19.150 And this one, should, as the name says, 44 02:19.150 --> 02:21.460 display the results of the poll. 45 02:21.460 --> 02:25.080 Now this method takes an argument called type. 46 02:25.080 --> 02:29.390 And that type should be a string, as I say, here, 47 02:29.390 --> 02:32.900 and the value of that string should either be string, 48 02:32.900 --> 02:34.060 or array. 49 02:34.060 --> 02:37.410 So these are two different ways of displaying the results, 50 02:37.410 --> 02:38.730 basically. 51 02:38.730 --> 02:42.260 Now, if the type is set to the string of array, 52 02:42.260 --> 02:45.590 then simply display the results array as it is, 53 02:45.590 --> 02:48.290 using a normal console dot log. 54 02:48.290 --> 02:51.890 And this should actually be the default option. 55 02:51.890 --> 02:56.130 All right. Now, if the type is set to string, 56 02:56.130 --> 02:59.883 then display a string like this one here. 57 03:00.870 --> 03:05.490 Okay. And then once you have this method built, 58 03:05.490 --> 03:10.190 run it each time after the register a new answer. 59 03:10.190 --> 03:11.350 So essentially, 60 03:11.350 --> 03:14.653 whenever someone clicks on this button here, 61 03:15.740 --> 03:17.340 it will call this; 62 03:19.748 --> 03:21.660 there's register a new answer method. 63 03:21.660 --> 03:26.660 And then this method itself will call display results. 64 03:27.070 --> 03:29.220 Okay. And to do this, 65 03:29.220 --> 03:33.360 use as many of the tools that you learned in this section, 66 03:33.360 --> 03:35.760 and probably also the last sections, 67 03:35.760 --> 03:38.583 and really all the course itself. 68 03:39.430 --> 03:43.450 Now, there are a lot of moving parts in this challenge. 69 03:43.450 --> 03:47.250 And it might not be as straightforward as it seems here. 70 03:47.250 --> 03:49.190 So if you need to cut some corners, 71 03:49.190 --> 03:51.570 and make some things a little bit easier, 72 03:51.570 --> 03:53.740 then that's absolutely no problem. 73 03:53.740 --> 03:55.920 At least just write some code on your own. 74 03:55.920 --> 03:58.403 That's really my main goal with this challenge. 75 03:59.280 --> 04:02.530 Then if you manage to do these challenges, 76 04:02.530 --> 04:05.320 or to do the challenge as instructed here, 77 04:05.320 --> 04:07.630 then I also have a bonus for you. 78 04:07.630 --> 04:11.750 And so that is to use these display results method, 79 04:11.750 --> 04:15.599 that you built before to display these two arrays, 80 04:15.599 --> 04:17.703 that we have here in the test data. 81 04:18.720 --> 04:20.830 Okay. So usually, 82 04:20.830 --> 04:24.210 you simply use this method to display 83 04:24.210 --> 04:28.490 the answers array that's inside of the object. 84 04:28.490 --> 04:32.250 But here, I want you to really display simply this array, 85 04:32.250 --> 04:33.950 and this array. 86 04:33.950 --> 04:34.970 And of course, 87 04:34.970 --> 04:39.970 do not put this array here inside of this poll object. 88 04:40.150 --> 04:42.910 Okay, you should use them individually. 89 04:42.910 --> 04:43.960 Now, for doing this, 90 04:43.960 --> 04:45.750 you have to really think about 91 04:45.750 --> 04:49.430 what the "this" keyword should look like in this situation. 92 04:49.430 --> 04:50.890 And then you need to, 93 04:50.890 --> 04:54.653 and then you basically need to set this keyword accordingly. 94 04:55.530 --> 04:58.810 Now, okay, so that's a nice challenge here, 95 04:58.810 --> 05:01.400 and one thing that is certain is that, 96 05:01.400 --> 05:04.780 your code will look different than mine. 97 05:04.780 --> 05:07.950 I'm just a normal developer like anyone else, 98 05:07.950 --> 05:10.400 and everybody writes their own code. 99 05:10.400 --> 05:14.210 And so my code is different from everyone else's code, 100 05:14.210 --> 05:15.360 probably. 101 05:15.360 --> 05:17.720 And so yeah, that's completely normal, 102 05:17.720 --> 05:21.120 if you are starting to develop your own style. 103 05:21.120 --> 05:24.240 So take maybe an hour even to do all of this, 104 05:24.240 --> 05:27.653 and then come back to this video to check out my solution. 105 05:31.360 --> 05:36.330 So let's get to work here. I hope it went well for you, 106 05:36.330 --> 05:37.933 when you try it out on your own. 107 05:39.330 --> 05:42.683 And you can always share your experience in the q&a area. 108 05:43.940 --> 05:47.000 Anyway, let's now get the answer here. 109 05:47.000 --> 05:48.823 And so for that we use prompt. 110 05:49.810 --> 05:51.320 So const, 111 05:51.320 --> 05:52.153 answer, 112 05:53.420 --> 05:54.253 prompt. 113 05:55.500 --> 05:59.030 And so, let's see what it has to look like. 114 05:59.030 --> 06:01.120 So it's just a question, 115 06:01.120 --> 06:03.030 then it's a new line, 116 06:03.030 --> 06:04.340 then it's these options, 117 06:04.340 --> 06:07.770 another new line, and then right up to number. 118 06:07.770 --> 06:09.750 So this part is always the same. 119 06:09.750 --> 06:11.963 So I'm just copying it from here. 120 06:14.150 --> 06:16.653 So, we want to grab the question first. 121 06:17.860 --> 06:19.650 And so that is, 122 06:19.650 --> 06:20.483 this, 123 06:21.340 --> 06:22.323 dot question. 124 06:23.550 --> 06:26.940 Then the new line, which is this, remember, 125 06:26.940 --> 06:28.900 then we want the options. 126 06:28.900 --> 06:32.803 And so one new line for each of these options here. 127 06:33.660 --> 06:37.290 So this is an array, we want to transform it to a string. 128 06:37.290 --> 06:40.790 And so for that, we use the join method. 129 06:40.790 --> 06:44.520 So this one we learned about in the previous section. 130 06:44.520 --> 06:46.423 So I hope you remember this one. 131 06:47.330 --> 06:52.233 And so we take the options array here and join it. 132 06:53.110 --> 06:57.363 And we do join it again by the newline character. 133 06:59.160 --> 07:02.893 Now, okay, and then finally, another new line. 134 07:04.263 --> 07:05.213 And then this part. 135 07:06.440 --> 07:09.090 Now, right? Oh, and then we of course, 136 07:09.090 --> 07:13.293 also need to convert this result to a number. 137 07:14.590 --> 07:17.230 All right. So this looks good. 138 07:17.230 --> 07:21.653 Let's just add a comment here. So this is get the answer. 139 07:23.434 --> 07:26.093 And then here second, is to, 140 07:27.150 --> 07:28.083 register. 141 07:28.920 --> 07:29.753 I think that's, 142 07:30.730 --> 07:32.073 what we had here. 143 07:33.700 --> 07:35.750 So the first step is to get the answer. 144 07:35.750 --> 07:39.253 And the second is to basically update the answers. 145 07:40.530 --> 07:42.923 So I'm just calling that register the answer. 146 07:45.790 --> 07:50.663 Okay, but here, let's actually start by trying it out. 147 07:51.500 --> 07:53.380 So let's do for now, poll dot 148 07:54.900 --> 07:57.303 register new answer. 149 07:59.430 --> 08:00.263 And indeed, 150 08:00.263 --> 08:04.180 this is exactly the formatting we were looking for, 151 08:04.180 --> 08:07.323 let's say three. And indeed, we get three. 152 08:08.580 --> 08:09.413 Nice. 153 08:11.390 --> 08:13.750 And so now let's register the answer. 154 08:13.750 --> 08:15.630 And remember that we should check, 155 08:15.630 --> 08:18.530 if this value is actually a number. 156 08:18.530 --> 08:21.500 And also, if it makes actually sense. 157 08:21.500 --> 08:23.603 So in terms of the number of options. 158 08:25.070 --> 08:29.530 So first, we check if it is indeed a number. 159 08:29.530 --> 08:31.790 And there are better ways of checking this, 160 08:31.790 --> 08:33.313 but more about that later. 161 08:34.270 --> 08:36.703 And we also want to know if the answer, 162 08:37.669 --> 08:42.630 is below the length of this array, basically. Right? 163 08:42.630 --> 08:46.840 So if the answer is 10, then that doesn't make any sense. 164 08:46.840 --> 08:49.290 And so it must stay below the length. 165 08:49.290 --> 08:51.060 So the length here is four. 166 08:51.060 --> 08:55.740 And so the max reply that we accept is three. 167 08:55.740 --> 08:58.983 So answer needs to stay below this dot answers, 168 09:00.200 --> 09:02.230 dot length. 169 09:02.230 --> 09:05.090 Now here, we could not do an if statement, 170 09:05.090 --> 09:08.460 and basically saying that if this is true, 171 09:08.460 --> 09:13.220 then increase the answers array at the correct position. 172 09:13.220 --> 09:14.670 However, instead, 173 09:14.670 --> 09:18.320 this is actually a great use case for short circuiting, 174 09:18.320 --> 09:20.163 with the end operator. 175 09:21.950 --> 09:26.510 So let's simply do this. So this dot answers, 176 09:26.510 --> 09:29.403 and then we go to the position of answer, 177 09:31.420 --> 09:34.670 and then simply increase it like this. 178 09:34.670 --> 09:38.710 Now, all right, so if this is true, 179 09:38.710 --> 09:41.565 then the end operator will keep going. Right? 180 09:41.565 --> 09:45.350 And so then this is evaluated, and if it's still true, 181 09:45.350 --> 09:47.800 then this here is executed. 182 09:47.800 --> 09:51.150 But if either one of these conditions here is false, 183 09:51.150 --> 09:53.980 then the end operator will short circuit, 184 09:53.980 --> 09:56.850 and this part here is not executed. 185 09:56.850 --> 10:00.800 So this is a nice use case for short circuiting, 186 10:00.800 --> 10:03.230 because the code that we want to execute, 187 10:03.230 --> 10:06.030 is just one simple line of code. 188 10:06.030 --> 10:08.850 Now, okay. So now let's, 189 10:08.850 --> 10:10.250 then, 190 10:10.250 --> 10:11.813 take a look at the answers. 191 10:12.800 --> 10:14.573 So this dot answers. 192 10:16.920 --> 10:21.030 So this is for now, the register a new answer method. 193 10:21.030 --> 10:24.750 And now let's focus here on point number two, 194 10:24.750 --> 10:26.930 which is to actually call the method, 195 10:26.930 --> 10:30.473 whenever we click on this ENTER button here. 196 10:32.360 --> 10:33.370 So, 197 10:33.370 --> 10:35.623 let's select that button, 198 10:36.900 --> 10:39.163 document dot query selector. 199 10:40.420 --> 10:42.750 And now we need the class name. 200 10:42.750 --> 10:45.200 Let's check that out here again, in the elements. 201 10:46.220 --> 10:48.493 And so it has the class of poll. 202 10:51.000 --> 10:52.063 So poll, 203 10:53.680 --> 10:55.523 dot @ event listener. 204 10:56.400 --> 11:00.780 Click, and now the function that we want to execute. 205 11:00.780 --> 11:03.060 And so that is @ poll 206 11:03.060 --> 11:04.610 dot 207 11:04.610 --> 11:07.270 register new answer. 208 11:07.270 --> 11:11.363 All right. Now, do you think that this will work like this? 209 11:12.320 --> 11:14.070 And let's give it a save, actually. 210 11:15.000 --> 11:17.230 And there is an error. 211 11:17.230 --> 11:20.190 And that's because we're trying to read property join, 212 11:20.190 --> 11:23.640 of undefined, right here. 213 11:23.640 --> 11:26.900 And so the problem here is, as you might have guessed, 214 11:26.900 --> 11:29.130 because we talked about this before, 215 11:29.130 --> 11:34.130 is that the "this" keyword right now, points to this element. 216 11:34.190 --> 11:36.660 So to this poll button here. 217 11:36.660 --> 11:40.870 And so again, there is because in an event handler function, 218 11:40.870 --> 11:42.980 such as this one here, 219 11:42.980 --> 11:46.200 that this keyword will always point to the element, 220 11:46.200 --> 11:48.160 to which it is attached. 221 11:48.160 --> 11:51.220 And so right now, there is this button. 222 11:51.220 --> 11:55.120 So to fix this, we need to bind the "this" keyword. 223 11:55.120 --> 11:59.170 And in this case, we need to set it to the poll object. 224 11:59.170 --> 12:02.410 And so then, in this function here, 225 12:02.410 --> 12:04.900 which is the result of the bind method, 226 12:04.900 --> 12:07.060 so in this new function, 227 12:07.060 --> 12:10.603 the "this" keyword will then point to the poll object. 228 12:12.150 --> 12:15.720 So let's see that, and now indeed, it works. 229 12:15.720 --> 12:17.620 So that's input zero here. 230 12:17.620 --> 12:20.410 And indeed, we already get our array, 231 12:20.410 --> 12:23.640 where the count of the answers in position zero, 232 12:23.640 --> 12:26.630 has increased. And if we try this, again, 233 12:26.630 --> 12:27.993 it should become two. 234 12:29.030 --> 12:29.993 And it does. 235 12:31.570 --> 12:35.390 Now, in order to actually display these results, 236 12:35.390 --> 12:39.730 we should create this new method called display results. 237 12:39.730 --> 12:44.350 Now, right, so it takes a string that is called type, 238 12:44.350 --> 12:46.913 with array being the default here. 239 12:48.390 --> 12:49.223 Now, right. 240 12:50.360 --> 12:52.370 So let's do this. 241 12:52.370 --> 12:53.540 And also keep in mind, 242 12:53.540 --> 12:56.430 that this is the kind of string that we want, 243 12:56.430 --> 12:58.470 if the type is string. 244 12:58.470 --> 13:00.393 So let's copy this one. 245 13:01.560 --> 13:04.783 And now here, we add that new method called, 246 13:05.770 --> 13:06.743 display, 247 13:09.200 --> 13:10.083 results. 248 13:11.070 --> 13:12.563 And so it gets the type. 249 13:13.740 --> 13:18.480 And remember, it has the default set to array. 250 13:18.480 --> 13:21.830 And so here, we can use the ESX default parameters, 251 13:21.830 --> 13:24.043 using this equal sign. 252 13:25.020 --> 13:25.853 So, 253 13:25.853 --> 13:27.160 if, 254 13:27.160 --> 13:28.863 type equals, 255 13:29.780 --> 13:30.613 array, 256 13:32.710 --> 13:34.020 then simply log, 257 13:34.020 --> 13:34.870 this, 258 13:34.870 --> 13:35.703 dot, 259 13:36.600 --> 13:37.433 enters, 260 13:37.433 --> 13:38.990 to the console. 261 13:38.990 --> 13:40.130 Else, 262 13:40.130 --> 13:40.963 if, 263 13:42.510 --> 13:44.313 the type equals, 264 13:45.580 --> 13:46.413 string, 265 13:48.240 --> 13:51.653 then we want to log something like this to the console. 266 13:55.010 --> 13:59.023 So once more a template string, or template literal. 267 13:59.860 --> 14:01.740 And actually this would be outside 268 14:03.260 --> 14:04.620 results, 269 14:04.620 --> 14:05.453 are. 270 14:06.333 --> 14:08.440 And then to create this here, 271 14:08.440 --> 14:13.220 we can simply join the array together to form a string. 272 14:13.220 --> 14:17.653 So that's this dot results or actually answers, 273 14:20.490 --> 14:25.490 dot join, and we join them with a comma and a space. 274 14:26.220 --> 14:28.533 Now, okay, and so now here, 275 14:29.920 --> 14:32.090 let's get rid of this console dot log. 276 14:32.090 --> 14:35.320 And instead, we will now call this method. 277 14:35.320 --> 14:38.163 So this dot display results. 278 14:39.170 --> 14:41.190 And that's actually called twice. 279 14:41.190 --> 14:44.023 Once without passing any argument, 280 14:45.000 --> 14:47.860 and then here passing in, 281 14:47.860 --> 14:48.830 string, 282 14:48.830 --> 14:52.270 and so then we will see both types of results, 283 14:52.270 --> 14:54.370 printed to the console. 284 14:54.370 --> 14:55.283 And so this is, 285 14:56.560 --> 14:57.623 number four here. 286 14:59.230 --> 15:01.953 So, let's give it a save. 287 15:04.190 --> 15:08.173 Zero. And, indeed, it works just the same. 288 15:12.110 --> 15:13.003 Number three, 289 15:14.040 --> 15:15.920 let's try, 290 15:15.920 --> 15:17.040 three again. 291 15:17.040 --> 15:19.170 And so indeed, it works just fine. 292 15:19.170 --> 15:20.770 Let me now input something else. 293 15:21.850 --> 15:23.580 And so then nothing changes here. 294 15:23.580 --> 15:25.513 So the results are not updated. 295 15:26.410 --> 15:31.410 And that's because of this testing logic that we have here. 296 15:32.000 --> 15:36.523 Great. So I hope you have been following this far. 297 15:38.640 --> 15:41.290 So this is similar to what we have been doing. 298 15:41.290 --> 15:43.353 And now let's check out the bonus here. 299 15:44.230 --> 15:48.870 So let's use the display results method that we just use, 300 15:48.870 --> 15:51.480 but to display these two arrays. 301 15:51.480 --> 15:53.620 Okay, let's copy them just, 302 15:53.620 --> 15:56.170 so we don't have to scroll so much. 303 15:56.170 --> 15:59.470 And it says here that we should think about, 304 15:59.470 --> 16:02.240 what the "this" keyword will look like. 305 16:02.240 --> 16:04.453 So we will do that, of course. 306 16:07.300 --> 16:11.403 Okay, so these are the arrays that we're gonna work with. 307 16:13.740 --> 16:14.573 So, 308 16:15.890 --> 16:20.530 the method is at Pol dot display results. 309 16:20.530 --> 16:21.660 But as I said, 310 16:21.660 --> 16:23.023 now, we want to call, 311 16:24.201 --> 16:28.240 this method here, not with this array. 312 16:28.240 --> 16:33.090 So not with the answers array, but instead with this array. 313 16:33.090 --> 16:35.370 So what should we do here? 314 16:35.370 --> 16:38.760 Well, we will have to use the call method, 315 16:38.760 --> 16:42.000 because we will need a new "this" keyword, right? 316 16:42.000 --> 16:46.571 Because display results uses this dot answers. 317 16:46.571 --> 16:50.580 Okay, so the answers come from the "this" keyword. 318 16:50.580 --> 16:53.660 And so if we want to have a different "this" keyword, 319 16:53.660 --> 16:55.053 then we need to use call. 320 16:56.460 --> 16:59.320 And what should the "this" keyword be like? 321 16:59.320 --> 17:00.820 Well, we need an object, 322 17:00.820 --> 17:04.060 which contains the answers property here, right? 323 17:04.060 --> 17:06.820 Otherwise, there is no way for this method, 324 17:06.820 --> 17:09.460 to call this dot answers. 325 17:09.460 --> 17:12.363 And so we can simply create a new object, 326 17:13.780 --> 17:16.343 and say, answers, and then, 327 17:17.490 --> 17:19.120 this, 328 17:19.120 --> 17:21.970 this array, and that's it. 329 17:21.970 --> 17:22.993 Let's try this. 330 17:23.990 --> 17:27.223 And indeed, here is the result printed. 331 17:28.250 --> 17:32.093 And that's even now passing us the, the string option. 332 17:34.270 --> 17:36.780 And so now Indeed, we get poll results are, 333 17:36.780 --> 17:39.500 five, two, and three. 334 17:39.500 --> 17:43.470 All right. So again, to recap, this works, 335 17:43.470 --> 17:48.470 because this function here is looking for this dot answers. 336 17:49.210 --> 17:52.510 But our array is, well, it's simply out here. 337 17:52.510 --> 17:55.840 So we need a way to make this dot answers, 338 17:55.840 --> 17:57.570 equal to this array. 339 17:57.570 --> 18:00.080 And so that's why we used to call method here, 340 18:00.080 --> 18:03.540 so that we could manually set the "this" keyword, 341 18:03.540 --> 18:05.160 to a new object, 342 18:05.160 --> 18:08.653 which as the answers property has that new array. 343 18:10.090 --> 18:12.590 And now let's just try it with the other one here. 344 18:17.689 --> 18:20.447 And, 345 18:20.447 --> 18:23.240 and we can do the same without the string, 346 18:23.240 --> 18:25.853 and then it will just lock the array itself. 347 18:27.430 --> 18:30.730 And yeah, that works just fine. 348 18:30.730 --> 18:32.210 Great. 349 18:32.210 --> 18:36.520 Now, what we did here, it's not really a real scenario, 350 18:36.520 --> 18:39.500 but it's still good for us to use these concepts, 351 18:39.500 --> 18:41.020 in some different ways, 352 18:41.020 --> 18:43.930 to really get used to how all of these concepts, 353 18:43.930 --> 18:44.993 work together.