WEBVTT 1 00:00:01.170 --> 00:00:03.220 Let's challenge ourselves 2 00:00:03.220 --> 00:00:05.473 with Coding Challenge number two. 3 00:00:07.230 --> 00:00:09.260 And in this one, we're gonna continue 4 00:00:09.260 --> 00:00:12.130 with our football betting application. 5 00:00:12.130 --> 00:00:13.600 And let me start by saying 6 00:00:13.600 --> 00:00:16.920 that this challenge is actually a bit difficult. 7 00:00:16.920 --> 00:00:17.820 All right? 8 00:00:17.820 --> 00:00:19.580 But that is on purpose. 9 00:00:19.580 --> 00:00:22.450 So after all, it's called a challenge. 10 00:00:22.450 --> 00:00:24.930 And so you should really challenge yourself 11 00:00:24.930 --> 00:00:26.900 with these exercises. 12 00:00:26.900 --> 00:00:28.430 Otherwise it could be called 13 00:00:28.430 --> 00:00:31.580 a coding copy and paste, right? 14 00:00:31.580 --> 00:00:34.290 So please try your best to solve these. 15 00:00:34.290 --> 00:00:36.733 And you can try the problem solving framework 16 00:00:36.733 --> 00:00:38.950 that we talked about earlier. 17 00:00:38.950 --> 00:00:41.760 And of course you can also use Google MDN 18 00:00:41.760 --> 00:00:43.710 and so on and so forth. 19 00:00:43.710 --> 00:00:44.720 Okay. 20 00:00:44.720 --> 00:00:48.890 But with that out of the way, let's get into the exercises. 21 00:00:48.890 --> 00:00:53.470 And the first one is to loop over the game.scored array 22 00:00:53.470 --> 00:00:56.720 and then print each of the players to the console 23 00:00:56.720 --> 00:00:58.940 along with the goal number. 24 00:00:58.940 --> 00:01:00.533 So this one is not that hard. 25 00:01:01.520 --> 00:01:03.850 And so let's just... 26 00:01:04.839 --> 00:01:06.010 Yeah. 27 00:01:06.010 --> 00:01:08.260 So the object is down here, 28 00:01:08.260 --> 00:01:11.360 so we're gonna use the same object. All right? 29 00:01:11.360 --> 00:01:14.050 So this is the array that I was talking about. 30 00:01:14.050 --> 00:01:15.408 And so here, in this case, 31 00:01:15.408 --> 00:01:18.670 we should print "lewandowski" goal one, 32 00:01:18.670 --> 00:01:22.210 Then here goal two, "Gnarby", goal three "Lewandowski", 33 00:01:22.210 --> 00:01:24.397 and goal four, "Hummels". 34 00:01:26.734 --> 00:01:28.250 Okay. 35 00:01:28.250 --> 00:01:32.950 Then number two, use a loop to calculate the average odd 36 00:01:32.950 --> 00:01:35.060 and to log it to the console. 37 00:01:35.060 --> 00:01:38.380 And we already studied how to calculate averages. 38 00:01:38.380 --> 00:01:41.980 And so you can go check that out if you don't remember. 39 00:01:41.980 --> 00:01:46.100 And here you should actually directly use the object itself. 40 00:01:46.100 --> 00:01:49.610 So don't destruct the object first into variables 41 00:01:49.610 --> 00:01:52.350 and then use that to calculate the average, 42 00:01:52.350 --> 00:01:55.720 but instead really calculate the average of the elements 43 00:01:55.720 --> 00:01:58.570 in the object, okay? 44 00:01:58.570 --> 00:02:01.830 Then number three, I want you to print the three odds 45 00:02:01.830 --> 00:02:05.970 to the console and do that in a nice formatted way, 46 00:02:05.970 --> 00:02:07.393 like you can see it here. 47 00:02:09.970 --> 00:02:13.420 Now here, You're not allowed to hard-code 48 00:02:13.420 --> 00:02:14.920 the names of the teams. 49 00:02:14.920 --> 00:02:15.753 Alright. 50 00:02:15.753 --> 00:02:19.453 So instead get them directly from the game object itself. 51 00:02:21.180 --> 00:02:23.380 Now of course you're except for draw 52 00:02:23.380 --> 00:02:26.640 because that's nowhere in the game object. 53 00:02:26.640 --> 00:02:30.430 So as a hint, I have fear that the odds 54 00:02:30.430 --> 00:02:34.250 and the game objects have the exact same property names. 55 00:02:34.250 --> 00:02:36.540 And so you can use that knowledge maybe 56 00:02:36.540 --> 00:02:38.923 to get the name of the teams here. 57 00:02:40.690 --> 00:02:44.630 So these are the three exercises for this challenge, 58 00:02:44.630 --> 00:02:47.290 but then I also have a bonus. 59 00:02:47.290 --> 00:02:49.690 Now, let me just tell you that I will not solve 60 00:02:49.690 --> 00:02:51.720 this bonus question in this video 61 00:02:51.720 --> 00:02:54.740 because it would take me a little bit too long 62 00:02:54.740 --> 00:02:56.350 but I will still put the solution 63 00:02:56.350 --> 00:02:58.750 in the final code of this section, 64 00:02:58.750 --> 00:03:00.840 so in the GitHub repository, 65 00:03:00.840 --> 00:03:02.680 so you can check out the solution there 66 00:03:02.680 --> 00:03:05.770 if you attempt to do this bonus. 67 00:03:05.770 --> 00:03:07.610 So this one is really hard. 68 00:03:07.610 --> 00:03:10.550 And what I want you to do 69 00:03:10.550 --> 00:03:13.430 is to create an object called scores, 70 00:03:13.430 --> 00:03:15.950 which will contain the name of the players 71 00:03:15.950 --> 00:03:19.200 who scored as properties, 72 00:03:19.200 --> 00:03:22.410 and so Gnarby, Hummels, and Lewandowski were the players 73 00:03:22.410 --> 00:03:24.290 who scored in this game. 74 00:03:24.290 --> 00:03:26.980 And as a value for each of the properties 75 00:03:26.980 --> 00:03:29.790 we want the number of goals. 76 00:03:29.790 --> 00:03:31.050 Alright. 77 00:03:31.050 --> 00:03:33.930 So this means Lewandowski scored two goals 78 00:03:33.930 --> 00:03:37.700 and the other two players scored just one goal each. 79 00:03:37.700 --> 00:03:40.800 So this is a little bit difficult again 80 00:03:40.800 --> 00:03:42.530 but you can do it. 81 00:03:42.530 --> 00:03:45.190 Well at least with some research 82 00:03:45.190 --> 00:03:47.960 and with some reviewing of all the material 83 00:03:47.960 --> 00:03:50.170 of the course so far. 84 00:03:50.170 --> 00:03:53.170 Anyway, good luck with this challenge. 85 00:03:53.170 --> 00:03:54.170 Take your time. 86 00:03:54.170 --> 00:03:55.370 And I'll see you once 87 00:03:55.370 --> 00:03:56.203 you're ready. 88 00:04:00.350 --> 00:04:01.183 All right. 89 00:04:02.210 --> 00:04:07.210 Hopefully you did at least one or two of these exercises. 90 00:04:08.060 --> 00:04:10.820 And so here it goes my solution. 91 00:04:10.820 --> 00:04:13.050 And keep in mind once more that my solution 92 00:04:13.050 --> 00:04:16.430 might be different from yours, but that's totally okay. 93 00:04:16.430 --> 00:04:19.840 As long as yours produces the same result. 94 00:04:19.840 --> 00:04:23.790 So here, the goal is to score on the scored array, 95 00:04:23.790 --> 00:04:26.920 and print all of the players to the console. 96 00:04:26.920 --> 00:04:31.920 So const, and let's again fix that later, 97 00:04:32.850 --> 00:04:37.850 and then of game.scored. 98 00:04:38.110 --> 00:04:40.423 And now we actually want the entries. 99 00:04:42.640 --> 00:04:43.473 All right. 100 00:04:43.473 --> 00:04:46.730 And we want the indexes because we also want 101 00:04:46.730 --> 00:04:47.910 the number of the goal. 102 00:04:47.910 --> 00:04:48.743 Remember? 103 00:04:48.743 --> 00:04:50.773 So goal one, two, three, and four. 104 00:04:51.880 --> 00:04:55.164 Okay. And so entries will give us that. 105 00:04:55.164 --> 00:04:58.170 And so now we just need to re-structure that 106 00:04:58.170 --> 00:05:01.183 into the index and then the player. 107 00:05:04.190 --> 00:05:07.630 Okay. Actually we don't even need to curly braces. 108 00:05:07.630 --> 00:05:11.310 Let's just say, console.log and then Goal, 109 00:05:15.350 --> 00:05:17.070 then the index plus one. 110 00:05:17.070 --> 00:05:19.513 So that it starts at goal number one, 111 00:05:21.132 --> 00:05:23.433 and then simply the player. 112 00:05:24.500 --> 00:05:25.523 Let's take a look. 113 00:05:26.530 --> 00:05:28.570 Oh, and now we have the problem here 114 00:05:28.570 --> 00:05:32.003 that I'm accessing game before it is initialized. 115 00:05:33.010 --> 00:05:35.483 And so the problem is that the game is down here. 116 00:05:36.560 --> 00:05:39.760 So I'll have to take this game object now 117 00:05:39.760 --> 00:05:41.113 to that other challenge. 118 00:05:42.480 --> 00:05:46.773 So let's just cut it from here and put it here. 119 00:05:49.620 --> 00:05:51.080 So now it should work. 120 00:05:51.080 --> 00:05:53.260 And indeed we get the four goals 121 00:05:53.260 --> 00:05:55.070 nicely printed to the console 122 00:05:56.000 --> 00:05:58.633 exactly in the order in which they appear here. 123 00:06:01.890 --> 00:06:04.130 Alright, next one. 124 00:06:04.130 --> 00:06:08.000 And it is one we have to calculate the average odd. 125 00:06:08.000 --> 00:06:12.000 So the average basically of these three numbers here. 126 00:06:12.000 --> 00:06:16.340 So what we're gonna do is to loop over this object here 127 00:06:16.340 --> 00:06:19.490 and simply add all of these three values together 128 00:06:19.490 --> 00:06:23.920 and then finally divide them by the number of elements here. 129 00:06:23.920 --> 00:06:26.950 And so that's how you calculate an average. 130 00:06:26.950 --> 00:06:31.950 And so we start by creating the average and set it to zero. 131 00:06:34.220 --> 00:06:37.403 And so again, we already did that before, I believe. 132 00:06:38.410 --> 00:06:39.710 And so now we can loop 133 00:06:39.710 --> 00:06:43.073 over the object such as I explained it to you before. 134 00:06:45.320 --> 00:06:50.320 const odd of, and now what do we actually want? 135 00:06:51.030 --> 00:06:54.770 Do we want the keys or the values or both? 136 00:06:54.770 --> 00:06:57.270 Well, in this case, we are really just interested 137 00:06:57.270 --> 00:06:59.373 in the values, right? 138 00:07:00.230 --> 00:07:03.760 And so this Object.values will give us an array 139 00:07:03.760 --> 00:07:06.563 essentially containing these three values. 140 00:07:08.740 --> 00:07:13.740 So we need to say game.odds. 141 00:07:15.260 --> 00:07:16.093 Okay. 142 00:07:16.093 --> 00:07:17.210 And now in each iteration, 143 00:07:17.210 --> 00:07:20.560 we will simply add these odds to the average. 144 00:07:20.560 --> 00:07:21.490 So that then in the end, 145 00:07:21.490 --> 00:07:26.363 we can divide it by the length of this object.values array. 146 00:07:27.580 --> 00:07:32.547 So let's do that, plus equal the current odd, 147 00:07:34.921 --> 00:07:38.613 and then finally average, average divided equal, 148 00:07:41.470 --> 00:07:46.470 and so this is a new one, by object.values, game.odds, 149 00:07:52.319 --> 00:07:54.683 and then let's log it to the console. 150 00:07:56.880 --> 00:07:59.313 So this one here means basically, 151 00:07:59.313 --> 00:08:03.593 average is equal average divided by this here. 152 00:08:04.830 --> 00:08:06.840 And this is actually the same as up here, 153 00:08:06.840 --> 00:08:10.253 so that's refactor it into let's say, 154 00:08:14.480 --> 00:08:19.480 simply odds, and then let's use that here. 155 00:08:20.900 --> 00:08:21.733 Odds, 156 00:08:23.010 --> 00:08:24.023 and odds. 157 00:08:26.930 --> 00:08:28.470 And we have a problem. 158 00:08:28.470 --> 00:08:30.844 So let's do some debugging here. 159 00:08:30.844 --> 00:08:34.540 I will start by taking a look at the average 160 00:08:34.540 --> 00:08:37.423 after it is computed here in the array. 161 00:08:39.200 --> 00:08:42.220 So average, oh. 162 00:08:42.220 --> 00:08:43.820 So here we have a number 163 00:08:43.820 --> 00:08:47.190 which means that something is wrong here in the division. 164 00:08:47.190 --> 00:08:48.580 Right. 165 00:08:48.580 --> 00:08:52.793 And I see it's because we need to write odds.length. 166 00:08:54.020 --> 00:08:58.160 Okay. And so then it will be the number three in this case. 167 00:08:58.160 --> 00:09:01.050 So before I was dividing by the entire array 168 00:09:01.050 --> 00:09:03.280 and that doesn't make any sense. 169 00:09:03.280 --> 00:09:06.773 And so now we should see something close to four here. 170 00:09:07.760 --> 00:09:11.560 Yeah. So 3.7 essentially. 171 00:09:11.560 --> 00:09:13.463 And so that's our result. 172 00:09:14.740 --> 00:09:15.850 Okay. 173 00:09:15.850 --> 00:09:18.050 And you can go over to this code here again, 174 00:09:19.120 --> 00:09:21.470 if you need to understand that even further, 175 00:09:21.470 --> 00:09:25.013 but now let's move on here to Exercise number three. 176 00:09:26.300 --> 00:09:29.080 And this time the goal is to print basically 177 00:09:29.080 --> 00:09:32.210 the content of the object to the console. 178 00:09:32.210 --> 00:09:34.101 So we're gonna loop over that. 179 00:09:34.101 --> 00:09:38.420 And again, I will first say what we need here actually. 180 00:09:38.420 --> 00:09:42.420 So we want to print both the team and the odd, 181 00:09:42.420 --> 00:09:44.590 so we need the entire object. 182 00:09:44.590 --> 00:09:48.010 And so just as we learned in a previous lecture, 183 00:09:48.010 --> 00:09:53.010 we use object.entries of game.odds. 184 00:09:58.650 --> 00:10:02.590 Okay. And so we know that we get an array of arrays, 185 00:10:02.590 --> 00:10:07.590 which in each position will have both the team and the odd. 186 00:10:07.780 --> 00:10:08.613 All right. 187 00:10:08.613 --> 00:10:13.083 So let's say team and odd. 188 00:10:15.200 --> 00:10:16.033 All right. 189 00:10:16.033 --> 00:10:19.190 And so here it is us who defined the variable name 190 00:10:19.190 --> 00:10:21.350 because it is now an array. 191 00:10:21.350 --> 00:10:23.763 So we don't have to match any property names. 192 00:10:24.630 --> 00:10:28.190 And let's start by simply logging both to the console 193 00:10:28.190 --> 00:10:30.793 team and odd. 194 00:10:33.180 --> 00:10:34.013 Okay. 195 00:10:34.013 --> 00:10:36.780 And so indeed, we already have that kind of working. 196 00:10:36.780 --> 00:10:38.660 We already have the team here 197 00:10:38.660 --> 00:10:41.663 and we have the three odd values. 198 00:10:42.740 --> 00:10:44.940 Now what we want to do is to create a string 199 00:10:46.360 --> 00:10:48.113 like this. 200 00:10:49.350 --> 00:10:50.590 let's actually copy this. 201 00:10:50.590 --> 00:10:52.123 So we know what we have to do. 202 00:11:00.500 --> 00:11:02.587 And by the way, here, notice again, 203 00:11:02.587 --> 00:11:04.930 what I explained to you in the last lecture, 204 00:11:04.930 --> 00:11:08.480 how in the array we use the entries method 205 00:11:08.480 --> 00:11:10.310 to get the entries of the array, 206 00:11:10.310 --> 00:11:13.900 but in the object we have to use object.entries 207 00:11:13.900 --> 00:11:16.090 and then pass into the function, 208 00:11:16.090 --> 00:11:19.080 the object that we are interested in. 209 00:11:19.080 --> 00:11:20.957 So that's fundamentally difference. 210 00:11:20.957 --> 00:11:22.633 So keep that in mind. 211 00:11:25.100 --> 00:11:29.220 Okay. So here, we now want to build a string like that. 212 00:11:29.220 --> 00:11:34.220 So odd of victory Bayern Munich, 213 00:11:34.880 --> 00:11:37.660 draw or victory Borussia Dortmund. 214 00:11:37.660 --> 00:11:39.920 And so here, we're gonna need some more logic. 215 00:11:39.920 --> 00:11:41.693 Let's just put here some dots. 216 00:11:42.890 --> 00:11:45.080 And now, now here the odd. 217 00:11:45.080 --> 00:11:46.850 So the odd is the easy part. 218 00:11:46.850 --> 00:11:48.713 So we have that one already finished. 219 00:11:50.180 --> 00:11:53.113 But now here we need some more complex logic. 220 00:11:54.050 --> 00:11:57.253 And actually let's create this part of the string. 221 00:11:58.250 --> 00:12:01.310 So like victory Bayern Munich, or Borrusia Dortmund 222 00:12:01.310 --> 00:12:04.403 or draw, let's create it here in a separate value. 223 00:12:08.720 --> 00:12:10.680 So let's call this one teamString. 224 00:12:12.530 --> 00:12:14.050 And so here what I'm gonna use 225 00:12:14.050 --> 00:12:16.570 is to use the ternery operator. 226 00:12:16.570 --> 00:12:17.600 Okay. 227 00:12:17.600 --> 00:12:21.570 So I will say that if the team here is x, 228 00:12:21.570 --> 00:12:22.530 like we have a it here, 229 00:12:22.530 --> 00:12:25.090 then the string should become draw. 230 00:12:25.090 --> 00:12:27.563 And so that will then create this here. 231 00:12:29.180 --> 00:12:34.180 So team equals x then the result should be draw. 232 00:12:37.170 --> 00:12:42.130 But if not, then we need the team name itself. 233 00:12:42.130 --> 00:12:44.680 So how will we get that? 234 00:12:44.680 --> 00:12:47.303 And remember, there was a hint about this. 235 00:12:48.400 --> 00:12:49.970 So note how the odds 236 00:12:49.970 --> 00:12:53.610 and the game objects have the same property names. 237 00:12:53.610 --> 00:12:56.700 And indeed here we have team one, team two, 238 00:12:56.700 --> 00:13:00.140 and here we have team one and team two as well. 239 00:13:00.140 --> 00:13:02.653 And so here are the team names. 240 00:13:03.970 --> 00:13:07.060 And so let's now get these team names 241 00:13:07.060 --> 00:13:10.163 using these keys that we already have here. 242 00:13:13.405 --> 00:13:15.520 So we want to string victory. 243 00:13:21.660 --> 00:13:25.483 And then we go to the game object and team. 244 00:13:27.400 --> 00:13:28.363 Let's check. 245 00:13:29.580 --> 00:13:32.313 Now I know of course we need to put that string here. 246 00:13:34.270 --> 00:13:39.270 So teamString and it works beautiful. 247 00:13:41.330 --> 00:13:43.750 So let's just recap this part here. 248 00:13:43.750 --> 00:13:46.010 So here we go into the game, 249 00:13:46.010 --> 00:13:48.470 which is the entire game object 250 00:13:48.470 --> 00:13:51.230 and we take the property team. 251 00:13:51.230 --> 00:13:54.810 But team is already this property name here, right? 252 00:13:54.810 --> 00:13:56.610 So it's team one or team two. 253 00:13:56.610 --> 00:13:59.580 And so then we take that to read the property 254 00:13:59.580 --> 00:14:02.003 with the same name from the game object. 255 00:14:03.400 --> 00:14:06.733 And so therefore we get Bayern Munich and Borussia Dortmund. 256 00:14:08.430 --> 00:14:09.361 Okay. Great. 257 00:14:09.361 --> 00:14:12.460 So this one was a little bit more tough 258 00:14:12.460 --> 00:14:15.320 but we managed to do it in the end. 259 00:14:15.320 --> 00:14:18.120 Now, again, I will not create the solution 260 00:14:18.120 --> 00:14:20.620 for the bonus but you can always find it 261 00:14:20.620 --> 00:14:23.720 in the final code of this section. 262 00:14:23.720 --> 00:14:25.100 And with that being said, 263 00:14:25.100 --> 00:14:28.143 let's now go back to learning some more JavaScript.