cuisine-with.us

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 Cuisine With Us 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

Cuisine With Us 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. The website is deployed using Heroku and connected to GoDaddy registry domain.

Challenges we ran into

Getting and displaying the data in our webpage was one of the challenge. Using correct CSS is another one which deserves mentioning.

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.