1 00:00:01,300 --> 00:00:04,970 Alright, so let's set up our project 2 00:00:04,970 --> 00:00:08,210 and also start to load some recipe data 3 00:00:08,210 --> 00:00:10,363 from the Forkify API. 4 00:00:12,620 --> 00:00:17,620 And here as always, I already have the starter files loaded. 5 00:00:17,850 --> 00:00:22,090 Now this time we have a bit of a different structure here, 6 00:00:22,090 --> 00:00:26,580 so I have index.html out here, but then all the rest, 7 00:00:26,580 --> 00:00:29,490 all four assets for this project are here 8 00:00:29,490 --> 00:00:30,993 in the source folder. 9 00:00:32,210 --> 00:00:36,563 So in the source, we have images, JavaScript, and Sass. 10 00:00:38,230 --> 00:00:42,560 So for JavaScript, right now we have controller.js, 11 00:00:42,560 --> 00:00:45,963 which contains this little starter code here. 12 00:00:46,960 --> 00:00:49,990 And then I have this Sass folder. 13 00:00:49,990 --> 00:00:51,360 And in case you don't know, 14 00:00:51,360 --> 00:00:55,770 Sass is basically a better way of writing CSS, 15 00:00:55,770 --> 00:00:58,410 which has some nice additional features, 16 00:00:58,410 --> 00:01:02,300 which makes writing CSS in a large scale application 17 00:01:02,300 --> 00:01:04,100 a lot easier. 18 00:01:04,100 --> 00:01:07,450 Now, browsers actually don't understand Sass 19 00:01:07,450 --> 00:01:10,860 and so it has to be converted to CSS. 20 00:01:10,860 --> 00:01:13,840 And so Parcel is going to do that for us. 21 00:01:13,840 --> 00:01:16,700 And so I left these Sass files here 22 00:01:16,700 --> 00:01:20,690 so that you can see that Parcel is actually also capable 23 00:01:20,690 --> 00:01:21,853 of doing that. 24 00:01:24,070 --> 00:01:27,360 And then here just some images and of course down here, 25 00:01:27,360 --> 00:01:31,410 we have our flowcharts and also a small diagram 26 00:01:31,410 --> 00:01:32,793 about the architecture. 27 00:01:33,940 --> 00:01:34,860 Okay. 28 00:01:34,860 --> 00:01:37,563 But now let's open up a new terminal here. 29 00:01:39,950 --> 00:01:42,620 And then just like before we need to initialize 30 00:01:42,620 --> 00:01:45,590 a new project by writing npm init. 31 00:01:46,810 --> 00:01:51,550 And so this command will then create or package .json file. 32 00:01:51,550 --> 00:01:55,540 So this project should be called simply Forkify 33 00:01:56,620 --> 00:01:58,563 and the version might be version one. 34 00:01:59,870 --> 00:02:04,000 Here, let's just say Recipe application, 35 00:02:04,000 --> 00:02:06,400 or really whatever you want. 36 00:02:06,400 --> 00:02:09,763 Then this one doesn't matter neither this one. 37 00:02:11,060 --> 00:02:15,273 And now you can just add your own name here if you'd like. 38 00:02:17,530 --> 00:02:18,893 And so that's it. 39 00:02:19,850 --> 00:02:20,850 And so again, 40 00:02:20,850 --> 00:02:25,850 this now created this package.json file right here. 41 00:02:26,870 --> 00:02:29,220 Let's get rid of this one here actually, 42 00:02:29,220 --> 00:02:33,890 or actually let's just change it to .html. 43 00:02:33,890 --> 00:02:36,030 So this is kind of our entry point 44 00:02:36,030 --> 00:02:37,540 so let's specify it here, 45 00:02:37,540 --> 00:02:39,870 even though it's not really important. 46 00:02:39,870 --> 00:02:44,200 And here I will start by setting up the npm scripts now. 47 00:02:44,200 --> 00:02:46,850 So just as we did in the last section, 48 00:02:46,850 --> 00:02:51,800 so this one is going to be npm start instead. 49 00:02:51,800 --> 00:02:56,800 And here we will want to start Parcel on index.html. 50 00:02:59,800 --> 00:03:03,733 So index.html is again going to be your entry point. 51 00:03:04,640 --> 00:03:06,920 And then since we are here, 52 00:03:06,920 --> 00:03:11,260 let's also already add or build script. 53 00:03:11,260 --> 00:03:13,620 So basically the command that we are going to run 54 00:03:13,620 --> 00:03:16,933 in the end once we're already building the application. 55 00:03:19,040 --> 00:03:21,013 And again, index.htm. 56 00:03:22,000 --> 00:03:25,540 Now, sometimes in projects we don't even have an html. 57 00:03:25,540 --> 00:03:27,110 And so of course the entry point 58 00:03:27,110 --> 00:03:29,510 can also be a JavaScript file. 59 00:03:29,510 --> 00:03:33,390 And also this could be in a different folder 60 00:03:33,390 --> 00:03:37,430 and we can specify all that here in the Parcel command. 61 00:03:37,430 --> 00:03:40,953 But once again, we are just keeping it very simple here. 62 00:03:41,960 --> 00:03:44,850 Now, in order to actually run Parcel, 63 00:03:44,850 --> 00:03:46,450 of course we need to install it. 64 00:03:47,480 --> 00:03:50,450 Now in the last section, we simply installed Parcel 65 00:03:50,450 --> 00:03:54,900 by writing npm install Parcel, 66 00:03:54,900 --> 00:03:58,230 and then as a dev dependency like this. 67 00:03:58,230 --> 00:04:00,660 And so this would then basically install 68 00:04:00,660 --> 00:04:03,810 simply the latest version that is available on npm 69 00:04:03,810 --> 00:04:05,380 for Parcel. 70 00:04:05,380 --> 00:04:07,580 And at the time I'm recording 71 00:04:07,580 --> 00:04:10,850 that is version one point something 72 00:04:10,850 --> 00:04:14,490 However, Parcel 2 is almost ready at this point. 73 00:04:14,490 --> 00:04:18,290 And so I want to use a beta version of Parcel 2 74 00:04:18,290 --> 00:04:21,400 so that you can use Parcel 2 in the future. 75 00:04:21,400 --> 00:04:22,233 Alright. 76 00:04:23,920 --> 00:04:26,210 So if Parcel 2 was already out, 77 00:04:26,210 --> 00:04:29,303 then we would simply write @2 like this. 78 00:04:30,200 --> 00:04:32,940 However, right now it's just a beta version. 79 00:04:32,940 --> 00:04:35,410 And so I have to type @next 80 00:04:36,290 --> 00:04:39,400 and then edit as a dev dependency. 81 00:04:39,400 --> 00:04:42,130 So again, I am writing @next here 82 00:04:42,130 --> 00:04:43,783 to install a beta version. 83 00:04:45,170 --> 00:04:48,780 So let me run this and in case you get any error, 84 00:04:48,780 --> 00:04:53,520 then please go ahead and simply install Parcel@2. 85 00:04:53,520 --> 00:04:56,250 So you see here that this is going to install 86 00:04:56,250 --> 00:04:58,853 at 2.0.0-beta.1. 87 00:05:02,960 --> 00:05:05,350 Now okay, and here we go. 88 00:05:05,350 --> 00:05:09,660 So again, you see that we are at 2.0.0-beta.1. 89 00:05:09,660 --> 00:05:12,060 And if you got some error here again, 90 00:05:12,060 --> 00:05:15,370 then please try a Parcel@2. 91 00:05:15,370 --> 00:05:18,180 So it's really important for the rest of this section 92 00:05:18,180 --> 00:05:22,770 that we are actually all on Parcel 2 dot something. 93 00:05:22,770 --> 00:05:26,400 So here it doesn't matter if you have 2.1 or two or three, 94 00:05:26,400 --> 00:05:28,103 but it should be two. 95 00:05:29,030 --> 00:05:31,480 So that's what matters from this part. 96 00:05:31,480 --> 00:05:34,960 And so now let's actually start Parcel 97 00:05:34,960 --> 00:05:39,960 by running our npm script, npm run start. 98 00:05:40,280 --> 00:05:44,980 And actually the start script is a special one in npm 99 00:05:44,980 --> 00:05:47,273 for which one you don't even need the run. 100 00:05:48,230 --> 00:05:50,650 So you can just write npm start 101 00:05:50,650 --> 00:05:53,783 and that will then call your start script. 102 00:05:56,580 --> 00:06:00,920 So it's installing Sass and now we got this error here 103 00:06:00,920 --> 00:06:03,370 for the module, Sass. 104 00:06:03,370 --> 00:06:06,140 And so lets quit this here with control C 105 00:06:07,110 --> 00:06:11,400 and then I just say, npm install. 106 00:06:11,400 --> 00:06:14,973 And so this will then install Sass here for us. 107 00:06:15,950 --> 00:06:18,690 But if you're still running into some kind of error 108 00:06:18,690 --> 00:06:22,720 with Sass here then please just try to install Sass 109 00:06:22,720 --> 00:06:25,160 using the exact same version number. 110 00:06:25,160 --> 00:06:29,803 So npm install Sass, and then at 1.26.10. 111 00:06:32,030 --> 00:06:35,700 And so that should then fix any remaining problem. 112 00:06:35,700 --> 00:06:38,710 And if it didn't, so if even after that 113 00:06:38,710 --> 00:06:42,440 you still run into some problems either with Sass 114 00:06:42,440 --> 00:06:46,010 or with installing Parcel or running Parcel, 115 00:06:46,010 --> 00:06:49,460 then please take a look at the frequently asked questions 116 00:06:49,460 --> 00:06:50,963 in the GitHub repo. 117 00:06:52,210 --> 00:06:56,330 And only in the last case, you can of course also ask 118 00:06:56,330 --> 00:06:58,870 in the course Q and A section. 119 00:06:58,870 --> 00:07:03,870 But anyway, if we now try to run npm start again, 120 00:07:03,940 --> 00:07:05,523 then it will work. 121 00:07:07,480 --> 00:07:09,283 And indeed here it is. 122 00:07:10,600 --> 00:07:13,410 So we now have to note modules folder, 123 00:07:13,410 --> 00:07:17,450 which contains well tons of modules. 124 00:07:17,450 --> 00:07:21,850 And then we also have our distribution folder, right? 125 00:07:21,850 --> 00:07:25,730 And you see that here everything is in one folder. 126 00:07:25,730 --> 00:07:30,730 So our index.html and then also the controller script, 127 00:07:30,840 --> 00:07:34,410 which is this one, well not really this one, 128 00:07:34,410 --> 00:07:36,160 but the compiled one. 129 00:07:36,160 --> 00:07:39,970 And also you see that now we have an actual CSS file 130 00:07:40,960 --> 00:07:42,803 and you also see all the images. 131 00:07:44,710 --> 00:07:49,710 So a real CSS file, let's take a look at index as well. 132 00:07:51,230 --> 00:07:55,230 And so you see that now it replaced the controller js 133 00:07:55,230 --> 00:07:59,310 here in the source and also here I was referencing 134 00:07:59,310 --> 00:08:03,140 the SCSS file, so the SCCS file. 135 00:08:03,140 --> 00:08:06,630 And it is because of this that Parcel actually knows 136 00:08:06,630 --> 00:08:10,920 that it needs to compile the Sass file to CSS. 137 00:08:10,920 --> 00:08:13,970 So basically I referenced the Sass file here 138 00:08:13,970 --> 00:08:17,760 and therefore Parcel knew that it had to include that file 139 00:08:17,760 --> 00:08:21,470 in the distribution as well and to also replace 140 00:08:21,470 --> 00:08:24,620 the under link to the actual final CSS file. 141 00:08:24,620 --> 00:08:27,743 And the same is true for all the images. 142 00:08:28,820 --> 00:08:31,000 So it basically copied all the images 143 00:08:31,000 --> 00:08:34,730 to the distribution folder and gave them a new name 144 00:08:34,730 --> 00:08:37,963 and replaced their source here in the html. 145 00:08:40,170 --> 00:08:43,100 And this is very important to keep in mind 146 00:08:43,100 --> 00:08:46,203 as we go building this project. 147 00:08:47,050 --> 00:08:49,550 But of course this folder here 148 00:08:49,550 --> 00:08:52,930 is not really important for us in development. 149 00:08:52,930 --> 00:08:54,830 So everything that we will develop 150 00:08:54,830 --> 00:08:57,740 will be here in the source folder 151 00:08:57,740 --> 00:09:00,160 and only what we then see in the browser 152 00:09:00,160 --> 00:09:02,553 is actually coming from this distribution. 153 00:09:03,400 --> 00:09:07,440 So again, that's the whole logic of having a module bundler. 154 00:09:07,440 --> 00:09:10,780 So it takes, or basically a raw source code 155 00:09:10,780 --> 00:09:15,500 and compiles it into this nice package here, let's say, 156 00:09:15,500 --> 00:09:18,773 so this folder that is ready to ship to browsers. 157 00:09:22,140 --> 00:09:25,710 So for now we no longer need this html file 158 00:09:25,710 --> 00:09:29,110 and so we can now think about our controller here 159 00:09:29,110 --> 00:09:33,140 and actually think about making our first API call. 160 00:09:33,140 --> 00:09:36,100 And we can actually also open the page here 161 00:09:36,100 --> 00:09:39,383 by clicking option down here. 162 00:09:40,900 --> 00:09:43,403 Well, that opened in another tab for me. 163 00:09:44,270 --> 00:09:48,363 So let me just copy it right here. 164 00:09:51,279 --> 00:09:53,920 Let's open up the developer tools as well, 165 00:09:53,920 --> 00:09:57,020 but for now of course we have nothing here 166 00:09:57,020 --> 00:09:59,370 because we don't have any code yet. 167 00:09:59,370 --> 00:10:04,300 But let's just lock something to the console, 168 00:10:04,300 --> 00:10:07,970 just to see that our Parcel setup is working. 169 00:10:07,970 --> 00:10:11,420 And you see that it already built a new version. 170 00:10:11,420 --> 00:10:14,453 And indeed we have tests now in our console. 171 00:10:15,660 --> 00:10:16,630 Great. 172 00:10:16,630 --> 00:10:20,230 So everything is working and so yeah, 173 00:10:20,230 --> 00:10:23,710 let's now make our first API call. 174 00:10:23,710 --> 00:10:27,630 Now, for this project I actually developed my own API 175 00:10:27,630 --> 00:10:31,023 so that we are not dependent on any third party services. 176 00:10:31,870 --> 00:10:34,343 And the API is at this page. 177 00:10:35,600 --> 00:10:37,720 So let's copy it and let's go there 178 00:10:37,720 --> 00:10:39,593 to check out the documentation. 179 00:10:40,760 --> 00:10:44,380 So any good API needs some sort of documentation. 180 00:10:44,380 --> 00:10:47,170 And so this is the documentation that I wrote 181 00:10:47,170 --> 00:10:51,340 for our Forkify API version two. 182 00:10:51,340 --> 00:10:55,810 So version one was for the old version of this course. 183 00:10:55,810 --> 00:10:58,590 So some details about this API 184 00:10:58,590 --> 00:11:01,050 is that search terms are limited. 185 00:11:01,050 --> 00:11:03,000 All you can search for is the terms 186 00:11:03,000 --> 00:11:04,973 that are in this list here, 187 00:11:06,270 --> 00:11:09,193 but to test this application that should be enough. 188 00:11:10,660 --> 00:11:14,600 And you can only make 100 API requests per hour 189 00:11:14,600 --> 00:11:17,430 in order not to overload our servers. 190 00:11:17,430 --> 00:11:20,590 Because again, this is here my own API 191 00:11:20,590 --> 00:11:22,383 that I'm running on my own server. 192 00:11:23,270 --> 00:11:25,800 Then the API key is what we will need 193 00:11:25,800 --> 00:11:28,040 to upload our own recipes. 194 00:11:28,040 --> 00:11:30,640 But again, more about that later. 195 00:11:30,640 --> 00:11:34,750 And then here we have basically our main URLs 196 00:11:34,750 --> 00:11:37,900 or routes of this API. 197 00:11:37,900 --> 00:11:41,040 So the first one is used to get all the recipes 198 00:11:41,040 --> 00:11:43,360 or to create a recipe. 199 00:11:43,360 --> 00:11:45,760 But for now let's focus on this one, 200 00:11:45,760 --> 00:11:49,093 which is simple to get one single recipe. 201 00:11:50,090 --> 00:11:54,633 So the path of this part of the API is this here. 202 00:11:55,750 --> 00:12:00,750 So this URL then slash recipes slash the ID of a recipe. 203 00:12:01,500 --> 00:12:03,870 And down here is an example of that. 204 00:12:03,870 --> 00:12:07,010 So for example, this one here might be the ID 205 00:12:08,030 --> 00:12:09,210 and then here the key, 206 00:12:09,210 --> 00:12:11,860 but again the key doesn't matter for now. 207 00:12:11,860 --> 00:12:14,530 And we can click on this and then see exactly 208 00:12:14,530 --> 00:12:17,750 the kind of result that we will get. 209 00:12:17,750 --> 00:12:20,170 And so actually this is the URL 210 00:12:20,170 --> 00:12:22,710 that for now we will use in our code 211 00:12:22,710 --> 00:12:26,040 to basically get exactly this recipe here 212 00:12:26,040 --> 00:12:28,020 in our application. 213 00:12:28,020 --> 00:12:31,703 So let's copy this and go back to our code. 214 00:12:33,640 --> 00:12:38,300 And so now as always to make an Ajax request to an API 215 00:12:38,300 --> 00:12:40,273 we use the fetch function. 216 00:12:42,570 --> 00:12:43,470 And now that we have this, 217 00:12:43,470 --> 00:12:47,420 let's actually create some function around this. 218 00:12:47,420 --> 00:12:50,873 So an async function so that we can use a single wait. 219 00:12:52,500 --> 00:12:55,133 So let's call it showrecipe. 220 00:12:59,055 --> 00:13:00,673 So an async function. 221 00:13:03,760 --> 00:13:07,873 And then here as always, we use a try catch. 222 00:13:09,170 --> 00:13:13,123 And if there is an error, we want to alert that error. 223 00:13:14,250 --> 00:13:17,620 So very simple error handling for now. 224 00:13:17,620 --> 00:13:21,400 And now let's take this here and await it 225 00:13:21,400 --> 00:13:25,700 and store the result into the res variable, 226 00:13:25,700 --> 00:13:28,040 which stands for response. 227 00:13:28,040 --> 00:13:29,740 And I hope that all of this here 228 00:13:29,740 --> 00:13:32,360 is nothing new for you at this point 229 00:13:32,360 --> 00:13:34,353 after the last couple of sections. 230 00:13:36,210 --> 00:13:39,500 So just keep in mind that using the fetch function here 231 00:13:39,500 --> 00:13:41,310 will return a promise. 232 00:13:41,310 --> 00:13:44,200 And so, since we are in an async function, 233 00:13:44,200 --> 00:13:46,960 we can then await that promise. 234 00:13:46,960 --> 00:13:49,630 So basically we will stop the code execution here 235 00:13:49,630 --> 00:13:52,230 at this point, but that's not a problem 236 00:13:52,230 --> 00:13:55,090 because this is an async function anyway, 237 00:13:55,090 --> 00:13:57,490 which only runs in the background. 238 00:13:57,490 --> 00:14:01,263 So we are not blocking our main thread of execution here. 239 00:14:02,230 --> 00:14:05,580 But anyway, once we have that result, 240 00:14:05,580 --> 00:14:08,803 we then need to convert that to json. 241 00:14:10,430 --> 00:14:13,550 So as always, let's create a data variable 242 00:14:13,550 --> 00:14:18,023 and then await the response .json. 243 00:14:19,890 --> 00:14:24,440 So the json method is, again, a method that is available 244 00:14:24,440 --> 00:14:27,240 on all the response objects. 245 00:14:27,240 --> 00:14:29,730 And a response object is exactly 246 00:14:29,730 --> 00:14:32,220 what the fetch function here returns. 247 00:14:32,220 --> 00:14:36,850 And so yeah, we can then call json on that response, 248 00:14:36,850 --> 00:14:38,810 which returns another promise, 249 00:14:38,810 --> 00:14:41,210 which we then have to await again. 250 00:14:41,210 --> 00:14:43,530 And in the end we will then get our data 251 00:14:43,530 --> 00:14:45,483 stored to that variable. 252 00:14:47,220 --> 00:14:50,960 And then that's actually console.log, 253 00:14:50,960 --> 00:14:54,433 both the response and also the data. 254 00:14:56,570 --> 00:14:59,020 So, give it a safe. 255 00:14:59,020 --> 00:15:02,710 And we also should call this here right at the beginning 256 00:15:02,710 --> 00:15:05,223 because otherwise nothing is going to happen. 257 00:15:06,570 --> 00:15:10,463 And so which one is ours? Here we are. 258 00:15:12,450 --> 00:15:15,840 And you see that we already have a result here. 259 00:15:15,840 --> 00:15:18,170 So first is the response. 260 00:15:18,170 --> 00:15:20,260 And so again as I mentioned, 261 00:15:20,260 --> 00:15:23,240 this returns a response object, 262 00:15:23,240 --> 00:15:26,290 but then the data itself is here. 263 00:15:26,290 --> 00:15:30,653 And so we get this status here and then the data itself. 264 00:15:31,660 --> 00:15:33,223 Make it a bit bigger here. 265 00:15:36,020 --> 00:15:40,543 And so then here, inside of data we get the recipe itself. 266 00:15:43,570 --> 00:15:47,060 So it contains all of this data here, cooking time, 267 00:15:47,060 --> 00:15:51,860 the ID itself, then the ingredients, publisher, servings 268 00:15:51,860 --> 00:15:53,453 and so on and so forth. 269 00:15:54,440 --> 00:15:56,333 So that works beautifully. 270 00:15:57,290 --> 00:15:59,870 And as always, we started here assuming 271 00:15:59,870 --> 00:16:01,780 that there will be success, 272 00:16:01,780 --> 00:16:04,960 but now let's try to create a wrong ID here, 273 00:16:04,960 --> 00:16:07,283 which doesn't exist on the server. 274 00:16:08,520 --> 00:16:12,233 So just something like this and let's see what happens then. 275 00:16:13,970 --> 00:16:18,283 And so you see, we get the bad request. 276 00:16:19,640 --> 00:16:21,190 Here then in the response, 277 00:16:21,190 --> 00:16:24,240 we can see that ok is set to false. 278 00:16:24,240 --> 00:16:27,303 And so this is what we're going to use, remember that. 279 00:16:28,180 --> 00:16:29,870 So when ok is set to false 280 00:16:29,870 --> 00:16:33,260 means that there was some kind of error in the fetch. 281 00:16:33,260 --> 00:16:36,780 And so we can then use that to create our own errors. 282 00:16:36,780 --> 00:16:37,613 So again, 283 00:16:37,613 --> 00:16:40,823 just like we learned in the asynchronous JavaScript section. 284 00:16:43,510 --> 00:16:46,950 But then we still get a response here 285 00:16:46,950 --> 00:16:49,710 and this response says fail. 286 00:16:49,710 --> 00:16:51,860 And then also this message of invalid_id 287 00:16:53,273 --> 00:16:55,800 and then the ID that we provided. 288 00:16:55,800 --> 00:17:00,710 So also the API itself returns a nice error message. 289 00:17:00,710 --> 00:17:03,523 And so lets actually use that error message now. 290 00:17:05,340 --> 00:17:07,180 Because simply bad requests 291 00:17:07,180 --> 00:17:10,030 is not a very informative error message. 292 00:17:10,030 --> 00:17:12,370 It's way better to actually use the one 293 00:17:12,370 --> 00:17:14,363 that the API returned to us. 294 00:17:15,576 --> 00:17:19,747 And so that's at .message of this object. 295 00:17:21,890 --> 00:17:24,443 So, we need to do that after this one here. 296 00:17:26,050 --> 00:17:31,050 And so we can say if res.ok is false. 297 00:17:31,550 --> 00:17:34,853 So basically if response is not okay, 298 00:17:36,416 --> 00:17:39,213 then we want to throw a new error. 299 00:17:42,501 --> 00:17:45,883 And then in there we can use the .message property 300 00:17:47,330 --> 00:17:49,150 that I just mentioned. 301 00:17:49,150 --> 00:17:52,080 And again, that one is already coming from the data. 302 00:17:52,080 --> 00:17:54,480 So from the response of the server 303 00:17:54,480 --> 00:17:58,693 while the ok property is stored in the response itself. 304 00:18:00,670 --> 00:18:03,063 And then that's also provide the status code. 305 00:18:04,340 --> 00:18:08,383 So that is at res.status. 306 00:18:09,380 --> 00:18:11,530 Now okay and so... 307 00:18:12,480 --> 00:18:16,630 And you see that somehow we already get the error here, 308 00:18:16,630 --> 00:18:18,690 even though we're not at Chrome. 309 00:18:18,690 --> 00:18:21,410 But anyway, that alert window appeared, 310 00:18:21,410 --> 00:18:24,450 of course because down here the catch error, 311 00:18:24,450 --> 00:18:27,110 we are alerting exactly that error 312 00:18:27,110 --> 00:18:30,250 that we throw here in the try block. 313 00:18:30,250 --> 00:18:31,750 Right? 314 00:18:31,750 --> 00:18:35,203 And so as we go here, let's just try to reload. 315 00:18:36,290 --> 00:18:40,433 And so indeed, here we get our error as an alert window. 316 00:18:43,962 --> 00:18:46,170 But now let's take it back actually... 317 00:18:49,260 --> 00:18:51,900 But now let's take it back actually. 318 00:18:51,900 --> 00:18:56,723 And so when we're back then our data here is also back here. 319 00:18:59,020 --> 00:19:02,900 Now just to finish, lets actually format that data 320 00:19:02,900 --> 00:19:04,540 a little bit nicer. 321 00:19:04,540 --> 00:19:07,000 So basically I want to create a new object 322 00:19:07,000 --> 00:19:12,000 based on this object which has some better variable names. 323 00:19:13,000 --> 00:19:15,650 So here we have for example these underscores 324 00:19:15,650 --> 00:19:18,340 and these are very unusual in JavaScript. 325 00:19:18,340 --> 00:19:20,410 And so many times what we do 326 00:19:20,410 --> 00:19:23,670 is to basically kind of reformat this object 327 00:19:23,670 --> 00:19:25,070 that we get here. 328 00:19:25,070 --> 00:19:28,193 So basically I want to get rid of these underscores. 329 00:19:29,150 --> 00:19:32,083 And so... 330 00:19:32,083 --> 00:19:34,513 So lets create a new recipe variable, 331 00:19:37,280 --> 00:19:40,100 which should be data. 332 00:19:40,100 --> 00:19:43,360 And then remember that it is again data, 333 00:19:43,360 --> 00:19:45,773 and then dot recipe. 334 00:19:46,780 --> 00:19:48,930 So let's see that again, just to make sure. 335 00:19:50,360 --> 00:19:52,980 So this here is the data variable. 336 00:19:52,980 --> 00:19:55,090 And then in there we have data again 337 00:19:55,090 --> 00:19:57,513 and then in there is .recipe. 338 00:20:00,370 --> 00:20:03,050 And so here we have recipes on both sides 339 00:20:03,050 --> 00:20:05,003 and so we can use this structuring. 340 00:20:06,210 --> 00:20:07,953 So let's take that back. 341 00:20:08,880 --> 00:20:12,650 And I called this one a recipe with let 342 00:20:12,650 --> 00:20:16,430 so that we can now basically create a new recipe object 343 00:20:16,430 --> 00:20:17,363 based on that. 344 00:20:20,600 --> 00:20:22,283 So the id is the recipe.id. 345 00:20:26,099 --> 00:20:28,307 Your title is gonna be recipe.title. 346 00:20:32,040 --> 00:20:35,453 The publisher will be recipe.publisher. 347 00:20:36,560 --> 00:20:39,110 And there would have been other ways of doing this, 348 00:20:39,110 --> 00:20:42,277 but this is kind of the quick and dirty way (chuckles). 349 00:20:43,440 --> 00:20:48,120 So source URL is going to be recipe.source_url. 350 00:20:52,603 --> 00:20:56,690 So this is one of the ones I wanted to change. 351 00:20:56,690 --> 00:20:59,920 Then there's also an image URL property. 352 00:20:59,920 --> 00:21:02,103 And this one I want to simply call image, 353 00:21:04,372 --> 00:21:05,205 image_url. 354 00:21:08,999 --> 00:21:11,953 Then the servings might be just recipe.servings. 355 00:21:13,070 --> 00:21:14,580 And we're almost done here. 356 00:21:14,580 --> 00:21:19,350 So cooking time is the recipe.cooking_time 357 00:21:19,350 --> 00:21:20,563 with an underscore. 358 00:21:23,230 --> 00:21:27,253 And finally ingredients is recipe.ingredients. 359 00:21:31,730 --> 00:21:33,520 Now let's actually get rid of this 360 00:21:33,520 --> 00:21:37,630 and simply lock to the console, the recipe object 361 00:21:37,630 --> 00:21:38,793 that we just created. 362 00:21:40,170 --> 00:21:45,170 And here ingredients looks wrong ingredients like this 363 00:21:45,260 --> 00:21:46,403 and here the same. 364 00:21:47,740 --> 00:21:50,640 Everything else looks correct. 365 00:21:50,640 --> 00:21:52,930 And yeah. 366 00:21:52,930 --> 00:21:55,410 So here is our nicely formatted recipe 367 00:21:55,410 --> 00:21:57,663 that we just got from the server. 368 00:21:58,620 --> 00:22:02,970 And of course, that would work for other recipes as well. 369 00:22:02,970 --> 00:22:05,710 So let's go back to our documentation page 370 00:22:05,710 --> 00:22:07,820 and get some other ID. 371 00:22:07,820 --> 00:22:12,033 And so that ID, we can basically get from the search URL. 372 00:22:13,090 --> 00:22:15,090 So this path here will take us 373 00:22:15,090 --> 00:22:19,253 to all the recipes there are for a certain search query. 374 00:22:20,330 --> 00:22:23,033 So let's try this one here, which is for pizza. 375 00:22:24,430 --> 00:22:26,340 So you see it is the route. 376 00:22:26,340 --> 00:22:29,653 So the URL that I just told you slash recipes. 377 00:22:30,840 --> 00:22:35,410 And then we have this query, search set to pizza. 378 00:22:35,410 --> 00:22:37,510 So after this question mark. 379 00:22:37,510 --> 00:22:39,870 And this is a very common format 380 00:22:39,870 --> 00:22:43,720 of basically sending variables over your URLs. 381 00:22:43,720 --> 00:22:48,050 So search is like a variable and then pizza is that value. 382 00:22:48,050 --> 00:22:51,460 And so in this case, this is the query string. 383 00:22:51,460 --> 00:22:55,200 And in this case, what we want to search for is pizza. 384 00:22:55,200 --> 00:22:58,333 And so let's now just take any random ID of this. 385 00:23:00,194 --> 00:23:03,507 So with just copying it, let's go back here 386 00:23:04,866 --> 00:23:06,920 and then I will just duplicate this line 387 00:23:08,160 --> 00:23:12,517 and comment it and then replace this part here of the URL 388 00:23:13,860 --> 00:23:15,710 with this other ID. 389 00:23:15,710 --> 00:23:17,520 So you see it's slightly different. 390 00:23:17,520 --> 00:23:20,123 And so now we should get a different recipe. 391 00:23:21,990 --> 00:23:23,203 So let's see. 392 00:23:24,110 --> 00:23:28,123 And yeah, this time it is called Pepperoni Pizza Burgers. 393 00:23:28,970 --> 00:23:31,420 And so of course later in the real world, 394 00:23:31,420 --> 00:23:33,920 we will then get these different IDs 395 00:23:33,920 --> 00:23:37,453 from our search results here in the sidebar. 396 00:23:40,608 --> 00:23:43,920 So, we successfully started up our project 397 00:23:43,920 --> 00:23:48,390 and already did our first API call to the Forkify API 398 00:23:48,390 --> 00:23:51,430 that I created just for this project. 399 00:23:51,430 --> 00:23:54,270 So this was a nice start of the project. 400 00:23:54,270 --> 00:23:55,890 And now in the next video, 401 00:23:55,890 --> 00:23:59,290 we will then actually already render this data 402 00:23:59,290 --> 00:24:01,130 to the user interface 403 00:24:01,130 --> 00:24:05,240 in order to create something like this here. 404 00:24:05,240 --> 00:24:07,450 And I hope you're excited for that. 405 00:24:07,450 --> 00:24:09,343 And so let's quickly move on.