Build a Recipe App with Spoonacular API: Part Three

JavaScript API Web Development

English (Auto-generated)

Okay, so before we start any coating, let's actually get our api key first from uh spooktacular dot com forward slash food dash A. P. I. And once you make an account and you're assigned in, you can actually generate an api key from this aPI console and we can go down to profile and I've already made a a key, but basically you would just, you could just generate a new key. Right? So okay, we'll generate a new key and there you go. It says your api key has been generated and basically it'll just um be a bunch of random strings and uh a bunch of random characters. Okay, so what is this api key now? An api key is a unique identification number which is given to each user who wants to make aPI calls. So you're basically making requests to this A. P. I. And we're limited limited to how many requests we can make per day when we're using the free plan. But the free plan is more than enough for us. And if we go through the docks for spoon tacklers A. P. I. Right? So we can see all these ap I search of functions that are available to us. And the this api allows you to search its food database by cuisine, ingredients, nutrients etcetera. And it'll give you random recipes and much more. So we can search for recipes, by cuisines, ingredients by making requests at specific endpoints. Right? So out here, the first endpoint that we'll be using is this one out here and we'll be searching by query. So now that's enough for a spectacular for now let's actually head back to our script dot Js file and let's start working here. Now, we're going to start using this api by setting up a few global variables. So let's go ahead and set up a few global variables. And the first one is going to be called Config api U R L. So let can fake A P i U r L is equal to basically this. Config api U R L variable references A U R L. And this is going to be the base u r L for our fetch method. And if I go back to the docks, it's this one out here. So I'm just going to copy this and in my javascript I'm going to paste it out here. There you go. Okay, so what we're doing is that we're actually getting this from a spooktacular and we're going to be using this and point so that we can conduct a complex search. For example, we can filter the recipe database for a user's search query. All right. And we'll be using the query parameter to do this. Now, next we're going to have a total data variable which is equal to an empty array for now. And this is going to be an array containing the api response data. So whatever data we get, we're actually just going to push it into this array. And next we'll declare and initialize a variable, which is going to be called input text. Right? And the text is going to be a reference to whatever the user types in the input box. Which is this thing here. Right. All right. So coming back, the last thing that we need to do is we need to grab a reference to the html element where the results of the search results are going to be displayed. And if you remember on the web page, this is this diff out here with all these search results. And in our html it is this diff which has an idea of results DEV. And I'm going to now declare variable which is called let result DEV is equal to document object. Get use your get element by ID D method to get my element which has which has an idea of I believe it's results def. But let's just make sure yes, its results deaf. Okay. Right. So that's all for our initial javascript, we've set up some global variables. And now in the next podcast we'll actually start working on coding the search but the function, the search function. Right. So see you in the next podcast
47 Views 0 Likes 0 Comments

In this Cast we will get our API key and set up a few global variables in the script.js file.

Leave a comment (supports markdown format)