Build a Recipe App with Spoonacular API: Part One

JavaScript API Web Development

English (Auto-generated)

in this code cast series, we'll be building a small recipe app and let's take a look at the app that we're going to be building. And this is a small web app. So when a user types in something here in the search um input box and they click on the search button, the fetch method is going to go and fetch some data from the U. R. L. And we're going to use the then promised handlers to handle this data and display it on the web page. So out here we searched for cake and then pressed search and out here now on the web page you can see that we have some random cake dishes. And clicking on the heading link for any of these is going to take you to a page with the food items, recipe. So let's go over some of the general steps that we're going to be doing now. We're going to be setting up the input element and button element with whom a user interacts with in html. And this is already done here in html. We have our input and our text, we have our input type physical to text and the button element. And then we'll code the search function. So the button has an on click attribute whose value is the search function will quote the search function which will execute when some text is typed in the input box and the search button is clicked. And what is happening is that the fetch method will be called from within this search function which takes as an argument, the U. R. L. From where we are fetching our data and it's going to return the data which which is all the dishes and recipes that correspond to the users search input. And once the data is fetched we'll build the dome and display all the headings and images of the recipe um recipes like we've done here and we'll also make the heading a link so that when someone clicks on this uh it takes them to a page with that recipe for the dish. Okay. And this is a general overview. And for the last step where we have, when someone clicks on a link and it takes them to a new web page, we will call another function. And inside of this function will again use fetch and grab the U. R. L. For the particular recipe. So that's all about this uh section of the code cast where we've briefly gone over what exactly we're going to be doing. And let's move on and go to the next podcast where we will briefly see what our html and CSS look like.
387 Views 0 Likes 0 Comments

Let's make a recipe app using Fetch() and Spoonacular's API. In our app when someone searches for a certain dish or ingredient they will be returned wi...

Leave a comment (supports markdown format)