WEBVTT 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.