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.