WEBVTT 1 00:00:01.350 --> 00:00:03.100 So I showed you some ideas 2 00:00:03.100 --> 00:00:05.730 and some tools to solve problems 3 00:00:05.730 --> 00:00:08.560 and to debug your applications. 4 00:00:08.560 --> 00:00:10.330 And so now it's your turn 5 00:00:10.330 --> 00:00:13.563 to put all of that into practice on your own. 6 00:00:15.280 --> 00:00:19.150 And so here is your coding challenge for this section. 7 00:00:19.150 --> 00:00:23.670 So given an array of forecast at maximum temperatures, 8 00:00:23.670 --> 00:00:26.370 to thermometer that we've been working about 9 00:00:26.370 --> 00:00:28.900 throughout this section should display 10 00:00:28.900 --> 00:00:32.240 a string with these forecasted temperatures. 11 00:00:32.240 --> 00:00:35.820 So for example, if we have this array, 12 00:00:35.820 --> 00:00:38.270 which is our first test data here, 13 00:00:38.270 --> 00:00:41.380 then the string that it will print should be this. 14 00:00:41.380 --> 00:00:46.380 So three dots, 10, 17 degrees Celsius in one days. 15 00:00:46.870 --> 00:00:48.620 So that's the 17 here. 16 00:00:48.620 --> 00:00:53.620 Then again, three dots then 21 degrees Celsius in two days. 17 00:00:54.040 --> 00:00:57.690 So this 21, is this 21 and then three dots, 18 00:00:57.690 --> 00:01:00.311 23 degrees in three days. 19 00:01:00.311 --> 00:01:05.022 So in one, two and three days at 10, again, three dots. 20 00:01:05.022 --> 00:01:05.855 Okay. 21 00:01:05.855 --> 00:01:09.070 And here, you don't need to use this exact sign, 22 00:01:09.070 --> 00:01:11.100 if you can find it on your keyboard. 23 00:01:11.100 --> 00:01:13.453 I know it was a bit hard to find for me. 24 00:01:14.360 --> 00:01:17.120 So what you should do is to create a function 25 00:01:17.120 --> 00:01:22.120 called "printForecast," which takes in an array called 'arr' 26 00:01:22.300 --> 00:01:23.940 and then locks the string, 27 00:01:23.940 --> 00:01:27.630 just like this one here to the console. 28 00:01:27.630 --> 00:01:28.780 Okay. 29 00:01:28.780 --> 00:01:33.090 And call this function for these two test values. 30 00:01:33.090 --> 00:01:37.130 And to softwares, you can use the problem solving framework 31 00:01:37.130 --> 00:01:40.780 that we have just been talking about in the section. 32 00:01:40.780 --> 00:01:43.420 So try to understand the problem first 33 00:01:43.420 --> 00:01:45.410 by asking the right questions 34 00:01:45.410 --> 00:01:48.360 and then break it into sub-problems. 35 00:01:48.360 --> 00:01:51.560 And I'm not saying that this is gonna be easy. 36 00:01:51.560 --> 00:01:52.760 And for me the main goal 37 00:01:52.760 --> 00:01:55.830 is not even that you achieve the result, 38 00:01:55.830 --> 00:01:59.140 but really that you start thinking about the problem 39 00:01:59.140 --> 00:02:01.430 and that you try as good as possible 40 00:02:01.430 --> 00:02:04.170 to break it up into sub-problems. 41 00:02:04.170 --> 00:02:05.940 And of course there are many ways 42 00:02:05.940 --> 00:02:08.070 of asking the right questions 43 00:02:08.070 --> 00:02:10.980 and of breaking this up into sub problems. 44 00:02:10.980 --> 00:02:14.170 So there is no hard ways of doing this stuff. 45 00:02:14.170 --> 00:02:17.150 So just try your best to take all the time that you need. 46 00:02:17.150 --> 00:02:19.433 line:15% And I will see you here once you are ready. 47 00:02:23.290 --> 00:02:24.730 line:15% Okay. 48 00:02:24.730 --> 00:02:28.410 So let me show you how I would have done it. 49 00:02:28.410 --> 00:02:30.523 And let's just close this terminal here. 50 00:02:31.560 --> 00:02:34.150 Because remember that this live connection 51 00:02:34.150 --> 00:02:37.760 actually keeps running without the terminal opened. 52 00:02:37.760 --> 00:02:39.843 So let's just grab from up here, 53 00:02:42.860 --> 00:02:44.223 this here. 54 00:02:45.090 --> 00:02:47.620 So as you see, I'm a little bit lazy. 55 00:02:47.620 --> 00:02:49.743 I don't like to type so much, 56 00:02:50.780 --> 00:02:52.563 so I'd just keep reusing stuff. 57 00:02:53.780 --> 00:02:56.910 So we need to understand the problem first. 58 00:02:56.910 --> 00:03:01.300 So let's look at that example string here. 59 00:03:01.300 --> 00:03:03.060 And so one part of the problem 60 00:03:03.060 --> 00:03:06.030 is definitely that this array here, 61 00:03:06.030 --> 00:03:09.090 was basically broken up in three pieces 62 00:03:09.090 --> 00:03:13.053 and then the separator is these three dots. 63 00:03:13.910 --> 00:03:16.180 Let's write that here. 64 00:03:16.180 --> 00:03:20.467 Array, transformed to string, 65 00:03:23.960 --> 00:03:27.823 separated by three dots. 66 00:03:29.300 --> 00:03:33.310 Then we can also ask what these numbers here are. 67 00:03:33.310 --> 00:03:34.400 So we already know that 68 00:03:34.400 --> 00:03:37.780 these here are of course coming from the array, 69 00:03:37.780 --> 00:03:39.030 but what is this? 70 00:03:39.030 --> 00:03:42.233 So one days, two days and three days. 71 00:03:43.900 --> 00:03:48.073 So what is the X days? 72 00:03:48.980 --> 00:03:51.660 And the answer to that is basically 73 00:03:51.660 --> 00:03:55.700 it is the current index of the array plus one. 74 00:03:55.700 --> 00:03:58.700 So it would be weird to say that 17 degrees 75 00:03:58.700 --> 00:04:01.320 in zero days, because this is the forecast. 76 00:04:01.320 --> 00:04:03.810 And so this is for the next day 77 00:04:03.810 --> 00:04:06.083 and then in two days and in three days. 78 00:04:08.290 --> 00:04:12.243 So answer index plus one. 79 00:04:13.970 --> 00:04:14.803 Okay. 80 00:04:14.803 --> 00:04:17.550 So I think we understood the problem now, 81 00:04:17.550 --> 00:04:21.640 because I think that it's quite simple in this case. 82 00:04:21.640 --> 00:04:25.930 So let's now break this up into sub-problems. 83 00:04:25.930 --> 00:04:28.270 And I would say that the main problem here, 84 00:04:28.270 --> 00:04:31.403 will be to transform this array into a string. 85 00:04:36.000 --> 00:04:39.720 Because that's essentially what we will have to do. 86 00:04:39.720 --> 00:04:43.190 Also, each of these elements here will be transformed 87 00:04:43.190 --> 00:04:46.890 to a string with these degrees Celsius. 88 00:04:46.890 --> 00:04:51.890 So let's just transform each element 89 00:04:52.180 --> 00:04:55.740 to string with Celsius. 90 00:04:55.740 --> 00:04:58.350 And I don't even remember where this is, 91 00:04:58.350 --> 00:04:59.833 so I'm just copying it here. 92 00:05:04.520 --> 00:05:07.950 Then we also need to account for the current day. 93 00:05:07.950 --> 00:05:12.847 So string needs to contain day. 94 00:05:14.750 --> 00:05:19.000 And again, that is the index plus one. 95 00:05:19.000 --> 00:05:22.980 And finally, we also need to add the three dots 96 00:05:22.980 --> 00:05:27.980 between elements and start and end of string. 97 00:05:32.260 --> 00:05:35.490 So that looks like a lot of work, 98 00:05:35.490 --> 00:05:40.330 but actually it is not as hard as it looks from here. 99 00:05:40.330 --> 00:05:44.800 So let's start by creating two arrays here. 100 00:05:44.800 --> 00:05:47.900 So for test data one and two. 101 00:05:47.900 --> 00:05:50.163 Actually grab all of this in one go. 102 00:05:57.430 --> 00:05:58.393 Data two. 103 00:05:59.560 --> 00:06:00.690 All right. 104 00:06:00.690 --> 00:06:03.680 And now let's tackle these problems here. 105 00:06:03.680 --> 00:06:04.870 Okay. 106 00:06:04.870 --> 00:06:08.350 So if the string would always have the same length, 107 00:06:08.350 --> 00:06:11.210 so if it was always just be three days, 108 00:06:11.210 --> 00:06:12.570 then it would be very simple. 109 00:06:12.570 --> 00:06:16.890 We could just basically hard coat the string, right? 110 00:06:16.890 --> 00:06:20.913 We could just do something like data one, 111 00:06:21.800 --> 00:06:26.403 at position zero, and then the degrees Celsius, 112 00:06:29.960 --> 00:06:33.760 then dot, dot, dot, and so on and so forth. 113 00:06:33.760 --> 00:06:35.350 Right? 114 00:06:35.350 --> 00:06:37.443 So here I'm missing this, of course. 115 00:06:42.420 --> 00:06:45.430 So we could do this and there's still some value 116 00:06:45.430 --> 00:06:49.253 in first actually trying to write this. 117 00:06:50.620 --> 00:06:55.620 So this is how it would look like data zero and one and two, 118 00:06:56.750 --> 00:06:59.963 and let's indeed lock this to the console, 119 00:07:03.320 --> 00:07:04.620 give it a safe. 120 00:07:04.620 --> 00:07:07.270 And so actually already the string 121 00:07:07.270 --> 00:07:11.230 looks exactly what we had here, right? 122 00:07:11.230 --> 00:07:13.363 But of course, this is not the way to go. 123 00:07:14.570 --> 00:07:16.610 Because then here in data two, 124 00:07:16.610 --> 00:07:20.830 we have a longer array. 125 00:07:20.830 --> 00:07:22.760 And we want to write one function 126 00:07:22.760 --> 00:07:24.673 that works for all the arrays. 127 00:07:25.530 --> 00:07:27.303 So that print forecast. 128 00:07:28.700 --> 00:07:31.090 And so of course we need a more dynamic way 129 00:07:31.090 --> 00:07:33.000 of creating this string. 130 00:07:33.000 --> 00:07:34.260 But still, as I said, 131 00:07:34.260 --> 00:07:36.820 there is some value in having done that 132 00:07:36.820 --> 00:07:38.520 because it will help us figure out 133 00:07:38.520 --> 00:07:41.200 how we can arrive at a solution. 134 00:07:41.200 --> 00:07:44.470 So print forecast is a function 135 00:07:44.470 --> 00:07:46.460 which takes in an array 'arr' 136 00:07:49.030 --> 00:07:50.933 and now let's see what we have to do. 137 00:07:52.500 --> 00:07:54.730 So if we have an array 138 00:07:54.730 --> 00:07:57.590 and we have to do multiple operations on it, 139 00:07:57.590 --> 00:07:59.760 we will as always use a loop. 140 00:07:59.760 --> 00:08:02.143 So let's start with that baseline. 141 00:08:03.470 --> 00:08:06.730 So let i equals zero. 142 00:08:06.730 --> 00:08:09.480 And this part is not always the same, 143 00:08:09.480 --> 00:08:13.720 so i less than arr dot length 144 00:08:14.670 --> 00:08:16.623 and i plus, plus. 145 00:08:17.960 --> 00:08:20.830 Okay, but now what are we gonna do? 146 00:08:20.830 --> 00:08:25.800 So how will we basically transform the array into a string? 147 00:08:25.800 --> 00:08:27.310 And there are so many ways 148 00:08:27.310 --> 00:08:29.150 in which we could achieve this 149 00:08:29.150 --> 00:08:30.940 and actually in which we could solve 150 00:08:30.940 --> 00:08:32.470 this whole problem here, 151 00:08:32.470 --> 00:08:34.450 especially if you did some research 152 00:08:34.450 --> 00:08:36.410 to arrive at a solution here, 153 00:08:36.410 --> 00:08:39.210 but I will just go with a solution 154 00:08:39.210 --> 00:08:41.830 using the tools that we already used. 155 00:08:41.830 --> 00:08:43.330 So remember what we did, 156 00:08:43.330 --> 00:08:46.320 when we calculated the average of a number. 157 00:08:46.320 --> 00:08:48.190 We started by adding all the values 158 00:08:48.190 --> 00:08:50.850 of the array using a loop, right. 159 00:08:50.850 --> 00:08:52.330 And we kept adding them, 160 00:08:52.330 --> 00:08:56.780 to an accumulator variable that was called sum, right. 161 00:08:56.780 --> 00:09:00.150 So just to illustrate that sum started at zero, 162 00:09:00.150 --> 00:09:04.270 and let's say we had an array of two, three, four. 163 00:09:04.270 --> 00:09:05.600 And so in the first iteration, 164 00:09:05.600 --> 00:09:08.220 that sum was then updated to two. 165 00:09:08.220 --> 00:09:09.480 Then in the second iteration, 166 00:09:09.480 --> 00:09:14.080 it was updated to two plus three equals five. 167 00:09:14.080 --> 00:09:18.100 And then in the last iteration, it was updated to five, 168 00:09:18.100 --> 00:09:23.100 which was the current sum plus four equal nine. 169 00:09:23.170 --> 00:09:25.430 And so that's how we end up with the sum 170 00:09:25.430 --> 00:09:27.290 of all of these values. 171 00:09:27.290 --> 00:09:29.080 And now with the string, 172 00:09:29.080 --> 00:09:32.400 we can actually do the exact same thing. 173 00:09:32.400 --> 00:09:34.940 So here we will also have an accumulator, 174 00:09:34.940 --> 00:09:38.743 a variable essentially, which is gonna be called string. 175 00:09:39.810 --> 00:09:41.400 So let string. 176 00:09:41.400 --> 00:09:43.720 And instead of starting with zero, 177 00:09:43.720 --> 00:09:46.220 we will start with the equivalent of zero, 178 00:09:46.220 --> 00:09:49.900 but for strings, which is the empty string. 179 00:09:49.900 --> 00:09:52.430 So empty string has nothing. 180 00:09:52.430 --> 00:09:54.260 And then in each iteration, 181 00:09:54.260 --> 00:09:57.140 we will simply add to that string, 182 00:09:57.140 --> 00:10:00.020 the current value of the array. 183 00:10:00.020 --> 00:10:01.840 So let's do that. 184 00:10:01.840 --> 00:10:03.693 String equals, 185 00:10:05.660 --> 00:10:07.660 the current value of string, 186 00:10:07.660 --> 00:10:12.660 plus array at the current position. 187 00:10:13.100 --> 00:10:17.430 And also let's already add this symbol here 188 00:10:17.430 --> 00:10:21.310 and for that let's wrap this here into a template literal. 189 00:10:21.310 --> 00:10:22.720 And so I'm selecting this 190 00:10:22.720 --> 00:10:27.060 and then I can just hit the template literal diabetic once 191 00:10:27.060 --> 00:10:28.573 and it will wrap all of that. 192 00:10:30.000 --> 00:10:35.000 So then this and this, and then the degrees Celsius. 193 00:10:37.200 --> 00:10:39.760 And now all we need to do is to log that string 194 00:10:40.830 --> 00:10:41.890 to the console. 195 00:10:41.890 --> 00:10:44.223 So just as was asked. 196 00:10:45.810 --> 00:10:49.760 Which takes in and logs the string to the console. 197 00:10:49.760 --> 00:10:53.720 So we could have added that actually as one sub problem, 198 00:10:53.720 --> 00:10:56.660 even though it's a really small one. 199 00:10:56.660 --> 00:11:00.413 Log string to console. 200 00:11:01.300 --> 00:11:04.580 And so let's give it a try now. 201 00:11:04.580 --> 00:11:09.580 I'm saving and nothing happened. 202 00:11:09.680 --> 00:11:13.763 And that's because we didn't call the function. 203 00:11:14.660 --> 00:11:18.863 So let's print forecast with data one, 204 00:11:20.950 --> 00:11:23.840 and here we go. 205 00:11:23.840 --> 00:11:28.360 So 70 in degrees, 21 degrees, 23 degrees. 206 00:11:28.360 --> 00:11:32.690 And that already starts looking like what we have here. 207 00:11:32.690 --> 00:11:37.000 So essentially we already completed the most difficult part, 208 00:11:37.000 --> 00:11:40.630 so of transforming the array into a string. 209 00:11:40.630 --> 00:11:43.270 And again, this was similar to adding multiple numbers 210 00:11:43.270 --> 00:11:44.820 into one bigger number. 211 00:11:44.820 --> 00:11:47.850 Here what we did was to add multiple strings 212 00:11:47.850 --> 00:11:52.070 to a bigger string that kept growing after each iteration. 213 00:11:52.070 --> 00:11:54.353 And if you want to make sure to really understand this, 214 00:11:54.353 --> 00:11:56.680 then you can always use the debugger 215 00:11:56.680 --> 00:11:58.860 and go through this loop step by step 216 00:11:58.860 --> 00:12:02.360 and see this string variable here are growing 217 00:12:02.360 --> 00:12:04.393 as the loop goes on and on. 218 00:12:05.450 --> 00:12:09.740 So we already did this part also and this part. 219 00:12:09.740 --> 00:12:12.210 Now let's tackle this one. 220 00:12:12.210 --> 00:12:15.590 So it needs to also contain the day. 221 00:12:15.590 --> 00:12:17.823 So what does that look like? 222 00:12:19.130 --> 00:12:22.440 So 23 degrees in three days. 223 00:12:22.440 --> 00:12:25.610 So in one days, two days and three days, 224 00:12:25.610 --> 00:12:27.733 so that's not too hard. 225 00:12:30.670 --> 00:12:33.330 And now we already understood 226 00:12:33.330 --> 00:12:36.163 that this had to be the current index plus one. 227 00:12:37.050 --> 00:12:41.253 So the current index is i plus one. 228 00:12:42.280 --> 00:12:44.710 So in one days. 229 00:12:44.710 --> 00:12:47.740 So in the first iteration is gonna be zero plus one, 230 00:12:47.740 --> 00:12:52.740 then one plus one, and then two plus one, give it a safe. 231 00:12:54.140 --> 00:12:56.790 And that starting to look really close 232 00:12:56.790 --> 00:12:59.010 to what we need in the end. 233 00:12:59.010 --> 00:13:01.960 but now we are missing the separator dots. 234 00:13:01.960 --> 00:13:05.040 So how do you think we can achieve those? 235 00:13:05.040 --> 00:13:09.740 Well, in fact, these dots are simply something that repeat 236 00:13:09.740 --> 00:13:12.943 after each of these strings here, right? 237 00:13:13.860 --> 00:13:17.243 So we have this value and then dot dot dot. 238 00:13:18.630 --> 00:13:21.343 So we have to value dot, dot, dot. 239 00:13:23.130 --> 00:13:25.240 We just need one more space here, 240 00:13:25.240 --> 00:13:29.403 to create this nice separation that we have. 241 00:13:30.690 --> 00:13:34.750 And so now we're almost done, okay. 242 00:13:34.750 --> 00:13:37.410 So actually this is not correct here, 243 00:13:37.410 --> 00:13:40.010 because it's missing the, in one days in two days 244 00:13:40.010 --> 00:13:41.363 and so on and so forth. 245 00:13:42.250 --> 00:13:46.253 But let's just compare it here with the original. 246 00:13:47.820 --> 00:13:49.820 And so all that is left 247 00:13:49.820 --> 00:13:52.253 is these three dots at the beginning. 248 00:13:53.120 --> 00:13:57.930 And so, we can just add them at the end. 249 00:13:57.930 --> 00:14:00.210 So we cannot put them here, right? 250 00:14:00.210 --> 00:14:02.890 Because then we would have too many dots. 251 00:14:02.890 --> 00:14:05.250 So that's a lot of dots 252 00:14:05.250 --> 00:14:08.480 and that's not what we were looking for. 253 00:14:08.480 --> 00:14:10.710 So instead we keep it like this 254 00:14:10.710 --> 00:14:13.410 and then as we log it to the console, 255 00:14:13.410 --> 00:14:16.380 we simply add the dots here at the beginning. 256 00:14:16.380 --> 00:14:17.453 So dot, dot, dot, 257 00:14:18.560 --> 00:14:21.890 plus the string, give it a safe 258 00:14:21.890 --> 00:14:26.260 and yes, that's the solution of our problem. 259 00:14:26.260 --> 00:14:27.470 Great. 260 00:14:27.470 --> 00:14:29.770 Can just improve this here a little bit again, 261 00:14:29.770 --> 00:14:32.420 by using the plus equal operator 262 00:14:32.420 --> 00:14:34.530 and then get rid of this part, 263 00:14:34.530 --> 00:14:38.223 make it a little bit more short and more efficient maybe. 264 00:14:39.160 --> 00:14:43.220 And so, yeah, that's it. 265 00:14:43.220 --> 00:14:46.690 That's the result of this coding challenge. 266 00:14:46.690 --> 00:14:50.070 And again, you could have done it in so many different ways, 267 00:14:50.070 --> 00:14:53.690 but what I really wanted you to achieve was to understand 268 00:14:53.690 --> 00:14:57.630 the problem and to break it up into small sub-problems. 269 00:14:57.630 --> 00:15:00.040 if you did that, well, then my goal 270 00:15:00.040 --> 00:15:04.000 with this whole section I would say is achieved. 271 00:15:04.000 --> 00:15:05.960 So hope you liked this one, 272 00:15:05.960 --> 00:15:08.680 even though it was a little bit more theoretical, 273 00:15:08.680 --> 00:15:11.250 but I think it's important to also have a section 274 00:15:11.250 --> 00:15:14.420 like this in a big web development course 275 00:15:14.420 --> 00:15:15.580 because soft skills, 276 00:15:15.580 --> 00:15:18.590 like the ones that I just showed you 277 00:15:18.590 --> 00:15:21.773 are also very important for your success.