Foodie's Corner

Foodie's Corner helps users to search any recipe of their choice and get full information on that along with the Nutritional Analysis of the recipe.

Comment

Inspiration

Whether it is a birthday party, or it is a marriage anniversary, the most integral part of any occasion is delicious food. Now-a-days, one can't imagine any sort of occasion without serving delicious, mouth-watering recipes. The basic idea of Foodie's Corner is inspired from such scenarios. This web application is very user-friendly and easy to use. The user just have to enter the recipe that he/she wants to serve and hit Enter. Our web app will show all the possible recipes based on the user query, their procedures as well as the Nutritional value and the estimated time to prepare the recipe.

What it does

Foodie's Corner is a web application which is built using HTML, CSS, Javascript and API. It shows the recipe details as well as the nutritional content of the recipe entered by the user. If the user does not enter any recipe name before search, an Alert Window pops up which tells the user to enter a recipe first. User does not have to enter the full recipe name, in case he/she forgets it. User can enter a sub-string of the recipe name and search it to get full details of all the recipes that contains that sub-string in their name. Each of the recipes returned by the search result is presented in form of cards. There is a button Get the recipe in each of the cards, on click of which takes the user to the page containing full description to prepare and serve the recipe. Calories, Diet label, Health labels and Estimated time to prepare the recipe are also displayed in each of the cards. If no data is returned by the search query, then "No data found" text is shown on the page.

How we built it

It is built using HTML, CSS, Javascript and Edamam API to get the recipe data.

Challenges we ran into

Firstly, getting the data in JSON format and display it in out webpage in proper format was one of the challenge. This is my first experience using Postman, so it was a challenge to create Collections and add meaningful and proper requests in it. Making the website responsive was one of the challenge which helped me a lot to learn more about some CSS properties. Lastly, I also learned about deploying web application to Heroku.

Accomplishments that we're proud of

The required data is successfully fetched from the API and is displayed in the web page. It also gets updated with respect to the user search query. In short, the web app works exactly as planned.

What we learned

I have learned to use Postman to create collections. Next, I get to know a lot more about some CSS properties. I also learned about deploying web application to Heroku.

What's next for Foodie's Corner

I will definitely study more about other APIs available and use them in web applications.

Built With

Share this project:

Updates