So I started by looking first for an API I could use for any project idea and I stumbled upon Spoonacular API, [https://spoonacular.com/food-api]. This API has many different end points that could be used for different projects. (*Possibly more projects to come using this API). However for this project, I used two of their end points.
I used their “Get Dish Pairing for Wine” end point where you type in a type of wine (ex. Malbec, Pinot Grigio, Rose Wine, … etc) and the API will return a couple of different dishes that would pair nicely with that wine. The second end point I used was “Get Wine Pairing” where you type in a dish name (“steak”), or an ingredient name (“salmon”), or a cuisine (“Italian”) and it will return a couple of different wines that would go well with that food given.
So I created an input field where you get the value of what was typed into the input field. Then I added that value to the url of the end of both of the end points. Each one is an AJAX call in their own component. I then put both components into a ternary operator. Whichever one returns JSON info that is not an error becomes the data that is shown on the web page because I created variables looking for certain info in the JSON that are not errors. So the one that returns info that is able to populate the variables then that gets passed down into another component that is responsible for creating a paragraph element with the JSON information. Finally the app re-renders and populates the info on the web page for the viewers to see.
Top comments (0)