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.