WEBVTT 1 00:00:01.360 --> 00:00:03.850 So after loading the recipe data 2 00:00:03.850 --> 00:00:08.850 from or API, let's now render that data in our application. 3 00:00:10.310 --> 00:00:11.910 And for that, let's go 4 00:00:11.910 --> 00:00:16.183 to our HTML file to basically get the template from there. 5 00:00:17.460 --> 00:00:20.020 Let's close down this terminal 6 00:00:20.020 --> 00:00:22.223 which will keep working in the background. 7 00:00:23.910 --> 00:00:28.363 And so here is the results part, the pagination. 8 00:00:30.610 --> 00:00:33.890 And then here we have the recipe class. 9 00:00:33.890 --> 00:00:35.660 So the recipe class 10 00:00:35.660 --> 00:00:38.990 is basically this whole container. 11 00:00:38.990 --> 00:00:40.290 So here in this case, 12 00:00:40.290 --> 00:00:42.760 it's this whole gray container 13 00:00:42.760 --> 00:00:45.610 which is the one that will contain 14 00:00:45.610 --> 00:00:47.123 the rendered recipe. 15 00:00:48.280 --> 00:00:49.340 Okay. 16 00:00:49.340 --> 00:00:52.363 Then right now it has that message. 17 00:00:53.240 --> 00:00:55.730 So again, it is this message here 18 00:00:55.730 --> 00:00:58.163 that is already rendered there at this point. 19 00:00:59.240 --> 00:01:02.210 Then here's the code for a loading spinner 20 00:01:02.210 --> 00:01:03.920 for an error 21 00:01:03.920 --> 00:01:06.963 and then here, actually for the recipe itself. 22 00:01:08.320 --> 00:01:11.260 So here we have that, not that image, 23 00:01:11.260 --> 00:01:15.250 and then all of the information about the recipe itself. 24 00:01:15.250 --> 00:01:18.430 And so it's all of this code that we need now. 25 00:01:18.430 --> 00:01:19.410 So let's grab 26 00:01:19.410 --> 00:01:21.950 all of this commented out code 27 00:01:21.950 --> 00:01:23.540 and copy it 28 00:01:23.540 --> 00:01:25.453 and paste it here into this function. 29 00:01:27.590 --> 00:01:29.763 So let's add a comment here. 30 00:01:30.950 --> 00:01:33.230 So loading recipe 31 00:01:34.743 --> 00:01:37.783 and then afterwards as step number two, 32 00:01:38.770 --> 00:01:41.053 rendering the recipe. 33 00:01:41.960 --> 00:01:44.170 And for now here we are doing this 34 00:01:44.170 --> 00:01:45.940 like really big function. 35 00:01:45.940 --> 00:01:46.773 But of course, 36 00:01:46.773 --> 00:01:49.380 once we start thinking about the architecture 37 00:01:49.380 --> 00:01:51.430 we will then break this up 38 00:01:51.430 --> 00:01:54.510 into functions and modules 39 00:01:54.510 --> 00:01:57.003 and classes and so on and so forth. 40 00:01:59.980 --> 00:02:03.220 And so, as always doing a big 41 00:02:03.220 --> 00:02:05.853 template literal here, just as always, 42 00:02:07.916 --> 00:02:09.340 so that we can 43 00:02:09.340 --> 00:02:11.360 and then replace all the data here 44 00:02:11.360 --> 00:02:12.980 that we need. 45 00:02:12.980 --> 00:02:15.173 Just fixing the indentation here now. 46 00:02:16.340 --> 00:02:20.340 And so now let's take all the data that we need. 47 00:02:20.340 --> 00:02:23.650 And the first one here is the image. 48 00:02:23.650 --> 00:02:26.850 So let's replace this string here 49 00:02:26.850 --> 00:02:31.850 with recipe.image. 50 00:02:32.500 --> 00:02:34.580 Just like we specified here. 51 00:02:34.580 --> 00:02:36.250 And so this image property 52 00:02:36.250 --> 00:02:38.120 is basically a URL, 53 00:02:38.120 --> 00:02:40.770 which points to the location of the image 54 00:02:40.770 --> 00:02:43.360 on the Forkify API server. 55 00:02:43.360 --> 00:02:46.563 Then here we have the recipe title. 56 00:02:48.340 --> 00:02:49.403 So this one here, 57 00:02:52.807 --> 00:02:53.713 .title. 58 00:02:54.650 --> 00:02:57.610 And actually we also have that title here 59 00:02:57.610 --> 00:02:59.993 as an alt text of the image. 60 00:03:01.990 --> 00:03:02.823 Okay. 61 00:03:02.823 --> 00:03:04.263 Then here we have the clock. 62 00:03:05.110 --> 00:03:08.773 So this 45 here is the cooking time. 63 00:03:10.770 --> 00:03:11.800 So recipe 64 00:03:13.120 --> 00:03:16.136 and missing the block here, 65 00:03:16.136 --> 00:03:18.690 .cookingTime. 66 00:03:18.690 --> 00:03:21.370 Then down here, we have servings. 67 00:03:21.370 --> 00:03:22.943 And so that's this number here. 68 00:03:23.840 --> 00:03:26.670 So number four will now be replaced 69 00:03:26.670 --> 00:03:29.523 with the data coming from the recipe object, 70 00:03:30.760 --> 00:03:32.690 recipe.servings 71 00:03:34.600 --> 00:03:36.673 and let's keep going. 72 00:03:38.070 --> 00:03:41.120 So down here, we have the ingredients. 73 00:03:41.120 --> 00:03:42.470 So for each ingredient, 74 00:03:42.470 --> 00:03:46.420 there will be one list element of this. 75 00:03:46.420 --> 00:03:47.280 So this example, 76 00:03:47.280 --> 00:03:49.720 right now we have two list elements 77 00:03:49.720 --> 00:03:52.040 and one for each ingredient. 78 00:03:52.040 --> 00:03:54.580 But let's actually keep that for later. 79 00:03:54.580 --> 00:03:57.670 And for now keep filling the rest 80 00:03:57.670 --> 00:03:59.760 of the data here. 81 00:03:59.760 --> 00:04:01.630 So this is the next piece of data, 82 00:04:01.630 --> 00:04:03.480 which is the publisher. 83 00:04:03.480 --> 00:04:05.823 So here it says recipe publisher. 84 00:04:06.950 --> 00:04:08.970 And so let's change that 85 00:04:08.970 --> 00:04:12.863 to recipe.publisher. 86 00:04:14.440 --> 00:04:16.447 Then here we have the source URL. 87 00:04:18.790 --> 00:04:20.690 So let's take a look at that, 88 00:04:20.690 --> 00:04:22.683 maybe here to make more sense of this. 89 00:04:23.880 --> 00:04:26.793 So we used most of this data here already. 90 00:04:28.960 --> 00:04:32.470 So here is the URL to the recipe itself, 91 00:04:32.470 --> 00:04:34.340 where it actually comes from. 92 00:04:34.340 --> 00:04:36.580 And then about the ingredients, 93 00:04:36.580 --> 00:04:38.840 as you see, it is one array 94 00:04:38.840 --> 00:04:42.950 and each position of the array contains one object 95 00:04:42.950 --> 00:04:44.630 which contains the quantity, 96 00:04:44.630 --> 00:04:49.490 the unit and the description of each ingredient. 97 00:04:49.490 --> 00:04:52.260 And so we will have to basically loop 98 00:04:52.260 --> 00:04:53.550 over this array 99 00:04:53.550 --> 00:04:55.790 and then use all of this data 100 00:04:55.790 --> 00:04:59.620 to create one list element for each of them. 101 00:04:59.620 --> 00:05:00.570 Okay. 102 00:05:00.570 --> 00:05:02.040 But for now, let's go back 103 00:05:02.040 --> 00:05:04.500 and finish the data here. 104 00:05:04.500 --> 00:05:05.333 And in this case, 105 00:05:05.333 --> 00:05:07.110 replacing this URL 106 00:05:07.110 --> 00:05:09.853 by the one coming from the object. 107 00:05:10.870 --> 00:05:12.090 So that's the recipe 108 00:05:13.440 --> 00:05:16.110 that source URL. 109 00:05:16.110 --> 00:05:19.330 And so except for the ingredients, 110 00:05:19.330 --> 00:05:20.433 that's actually it. 111 00:05:21.520 --> 00:05:26.100 So yeah, before we can check out the result, 112 00:05:26.100 --> 00:05:27.410 of course now we need 113 00:05:27.410 --> 00:05:31.330 to actually insert this HTML into our dump. 114 00:05:31.330 --> 00:05:35.640 So for that, we can use the insert adjacent HTML method 115 00:05:35.640 --> 00:05:36.640 and we need to do that 116 00:05:36.640 --> 00:05:38.320 on the parent element, 117 00:05:38.320 --> 00:05:39.290 remember. 118 00:05:39.290 --> 00:05:41.423 And I already selected that up here. 119 00:05:42.280 --> 00:05:43.880 So remember, that's the element 120 00:05:43.880 --> 00:05:45.803 with the class of recipe. 121 00:05:47.070 --> 00:05:50.773 So just to remember, it is this diff element. 122 00:05:52.090 --> 00:05:54.750 So that is called a recipe container. 123 00:05:54.750 --> 00:05:56.660 And so that's where we want to attach 124 00:05:58.220 --> 00:06:00.163 this HTML markup. 125 00:06:01.790 --> 00:06:05.127 So recipeContainer.insertAdjacentHTML, 126 00:06:09.668 --> 00:06:11.900 and let's do afterbegin. 127 00:06:11.900 --> 00:06:15.740 So basically as a first child 128 00:06:16.710 --> 00:06:18.520 and then the markup variable 129 00:06:18.520 --> 00:06:20.320 that we just created 130 00:06:20.320 --> 00:06:22.040 and that should be it. 131 00:06:22.040 --> 00:06:24.590 So this should now render the recipe 132 00:06:24.590 --> 00:06:26.300 in the user interface 133 00:06:26.300 --> 00:06:28.400 except for the ingredients. 134 00:06:28.400 --> 00:06:31.673 And indeed, that's looking really nice already. 135 00:06:32.690 --> 00:06:33.523 Right? 136 00:06:34.380 --> 00:06:37.110 So the ingredients are still the old ones 137 00:06:37.110 --> 00:06:39.540 but the rest is really nice, 138 00:06:39.540 --> 00:06:41.910 except for that we have still 139 00:06:41.910 --> 00:06:43.930 this message here from the beginning 140 00:06:43.930 --> 00:06:47.253 and also that we are missing all the icons. 141 00:06:48.420 --> 00:06:50.923 So you see there are no icons to be found here. 142 00:06:51.940 --> 00:06:54.010 In the real one, of course, 143 00:06:54.010 --> 00:06:56.500 there are icons all over the place. 144 00:06:56.500 --> 00:06:58.680 So we have three problems here. 145 00:06:58.680 --> 00:07:01.010 We have this message showing 146 00:07:01.010 --> 00:07:02.440 we have the ingredients 147 00:07:02.440 --> 00:07:04.340 and we have the icons. 148 00:07:04.340 --> 00:07:06.280 And let's start with this message 149 00:07:06.280 --> 00:07:07.713 and then the ingredients. 150 00:07:09.390 --> 00:07:13.583 So before we insert any new markup 151 00:07:13.583 --> 00:07:14.558 we need to get rid 152 00:07:14.558 --> 00:07:17.602 of the markup that is already there. 153 00:07:17.602 --> 00:07:22.586 So let's simply do recipeContainer.innerHTML 154 00:07:22.586 --> 00:07:25.068 and set it to nothing. 155 00:07:25.068 --> 00:07:27.376 So emptying it out. 156 00:07:27.376 --> 00:07:30.513 And so you see now it is gone. 157 00:07:30.513 --> 00:07:31.868 All right. 158 00:07:31.868 --> 00:07:34.842 So let's now worry about the ingredients. 159 00:07:34.842 --> 00:07:37.250 And again, we will need to loop 160 00:07:37.250 --> 00:07:39.080 over the ingredients array. 161 00:07:39.080 --> 00:07:40.350 And for each of them, 162 00:07:40.350 --> 00:07:44.550 we should then create this kind of markup here. 163 00:07:44.550 --> 00:07:46.453 So how should we do that? 164 00:07:47.570 --> 00:07:51.350 Well, basically exactly what I just said. 165 00:07:51.350 --> 00:07:56.260 So we take recipe.ingredients 166 00:07:56.260 --> 00:07:59.820 and then we loop over that using some array method. 167 00:07:59.820 --> 00:08:03.340 But what array method should we actually use? 168 00:08:03.340 --> 00:08:06.180 Well, remember that in the end 169 00:08:06.180 --> 00:08:07.960 the expression that we need here 170 00:08:07.960 --> 00:08:11.010 needs to return a string of HTML. 171 00:08:11.010 --> 00:08:12.030 And so that means 172 00:08:12.030 --> 00:08:15.620 that or array method needs to return something. 173 00:08:15.620 --> 00:08:18.720 So foreach is not the way to go here. 174 00:08:18.720 --> 00:08:20.990 So not foreach. 175 00:08:20.990 --> 00:08:21.823 Right? 176 00:08:21.823 --> 00:08:23.963 But instead we are going to use map. 177 00:08:24.970 --> 00:08:26.920 So map returns a new array 178 00:08:26.920 --> 00:08:28.570 with the same length. 179 00:08:28.570 --> 00:08:30.900 And so that array, we will then in the end, 180 00:08:30.900 --> 00:08:33.430 be able to simply join. 181 00:08:33.430 --> 00:08:34.720 And so now we can loop 182 00:08:34.720 --> 00:08:35.840 over the array 183 00:08:35.840 --> 00:08:38.210 by specifying a callback function. 184 00:08:38.210 --> 00:08:42.180 So each element is going to be called ingredient 185 00:08:42.180 --> 00:08:44.253 and then here we can do something. 186 00:08:47.640 --> 00:08:50.013 So let's simply replace a string here. 187 00:08:51.560 --> 00:08:53.200 Right? 188 00:08:53.200 --> 00:08:54.540 So taking this 189 00:08:56.610 --> 00:08:59.923 and put it right here. 190 00:09:00.850 --> 00:09:02.350 And then of course we don't need 191 00:09:02.350 --> 00:09:03.403 this one anymore. 192 00:09:04.776 --> 00:09:07.026 (clicking) 193 00:09:08.700 --> 00:09:09.593 Okay. 194 00:09:10.480 --> 00:09:12.633 Then here we have some kind of error, 195 00:09:16.220 --> 00:09:17.390 but nevermind. 196 00:09:17.390 --> 00:09:20.273 Let's think about the data here first. 197 00:09:21.400 --> 00:09:22.360 So let's take a look 198 00:09:22.360 --> 00:09:24.003 at the data actually again. 199 00:09:26.330 --> 00:09:28.233 So at the array. 200 00:09:30.500 --> 00:09:32.760 So each array element is an object 201 00:09:32.760 --> 00:09:34.240 which has quantity, 202 00:09:34.240 --> 00:09:36.213 unit and description. 203 00:09:37.150 --> 00:09:37.983 Okay. 204 00:09:38.940 --> 00:09:42.640 So this ingredient is now that object. 205 00:09:42.640 --> 00:09:43.940 And so here we can say 206 00:09:46.570 --> 00:09:51.480 ingredient.quantity 207 00:09:52.610 --> 00:09:54.203 then here the unit, 208 00:09:55.660 --> 00:09:57.800 the ingredient.unit 209 00:09:58.850 --> 00:10:00.420 and then finally here 210 00:10:00.420 --> 00:10:02.180 instead of pasta we want 211 00:10:03.090 --> 00:10:07.063 the ingredient.description. 212 00:10:08.400 --> 00:10:09.280 And so now here 213 00:10:09.280 --> 00:10:11.010 we will have an array 214 00:10:11.010 --> 00:10:12.400 in which each element 215 00:10:12.400 --> 00:10:15.040 will contain this markup corresponding 216 00:10:15.040 --> 00:10:16.420 to the ingredient. 217 00:10:16.420 --> 00:10:17.970 And so now all we need to do 218 00:10:17.970 --> 00:10:20.410 is to transform that array of strings 219 00:10:20.410 --> 00:10:22.063 into one big string. 220 00:10:23.270 --> 00:10:26.150 So we can take the result of this map, 221 00:10:26.150 --> 00:10:27.370 which is that array 222 00:10:28.350 --> 00:10:31.990 and call join on it like this. 223 00:10:31.990 --> 00:10:35.140 And so now the result of this entire expression 224 00:10:35.140 --> 00:10:36.160 is going to be 225 00:10:36.160 --> 00:10:38.963 a big string containing all the ingredients. 226 00:10:40.170 --> 00:10:41.863 So if we give it a save now, 227 00:10:43.250 --> 00:10:46.503 then indeed here we have our eight ingredients. 228 00:10:48.000 --> 00:10:49.410 Okay. 229 00:10:49.410 --> 00:10:52.170 So that's pepperoni pizza burgers. 230 00:10:52.170 --> 00:10:53.600 And now, 231 00:10:53.600 --> 00:10:55.390 remember we have a second one here, 232 00:10:55.390 --> 00:10:57.483 so that's, switched them out again. 233 00:11:00.490 --> 00:11:01.930 Give it a save. 234 00:11:01.930 --> 00:11:02.763 And now we got, 235 00:11:03.690 --> 00:11:05.870 well, this pizza here. 236 00:11:05.870 --> 00:11:08.363 And so indeed it now has different ingredients, 237 00:11:09.650 --> 00:11:11.570 different publisher 238 00:11:11.570 --> 00:11:13.950 and everything is different. 239 00:11:13.950 --> 00:11:14.910 Great. 240 00:11:14.910 --> 00:11:17.100 But now there is one thing missing, 241 00:11:17.100 --> 00:11:19.083 which is the icons. 242 00:11:19.990 --> 00:11:22.350 So let's see why that is. 243 00:11:22.350 --> 00:11:24.490 Well, remember that the page that 244 00:11:24.490 --> 00:11:27.010 is displayed here in the browser, 245 00:11:27.010 --> 00:11:31.720 is this HTML here from the disc folder. 246 00:11:31.720 --> 00:11:32.920 Right? 247 00:11:32.920 --> 00:11:35.410 And so remember that all the images 248 00:11:35.410 --> 00:11:37.140 and really all the assets 249 00:11:37.140 --> 00:11:39.610 are now coming from this folder. 250 00:11:39.610 --> 00:11:41.920 And that includes the icons. 251 00:11:41.920 --> 00:11:44.320 So our icons are always coming 252 00:11:44.320 --> 00:11:47.340 from this icon.svg file. 253 00:11:47.340 --> 00:11:49.500 But now the icons are actually coming 254 00:11:49.500 --> 00:11:52.323 from icons.all of this here. 255 00:11:53.380 --> 00:11:54.600 And you can see that 256 00:11:54.600 --> 00:11:55.750 for example, 257 00:11:55.750 --> 00:11:57.970 right here in the search bar. 258 00:11:57.970 --> 00:11:59.800 So icon search is coming 259 00:11:59.800 --> 00:12:04.170 from icons.96 and so on and so forth. 260 00:12:04.170 --> 00:12:06.690 However, in our template literal, 261 00:12:06.690 --> 00:12:09.550 we are still writing, basically, 262 00:12:09.550 --> 00:12:11.653 the old path to the icons. 263 00:12:12.700 --> 00:12:14.480 So this one here. 264 00:12:14.480 --> 00:12:15.600 And so right now, 265 00:12:15.600 --> 00:12:18.860 JavaScript will not be able to find this. 266 00:12:18.860 --> 00:12:20.600 So in the disc folder, 267 00:12:20.600 --> 00:12:21.433 this one here, 268 00:12:21.433 --> 00:12:25.210 there is no source/image folder 269 00:12:25.210 --> 00:12:27.910 in which there is icons.svg 270 00:12:27.910 --> 00:12:29.770 because that exists only 271 00:12:29.770 --> 00:12:31.570 in our source folder. 272 00:12:31.570 --> 00:12:33.020 So only right here 273 00:12:33.020 --> 00:12:35.260 where we are developing the application. 274 00:12:35.260 --> 00:12:37.280 But again right now 275 00:12:37.280 --> 00:12:40.120 we are basically shipping the application already. 276 00:12:40.120 --> 00:12:44.030 And so it's using the data from this disc folder. 277 00:12:44.030 --> 00:12:45.580 And so now we need a way 278 00:12:45.580 --> 00:12:47.500 of telling our JavaScript 279 00:12:47.500 --> 00:12:50.510 that the icons file is no longer this one 280 00:12:50.510 --> 00:12:52.723 but instead it is this one. 281 00:12:53.600 --> 00:12:55.320 And we can actually do that 282 00:12:55.320 --> 00:12:58.860 with parcel by basically simply importing 283 00:12:58.860 --> 00:13:00.810 the icons file. 284 00:13:00.810 --> 00:13:03.660 So let's go to the top of our file 285 00:13:03.660 --> 00:13:05.650 because I like to keep all the imports 286 00:13:05.650 --> 00:13:06.863 always at the top. 287 00:13:08.060 --> 00:13:10.130 And so again, in parcel, 288 00:13:10.130 --> 00:13:13.560 we can import more than just JavaScript files. 289 00:13:13.560 --> 00:13:15.950 We can import all kinds of assets 290 00:13:15.950 --> 00:13:18.400 and that includes images. 291 00:13:18.400 --> 00:13:20.090 So let's import 292 00:13:20.090 --> 00:13:22.210 and let's call it simply icons. 293 00:13:22.210 --> 00:13:24.423 But this name can be anything that we want. 294 00:13:25.470 --> 00:13:27.630 (clicking) 295 00:13:27.630 --> 00:13:31.860 From another path to the original icons file, 296 00:13:31.860 --> 00:13:35.700 basically, from the view of this controller file, 297 00:13:35.700 --> 00:13:36.750 right? 298 00:13:36.750 --> 00:13:39.600 So here we are in controller.js. 299 00:13:39.600 --> 00:13:41.510 And so now we need to find a path 300 00:13:41.510 --> 00:13:42.913 to the images, 301 00:13:43.910 --> 00:13:46.940 so to this original icons file. 302 00:13:46.940 --> 00:13:49.763 So we need to go one way up. 303 00:13:50.720 --> 00:13:52.570 So exactly the way we browse 304 00:13:52.570 --> 00:13:54.860 the file tree in the terminal. 305 00:13:54.860 --> 00:13:58.050 So .. always means the parent folder. 306 00:13:58.050 --> 00:13:59.640 And so right now we are back 307 00:13:59.640 --> 00:14:02.510 in the source folder, 308 00:14:02.510 --> 00:14:05.120 which is the parent of js. 309 00:14:05.120 --> 00:14:06.330 And then from there, 310 00:14:06.330 --> 00:14:08.290 we can go into images 311 00:14:08.290 --> 00:14:11.493 and then icons.svg. 312 00:14:12.430 --> 00:14:13.860 All right. 313 00:14:13.860 --> 00:14:15.750 Now this is the way it used to work 314 00:14:15.750 --> 00:14:16.973 in parcel one. 315 00:14:18.710 --> 00:14:19.950 So if for some reason, 316 00:14:19.950 --> 00:14:21.787 you are running parcel one 317 00:14:21.787 --> 00:14:24.400 then this is the way to go. 318 00:14:24.400 --> 00:14:26.060 But in parcel two, 319 00:14:26.060 --> 00:14:28.070 it works almost the same way. 320 00:14:28.070 --> 00:14:30.340 But then for any static assets 321 00:14:30.340 --> 00:14:32.690 that are not programming files. 322 00:14:32.690 --> 00:14:34.670 So for any like images 323 00:14:34.670 --> 00:14:37.000 or videos or sound files, 324 00:14:37.000 --> 00:14:38.747 we need to write url: 325 00:14:41.536 --> 00:14:43.603 and then the path to the file. 326 00:14:44.910 --> 00:14:46.250 Okay. 327 00:14:46.250 --> 00:14:47.550 So let's take this out 328 00:14:49.560 --> 00:14:52.830 but then let's lock this icons to the console 329 00:14:52.830 --> 00:14:55.950 so that you see what this icons really is. 330 00:14:55.950 --> 00:14:58.430 Because in fact, it is nothing more 331 00:14:58.430 --> 00:15:01.633 than simply the path to the new icons file. 332 00:15:02.690 --> 00:15:04.340 So the local host, 333 00:15:04.340 --> 00:15:05.470 one two, three, four 334 00:15:05.470 --> 00:15:07.080 is in this case, basically, 335 00:15:07.080 --> 00:15:08.680 our disc folder. 336 00:15:08.680 --> 00:15:09.830 And then in there, 337 00:15:09.830 --> 00:15:11.950 the file that we need is icon.96f 338 00:15:13.490 --> 00:15:15.240 and so on and so forth. 339 00:15:15.240 --> 00:15:18.670 And so that is exactly this file here. 340 00:15:18.670 --> 00:15:19.800 Okay. 341 00:15:19.800 --> 00:15:21.773 And so now let's use that. 342 00:15:23.840 --> 00:15:25.913 So everywhere it says icon. 343 00:15:26.810 --> 00:15:29.740 So everywhere we have this old path 344 00:15:29.740 --> 00:15:33.200 we now want to replace it simply with the icons. 345 00:15:33.200 --> 00:15:35.980 So let's select all of them using command 346 00:15:35.980 --> 00:15:37.163 or Control+D. 347 00:15:39.210 --> 00:15:40.960 Or if that doesn't work for you, 348 00:15:40.960 --> 00:15:43.920 you can always probably use Command+F 349 00:15:43.920 --> 00:15:45.520 or something like that. 350 00:15:45.520 --> 00:15:46.400 But anyway, 351 00:15:46.400 --> 00:15:49.440 now we have all of them selected at the same time 352 00:15:49.440 --> 00:15:51.190 and then I can delete them all 353 00:15:52.323 --> 00:15:57.120 and then insert the icons variable here everywhere. 354 00:15:57.120 --> 00:15:59.700 And so now if we give this a save 355 00:16:00.681 --> 00:16:03.650 then our icons are back. 356 00:16:03.650 --> 00:16:05.100 Right? 357 00:16:05.100 --> 00:16:07.390 So starting here 358 00:16:07.390 --> 00:16:08.830 then in all ingredients 359 00:16:08.830 --> 00:16:10.740 and here also, 360 00:16:10.740 --> 00:16:12.110 all over the place. 361 00:16:12.110 --> 00:16:13.873 We now have our icons back. 362 00:16:15.000 --> 00:16:16.690 And now just to finish this lecture, 363 00:16:16.690 --> 00:16:19.160 I want to give this one more touch, 364 00:16:19.160 --> 00:16:22.490 which is this here. 365 00:16:22.490 --> 00:16:23.720 So watch what happens here 366 00:16:23.720 --> 00:16:25.723 in the recipe when I load the page. 367 00:16:28.000 --> 00:16:29.620 Well, that was pretty fast. 368 00:16:29.620 --> 00:16:30.703 Let's see again. 369 00:16:31.810 --> 00:16:34.080 So maybe for half a second or so 370 00:16:34.080 --> 00:16:36.200 you saw a loading spinner there. 371 00:16:36.200 --> 00:16:39.230 And so that's what I want to have here as well. 372 00:16:39.230 --> 00:16:41.250 So before the recipe arrives 373 00:16:41.250 --> 00:16:43.940 I want like a loading spinner there 374 00:16:43.940 --> 00:16:46.240 because that's a very common pattern 375 00:16:46.240 --> 00:16:49.580 that you see in all kinds of applications. 376 00:16:49.580 --> 00:16:51.030 Right? 377 00:16:51.030 --> 00:16:53.420 And it's actually very simple. 378 00:16:53.420 --> 00:16:55.730 So we have the code already here 379 00:16:55.730 --> 00:16:56.683 in our HTML. 380 00:16:57.726 --> 00:17:00.053 So it is this a spinner here. 381 00:17:01.090 --> 00:17:02.993 So let's grab this code. 382 00:17:03.950 --> 00:17:04.783 And then 383 00:17:06.070 --> 00:17:08.540 here I will simply create an external function 384 00:17:09.540 --> 00:17:10.373 called 385 00:17:13.110 --> 00:17:16.300 render a spinner 386 00:17:19.550 --> 00:17:21.940 and let's make this a very generic function 387 00:17:21.940 --> 00:17:23.500 that we can reuse. 388 00:17:23.500 --> 00:17:26.633 And so that's passed in the parent element. 389 00:17:27.960 --> 00:17:29.700 And so then we can simply attach this 390 00:17:29.700 --> 00:17:31.320 to any parent element 391 00:17:31.320 --> 00:17:32.603 that is passed in here. 392 00:17:36.120 --> 00:17:38.630 So as always creating a markup variable 393 00:17:42.030 --> 00:17:43.610 and then our code here. 394 00:17:43.610 --> 00:17:44.960 And just like before, 395 00:17:44.960 --> 00:17:47.780 we need to now replace this old path 396 00:17:47.780 --> 00:17:49.113 with the new path. 397 00:17:50.490 --> 00:17:52.250 So icons 398 00:17:53.720 --> 00:17:54.650 and then of course, 399 00:17:54.650 --> 00:17:56.340 we need to add this HTML 400 00:17:56.340 --> 00:17:58.150 to the dump as a child 401 00:17:58.150 --> 00:18:01.110 of the parent element in this case. 402 00:18:01.110 --> 00:18:03.193 So parentEl.insertAdjacentHTML 403 00:18:08.309 --> 00:18:09.392 afterbegin 404 00:18:10.940 --> 00:18:12.333 and markup. 405 00:18:13.300 --> 00:18:14.410 Okay. 406 00:18:14.410 --> 00:18:16.150 And now let me just quickly show you 407 00:18:16.150 --> 00:18:18.700 why this is going to work. 408 00:18:18.700 --> 00:18:20.393 So here in the CSS, 409 00:18:21.700 --> 00:18:23.073 let's look for spinner. 410 00:18:24.090 --> 00:18:25.200 And here you see 411 00:18:25.200 --> 00:18:29.470 that the icon inside of the spinner class 412 00:18:29.470 --> 00:18:31.720 has this rotation animation 413 00:18:31.720 --> 00:18:34.710 that keeps going forever. 414 00:18:34.710 --> 00:18:37.780 So that's this infinite attribute here 415 00:18:37.780 --> 00:18:39.690 in the animation property. 416 00:18:39.690 --> 00:18:41.520 And this rotation animation 417 00:18:42.370 --> 00:18:45.600 I created here manually using key frames. 418 00:18:45.600 --> 00:18:47.320 And basically what it does 419 00:18:47.320 --> 00:18:48.940 is to rotate the element 420 00:18:48.940 --> 00:18:51.250 to 360 degrees. 421 00:18:51.250 --> 00:18:53.850 And so if you ever need a spinner like this, 422 00:18:53.850 --> 00:18:56.863 you can simply, basically copy this code here. 423 00:18:58.210 --> 00:18:59.043 All right. 424 00:19:00.660 --> 00:19:02.633 Let's close what we don't need here. 425 00:19:03.740 --> 00:19:06.100 And probably, before we insert this, 426 00:19:06.100 --> 00:19:08.943 we should also clear the parent element. 427 00:19:10.130 --> 00:19:14.010 So just like before setting the inner HTML 428 00:19:14.010 --> 00:19:15.500 to nothing. 429 00:19:15.500 --> 00:19:18.770 And now let's actually render the spinner. 430 00:19:18.770 --> 00:19:21.340 So let's do that here 431 00:19:21.340 --> 00:19:22.883 as we load the recipe. 432 00:19:24.230 --> 00:19:25.563 So right here. 433 00:19:27.130 --> 00:19:29.231 So renderSpinner 434 00:19:29.231 --> 00:19:31.290 and then the parent element in this case, 435 00:19:31.290 --> 00:19:33.930 is going to be the recipeContainer. 436 00:19:37.270 --> 00:19:39.040 All right, let's go back 437 00:19:39.040 --> 00:19:39.873 and reload 438 00:19:40.740 --> 00:19:42.360 and there it was. 439 00:19:42.360 --> 00:19:43.193 You saw it. 440 00:19:44.460 --> 00:19:47.325 Let's make this a little bit slower 441 00:19:47.325 --> 00:19:50.543 by changing our network speed here. 442 00:19:54.840 --> 00:19:56.900 So it took a little bit longer, 443 00:19:56.900 --> 00:19:58.820 maybe slow 3G 444 00:19:58.820 --> 00:20:00.483 is gonna be even better. 445 00:20:01.840 --> 00:20:03.170 And so now it's gonna take 446 00:20:04.170 --> 00:20:05.310 a lot more time 447 00:20:06.560 --> 00:20:08.433 but indeed here it is. 448 00:20:10.260 --> 00:20:12.190 So that spinner is a nice touch, 449 00:20:12.190 --> 00:20:13.640 I think. 450 00:20:13.640 --> 00:20:15.810 And it definitely makes this application 451 00:20:15.810 --> 00:20:18.060 feel more real world. 452 00:20:18.060 --> 00:20:20.450 Now just to finish this video, 453 00:20:20.450 --> 00:20:21.730 something that I should have done 454 00:20:21.730 --> 00:20:23.370 in the last video already 455 00:20:23.370 --> 00:20:24.760 is to add polyfills 456 00:20:24.760 --> 00:20:26.570 for es6 features 457 00:20:26.570 --> 00:20:28.210 to our code base. 458 00:20:28.210 --> 00:20:29.740 So just like we did 459 00:20:29.740 --> 00:20:31.693 in the previous section as well. 460 00:20:32.620 --> 00:20:34.683 So remember to do that, 461 00:20:36.010 --> 00:20:40.650 we installed some special packages. 462 00:20:40.650 --> 00:20:45.650 So the packages are called npm core-js 463 00:20:45.900 --> 00:20:48.580 and we can actually install multiple packages 464 00:20:48.580 --> 00:20:49.950 at the same time. 465 00:20:49.950 --> 00:20:51.920 I think I never did this before. 466 00:20:51.920 --> 00:20:53.465 So this is how it works. 467 00:20:53.465 --> 00:20:57.850 Regenerator-runtime 468 00:20:58.800 --> 00:21:00.570 and then hit enter 469 00:21:00.570 --> 00:21:03.440 and then let's wait for these packages to download 470 00:21:04.400 --> 00:21:05.493 and here they are. 471 00:21:06.580 --> 00:21:08.593 So they should be, 472 00:21:09.480 --> 00:21:10.313 yeah, 473 00:21:10.313 --> 00:21:11.230 so right here 474 00:21:11.230 --> 00:21:12.300 and now all we have to do 475 00:21:12.300 --> 00:21:13.910 is to import them here 476 00:21:13.910 --> 00:21:16.270 at the top of our file. 477 00:21:16.270 --> 00:21:18.170 And so it is, we make sure 478 00:21:18.170 --> 00:21:21.140 that most real old browsers 479 00:21:21.140 --> 00:21:22.930 are still being supported 480 00:21:22.930 --> 00:21:24.350 by our application. 481 00:21:24.350 --> 00:21:28.140 So actually we don't even need to save it anywhere. 482 00:21:28.140 --> 00:21:33.140 We can just say core-js/stable. 483 00:21:33.290 --> 00:21:36.080 So vs code, one more time, is really smart 484 00:21:36.080 --> 00:21:37.210 and can really help us 485 00:21:37.210 --> 00:21:40.763 with package imports like this. 486 00:21:43.750 --> 00:21:45.960 So again, this one here 487 00:21:45.960 --> 00:21:48.310 is for polyfilling async/await. 488 00:21:48.310 --> 00:21:51.670 And this one here is for polyfilling everything else. 489 00:21:51.670 --> 00:21:53.970 And we could just cherry pick some features 490 00:21:53.970 --> 00:21:55.791 and only import those 491 00:21:55.791 --> 00:21:59.578 but let's simply polyfill everything. 492 00:21:59.578 --> 00:22:00.791 Okay. 493 00:22:00.791 --> 00:22:03.610 Don't need this terminal anymore. 494 00:22:03.610 --> 00:22:05.260 This one here already reload it 495 00:22:06.390 --> 00:22:09.283 and you see everything keeps working the same. 496 00:22:10.650 --> 00:22:12.040 All right. 497 00:22:12.040 --> 00:22:13.810 So we have this working. 498 00:22:13.810 --> 00:22:15.020 Now in the next video, 499 00:22:15.020 --> 00:22:17.730 let's quickly add some event handlers 500 00:22:17.730 --> 00:22:18.850 so that after that 501 00:22:18.850 --> 00:22:21.403 we can start talking about the architecture.