WEBVTT 1 00:00:00.960 --> 00:00:03.030 So, over the last couple of videos, 2 00:00:03.030 --> 00:00:05.870 we have learned how to work with strings 3 00:00:05.870 --> 00:00:10.270 and also did a couple of exercises and one challenge. 4 00:00:10.270 --> 00:00:12.780 But many people have actually asked me 5 00:00:12.780 --> 00:00:16.220 to create even more string exercises. 6 00:00:16.220 --> 00:00:19.200 And so in this lecture, we're gonna solve basically 7 00:00:19.200 --> 00:00:23.773 one more challenge and do one more nice string exercise. 8 00:00:25.690 --> 00:00:29.500 So somewhere at the beginning of your starter files 9 00:00:29.500 --> 00:00:33.520 you will have this flights string like this. 10 00:00:33.520 --> 00:00:36.610 And so our goal is basically to transform 11 00:00:36.610 --> 00:00:38.650 this (indistinct) mess here, 12 00:00:38.650 --> 00:00:43.170 which is the string into this nicely formatted output 13 00:00:43.170 --> 00:00:46.050 which contains all the information that is 14 00:00:46.050 --> 00:00:49.650 in this string here, but then put it in a way 15 00:00:49.650 --> 00:00:52.570 that is actually legible to people. 16 00:00:52.570 --> 00:00:56.070 So let's pretend for example that we get this string here 17 00:00:56.070 --> 00:00:58.280 from some kind of web API. 18 00:00:58.280 --> 00:01:00.370 And our goal in our application 19 00:01:00.370 --> 00:01:03.273 is tend to display the data like this. 20 00:01:04.590 --> 00:01:08.720 So, let's start by taking a look at our string here 21 00:01:08.720 --> 00:01:12.630 so that we can think about how to approach this problem. 22 00:01:12.630 --> 00:01:17.523 So, we see that we have basically four lines of output here. 23 00:01:18.930 --> 00:01:22.803 And so, if we take a look at the string, we can see 24 00:01:22.803 --> 00:01:25.840 that we have here this first part, 25 00:01:25.840 --> 00:01:28.630 then we have this plus sign. 26 00:01:28.630 --> 00:01:32.330 And so you see that here's another one and another one. 27 00:01:32.330 --> 00:01:35.080 And so essentially this plus sign, 28 00:01:35.080 --> 00:01:37.240 acts as a separator between 29 00:01:37.240 --> 00:01:39.680 these four pieces of information. 30 00:01:39.680 --> 00:01:41.273 So these four flights. 31 00:01:42.150 --> 00:01:44.540 So this one here I showed you as the first one. 32 00:01:44.540 --> 00:01:46.540 Then here we have the second one, 33 00:01:46.540 --> 00:01:49.453 the third one and the fourth one. 34 00:01:52.290 --> 00:01:57.290 So let's start by dividing that up so that we can transform 35 00:01:57.290 --> 00:02:00.760 this one string into these four pieces. 36 00:02:00.760 --> 00:02:04.830 And for now I will simply lock the result of doing that 37 00:02:04.830 --> 00:02:09.790 to the console just so we can get a first look at this. 38 00:02:09.790 --> 00:02:11.330 So remember that for that, 39 00:02:11.330 --> 00:02:13.573 we are going to use the split method. 40 00:02:14.420 --> 00:02:19.000 So flights.split and then we specify 41 00:02:19.000 --> 00:02:22.520 by which character we want to split the string. 42 00:02:22.520 --> 00:02:26.473 So give it a safe, and then you see that we get this array, 43 00:02:27.310 --> 00:02:29.150 and this array contains now, 44 00:02:29.150 --> 00:02:32.853 these four pieces of information, so these four flights. 45 00:02:33.690 --> 00:02:37.730 Now, again, you see here that we have actually one line 46 00:02:37.730 --> 00:02:39.350 for each of the flights. 47 00:02:39.350 --> 00:02:42.230 So that means that we want to lock to the console 48 00:02:42.230 --> 00:02:44.500 one line for each flight. 49 00:02:44.500 --> 00:02:47.810 And so we should probably loop over this array 50 00:02:47.810 --> 00:02:50.340 and then create a string like this 51 00:02:50.340 --> 00:02:52.500 in each of the iterations. 52 00:02:52.500 --> 00:02:55.963 And so we also learned how to do that in this section, 53 00:02:57.530 --> 00:02:59.483 so we can use the for of loop. 54 00:03:00.960 --> 00:03:03.140 So let's say that each of them is a flight 55 00:03:04.950 --> 00:03:09.950 and here we can then directly use a flights.split 56 00:03:12.740 --> 00:03:14.803 which creates the array that we just saw. 57 00:03:16.100 --> 00:03:20.030 And so again to start, let's just log each of the flights 58 00:03:20.030 --> 00:03:22.470 here to the console in each iteration 59 00:03:22.470 --> 00:03:24.073 and we can then get rid of this, 60 00:03:26.370 --> 00:03:30.040 and here we are trying to access that flight variable 61 00:03:30.040 --> 00:03:32.060 but of course it is flights. 62 00:03:32.060 --> 00:03:35.810 So this string here, and so now indeed we get 63 00:03:35.810 --> 00:03:39.630 our four strings here locked separately to the console. 64 00:03:39.630 --> 00:03:42.120 And now it's time to actually build 65 00:03:42.120 --> 00:03:44.990 each of these nicely formatted string 66 00:03:44.990 --> 00:03:48.040 out of his mess that we get here. 67 00:03:48.040 --> 00:03:51.150 So again we can notice that we have an element 68 00:03:51.150 --> 00:03:55.200 which basically splits or separates different pieces 69 00:03:55.200 --> 00:03:58.210 of the information inside of the string. 70 00:03:58.210 --> 00:04:00.950 So here we see, we have a delayed departure 71 00:04:00.950 --> 00:04:05.950 and here we have this airport code, here another one, 72 00:04:06.900 --> 00:04:09.210 and then here at the time of arrival 73 00:04:09.210 --> 00:04:11.910 which is exactly what we have in the string. 74 00:04:11.910 --> 00:04:16.820 So, here we have the late departure, the airport code 75 00:04:16.820 --> 00:04:20.573 for Farrow, and then the airport code for Berlin. 76 00:04:21.560 --> 00:04:24.870 And so therefore let's extract that information 77 00:04:24.870 --> 00:04:29.300 from the string again, and so again, 78 00:04:29.300 --> 00:04:33.440 I will start by splitting this variable 79 00:04:33.440 --> 00:04:37.170 but this time using the semi-colon separator. 80 00:04:37.170 --> 00:04:41.670 So exactly this, so you'll see it already worked. 81 00:04:41.670 --> 00:04:44.560 And now all we need to do is to get this data 82 00:04:44.560 --> 00:04:48.260 out of these arrays, then format each of these 83 00:04:48.260 --> 00:04:51.700 four pieces here a little bit and then assemble each of them 84 00:04:51.700 --> 00:04:53.283 into the final string. 85 00:04:55.230 --> 00:04:58.540 So, we can do this in many different ways, 86 00:04:58.540 --> 00:05:01.800 but what am gonna do, is to use destructuring 87 00:05:01.800 --> 00:05:04.823 to take these four pieces out of the array. 88 00:05:06.240 --> 00:05:10.490 So, remember destructuring, we use the erase syntax here 89 00:05:10.490 --> 00:05:12.960 but to specify variables. 90 00:05:12.960 --> 00:05:16.710 So the first variable here, let's call it the type 91 00:05:16.710 --> 00:05:19.943 because we can have departures and arrivals. 92 00:05:21.300 --> 00:05:25.500 So that's the type the second one is the from, 93 00:05:25.500 --> 00:05:28.740 so you see here that the first airport code is the from 94 00:05:28.740 --> 00:05:31.230 and the second is the to. 95 00:05:31.230 --> 00:05:33.683 So from FAO to TXL. 96 00:05:34.890 --> 00:05:39.083 So the third one is to, and then the last one is the time. 97 00:05:40.150 --> 00:05:43.220 So 1125, which we will then transform here 98 00:05:43.220 --> 00:05:46.283 into 11H 25 like this. 99 00:05:52.950 --> 00:05:55.880 So now of course we don't have the output anymore 100 00:05:55.880 --> 00:05:59.753 but anyway, let's now start creating or output string here. 101 00:06:01.620 --> 00:06:03.903 So I'm gonna call that output, 102 00:06:04.950 --> 00:06:08.140 and of course, we're going to use a template literal 103 00:06:08.140 --> 00:06:11.470 and I will start by simply put these for variables 104 00:06:11.470 --> 00:06:13.740 that we just created in here, 105 00:06:13.740 --> 00:06:16.843 and so then we can format each of them individually. 106 00:06:18.010 --> 00:06:22.913 So that's type, from, to, and then the time. 107 00:06:25.800 --> 00:06:29.050 And we can already put that inside parenthesis, 108 00:06:29.050 --> 00:06:32.840 just as we have a it here, and then to finish 109 00:06:32.840 --> 00:06:37.813 we will just lock that nicely to the console. 110 00:06:39.020 --> 00:06:42.733 And so, now indeed, we have four strings right here. 111 00:06:44.440 --> 00:06:48.140 So let's now individually format each of these four pieces. 112 00:06:48.140 --> 00:06:50.150 And I'm gonna start here with the time 113 00:06:50.150 --> 00:06:52.260 which is the easiest one. 114 00:06:52.260 --> 00:06:57.260 So here we just want to replace the colon with an H. 115 00:07:01.420 --> 00:07:04.290 All right, that worked beautifully. 116 00:07:04.290 --> 00:07:07.030 And now, let's go to the type. 117 00:07:07.030 --> 00:07:11.240 So you see that in a type, we always have these underscores 118 00:07:11.240 --> 00:07:14.070 which of course we want to get rid of. 119 00:07:14.070 --> 00:07:16.880 So here it should just say delayed departure 120 00:07:16.880 --> 00:07:19.770 with a space instead of the underscore 121 00:07:19.770 --> 00:07:22.230 and here in the arrival we basically 122 00:07:22.230 --> 00:07:24.823 also want to get rid of the underscore. 123 00:07:25.760 --> 00:07:29.130 So essentially, we're just gonna replace the underscore 124 00:07:29.130 --> 00:07:30.963 with an empty space. 125 00:07:32.930 --> 00:07:37.930 So here we can now actually use that years 2021 method 126 00:07:38.160 --> 00:07:42.180 that I mentioned before, but which didn't work back then, 127 00:07:42.180 --> 00:07:45.560 but now as I'm recording this video, replace all, 128 00:07:45.560 --> 00:07:48.140 actually already works in Google Chrome. 129 00:07:48.140 --> 00:07:51.463 And so, here we can now use, replace all. 130 00:07:52.660 --> 00:07:56.830 Alright, so again, this is an ES 2021 method 131 00:07:56.830 --> 00:07:59.140 which is brand new in JavaScript 132 00:07:59.140 --> 00:08:01.800 and which allows us to replace all incidents 133 00:08:01.800 --> 00:08:04.630 of a certain string at once. 134 00:08:04.630 --> 00:08:08.350 And so again, we're gonna replace the underscore 135 00:08:08.350 --> 00:08:10.313 with a space. 136 00:08:13.150 --> 00:08:14.620 That's nice. 137 00:08:14.620 --> 00:08:17.240 Now we see here that we have this empty space 138 00:08:17.240 --> 00:08:19.640 at the beginning of each string 139 00:08:19.640 --> 00:08:21.740 but we gonna take care of that later 140 00:08:21.740 --> 00:08:24.420 because we will have to add some strings here 141 00:08:24.420 --> 00:08:27.760 or actually some spaces anyway 142 00:08:27.760 --> 00:08:30.363 in order to create this format here. 143 00:08:31.470 --> 00:08:34.603 So it this and all of these spaces here. 144 00:08:35.690 --> 00:08:39.400 So don't worry about that for now, instead, 145 00:08:39.400 --> 00:08:43.950 what we're gonna do now is to add these red dots here. 146 00:08:43.950 --> 00:08:47.870 So these are actually emojis and we will add this emoji 147 00:08:47.870 --> 00:08:52.360 whenever the departure or the arrival is delayed. 148 00:08:52.360 --> 00:08:56.460 So basically to symbol that there is a delay. 149 00:08:56.460 --> 00:09:00.873 So this applies to both departures and arrivals like this. 150 00:09:02.895 --> 00:09:07.895 So basically we want to add this emoji whenever the type, 151 00:09:08.270 --> 00:09:12.760 so which is remember all of this, so this here. 152 00:09:12.760 --> 00:09:16.890 So whenever this starts with the string delayed, 153 00:09:16.890 --> 00:09:19.293 then we want to add this emoji here. 154 00:09:21.350 --> 00:09:23.200 So, Let's do that. 155 00:09:23.200 --> 00:09:27.570 And we actually have a nice and easy string method for that 156 00:09:27.570 --> 00:09:32.570 which we already talked about, which is the starts with. 157 00:09:34.260 --> 00:09:37.920 So starts with, and so here we're asking 158 00:09:37.920 --> 00:09:40.763 if the string starts with delayed, 159 00:09:41.940 --> 00:09:45.400 so actually like this, and remember 160 00:09:45.400 --> 00:09:48.170 that this is going to return a bullion. 161 00:09:48.170 --> 00:09:51.780 And so this is perfect to then use a conditional 162 00:09:51.780 --> 00:09:54.830 like the turnery operator to return something 163 00:09:54.830 --> 00:09:55.780 in case this is to. 164 00:09:57.920 --> 00:10:02.170 So, in case it is to, here we want to add this emoji 165 00:10:03.160 --> 00:10:08.160 so we can just come here and copy it, paste it here. 166 00:10:09.670 --> 00:10:12.993 And if not, then simply add nothing. 167 00:10:16.045 --> 00:10:18.540 Well, that didn't really work. 168 00:10:18.540 --> 00:10:23.430 All it did was to add like another space here 169 00:10:23.430 --> 00:10:25.763 which is this one here. 170 00:10:26.640 --> 00:10:28.870 But I think I know what the problem is, 171 00:10:28.870 --> 00:10:31.970 which, lemme actually show this to you 172 00:10:31.970 --> 00:10:34.713 by logging here again, the type. 173 00:10:37.450 --> 00:10:40.100 So we are looking if the string, 174 00:10:40.100 --> 00:10:42.780 so if the type string starts with delayed 175 00:10:42.780 --> 00:10:44.580 but in fact it does start 176 00:10:44.580 --> 00:10:47.453 with _delayed at this point. 177 00:10:49.070 --> 00:10:52.370 And so therefore we need to add that here 178 00:10:52.370 --> 00:10:54.370 to our test as well. 179 00:10:54.370 --> 00:10:57.363 And then it works just like expected. 180 00:11:00.932 --> 00:11:03.030 So let's take away that log here 181 00:11:03.030 --> 00:11:05.373 and let's actually take away that space. 182 00:11:06.690 --> 00:11:11.293 And so now we have a more evenly spaced text here. 183 00:11:12.170 --> 00:11:15.640 Great, and actually we're almost done here. 184 00:11:15.640 --> 00:11:20.570 All we have to do is to now format these airport codes. 185 00:11:20.570 --> 00:11:24.870 Now we have all of these numbers here and here as well 186 00:11:24.870 --> 00:11:27.940 but it don't really serve any purpose here 187 00:11:27.940 --> 00:11:29.423 for formatting the string. 188 00:11:30.270 --> 00:11:33.540 So all we want is the three letters here, 189 00:11:33.540 --> 00:11:36.670 which any airport code is made of. 190 00:11:36.670 --> 00:11:38.830 So it's always just three letters 191 00:11:38.830 --> 00:11:42.693 but the number afterwards, we don't care about it at all. 192 00:11:43.690 --> 00:11:47.000 So basically what we will do to this string 193 00:11:47.000 --> 00:11:50.670 and also this here, is to take the first three letters 194 00:11:50.670 --> 00:11:53.920 and then convert them to uppercase. 195 00:11:53.920 --> 00:11:55.893 And then that's actually it. 196 00:11:57.810 --> 00:12:00.053 So, let's do what I just said. 197 00:12:00.950 --> 00:12:05.950 So we use the slice method to take the first three elements. 198 00:12:06.540 --> 00:12:09.630 So from position zero, all the way to three, 199 00:12:09.630 --> 00:12:11.710 where three is not included, 200 00:12:11.710 --> 00:12:14.730 so we're taking zero one and two 201 00:12:14.730 --> 00:12:19.560 and then we can simply chain the two upper case method 202 00:12:19.560 --> 00:12:22.163 onto that, and there we go. 203 00:12:23.260 --> 00:12:26.180 So that's four now and now we can copy 204 00:12:26.180 --> 00:12:29.410 the same thing from here to here. 205 00:12:29.410 --> 00:12:31.021 But let's actually not do that, 206 00:12:31.021 --> 00:12:36.021 but I will create a small refactor outside here. 207 00:12:37.640 --> 00:12:42.167 So basically create just a small function called getCode 208 00:12:43.390 --> 00:12:48.133 which gets a string, and then from that string, 209 00:12:49.740 --> 00:12:50.823 it does this. 210 00:12:52.450 --> 00:12:57.450 So let's cut that, and that's it. 211 00:12:57.750 --> 00:13:01.830 So it's just a nice and simple arrow function 212 00:13:01.830 --> 00:13:04.020 just for the small use case. 213 00:13:04.020 --> 00:13:06.840 And notice how I defined this variable here 214 00:13:06.840 --> 00:13:09.790 outside of the loop, because otherwise, 215 00:13:09.790 --> 00:13:11.360 this function here is gonna be defined 216 00:13:11.360 --> 00:13:14.363 over and over again which is not necessary. 217 00:13:15.550 --> 00:13:19.270 So now we can just rep this into parenthesis 218 00:13:19.270 --> 00:13:21.593 and pass it into getCode, 219 00:13:22.630 --> 00:13:25.070 and so that will then take this string, 220 00:13:25.070 --> 00:13:27.050 pass it into this function, 221 00:13:27.050 --> 00:13:30.380 which will then do the formatting that we wanted 222 00:13:30.380 --> 00:13:35.020 and we'll return it and let's do the same thing 223 00:13:35.920 --> 00:13:40.920 to the destination and, that's it. 224 00:13:43.490 --> 00:13:46.330 So, we are almost done now. 225 00:13:46.330 --> 00:13:48.660 So a string is nicely formatted. 226 00:13:48.660 --> 00:13:52.823 It looks just or at least almost like these ones here. 227 00:13:53.930 --> 00:13:55.740 Now, the only thing that's different, 228 00:13:55.740 --> 00:13:58.260 is that here they are basically all aligned 229 00:13:58.260 --> 00:14:00.705 to the right like this 230 00:14:00.705 --> 00:14:04.300 so that we have these airport codes here 231 00:14:04.300 --> 00:14:06.890 and the times all in the same position 232 00:14:06.890 --> 00:14:10.690 which makes the strings a lot easier to read. 233 00:14:10.690 --> 00:14:13.053 And do you remember how we can do that? 234 00:14:14.820 --> 00:14:18.410 So for that we can use the padStart method 235 00:14:18.410 --> 00:14:21.720 that I also introduced some time ago. 236 00:14:21.720 --> 00:14:24.600 So, we can do that on the entire string 237 00:14:24.600 --> 00:14:26.313 which ends right here. 238 00:14:27.690 --> 00:14:31.410 So the output string starts here and ends here. 239 00:14:31.410 --> 00:14:34.120 And we now want to apply the padStart method 240 00:14:34.120 --> 00:14:35.820 on the entire string 241 00:14:35.820 --> 00:14:38.220 so we can change that right here. 242 00:14:38.220 --> 00:14:41.810 We could also put it here like this, 243 00:14:41.810 --> 00:14:44.680 but this formatting should actually be a part 244 00:14:44.680 --> 00:14:46.390 of the string itself. 245 00:14:46.390 --> 00:14:50.423 And so let's actually edit right here. 246 00:14:51.600 --> 00:14:56.140 So let's try 50 here and remember that by default, 247 00:14:56.140 --> 00:14:59.390 the default character that will pet the string 248 00:14:59.390 --> 00:15:00.683 is an empty space. 249 00:15:01.520 --> 00:15:05.730 So if we gift as a safe now, then you see that indeed, 250 00:15:05.730 --> 00:15:08.410 everything is now actually aligned here. 251 00:15:08.410 --> 00:15:12.653 But 50 is apparently a bit too much, let's try 20, 252 00:15:13.580 --> 00:15:15.603 which is not really enough. 253 00:15:17.060 --> 00:15:22.060 Let's try 40 here maybe or 30, just as be a little bit 254 00:15:23.090 --> 00:15:26.263 like trial and error until it looks nice. 255 00:15:28.370 --> 00:15:31.680 But 36, it is. 256 00:15:31.680 --> 00:15:35.360 So now everything is nicely aligned, and all these strings 257 00:15:35.360 --> 00:15:38.470 are now exactly 36 characters long, 258 00:15:38.470 --> 00:15:41.333 which is exactly what this padStart does. 259 00:15:42.750 --> 00:15:46.180 So to makes sure that the string has exactly this length, 260 00:15:46.180 --> 00:15:49.610 and if it doesn't, then it keeps adding the string 261 00:15:49.610 --> 00:15:51.803 or so the character that we define here. 262 00:15:52.790 --> 00:15:56.230 So we could also do like this, and then it would add 263 00:15:57.810 --> 00:16:01.227 this character here, but we simply want a space. 264 00:16:01.227 --> 00:16:03.610 And so we can just get rid of that. 265 00:16:03.610 --> 00:16:06.823 And then automatically it adds this empty space. 266 00:16:08.420 --> 00:16:12.560 And that's actually it, that solves the problem 267 00:16:12.560 --> 00:16:14.980 that we set out to solve in the beginning. 268 00:16:14.980 --> 00:16:18.990 And on the way we practiced many of these methods 269 00:16:18.990 --> 00:16:20.520 that I showed you before. 270 00:16:20.520 --> 00:16:24.210 And we also use the IES 2021 method here, 271 00:16:24.210 --> 00:16:27.050 replace all for the first time. 272 00:16:27.050 --> 00:16:30.070 So I hope that you found this exercise useful 273 00:16:30.070 --> 00:16:32.530 and that you're now even more comfortable 274 00:16:32.530 --> 00:16:34.403 working with strings on your own.