As people who enjoy baking know, it's very frustrating to sort through multiple websites to find the perfect recipe. Having a resource that allows the user to check the ingredients of multiple recipes within seconds without ever leaving the page is very convenient.

What it does

Our website links to an API with over 350,000 recipes and generates an ingredient list complete with amounts. This quick, easy feature allows people, such as those with allergies, to compare the ingredients to their special needs. In addition, because the final table also lists amounts, the function is able to help those with more general intolerances (such as a lactose intolerance). Personally, my family has a history of poor gallbladder function which creates a limit on the amount of pork, cheese, eggs, and other foods high in fat we are able to consume. This Website quickly evaluates recipes for individuals.

How we built it

Beginning with basic HTML code, we added a function in Javascript to connect an API and generate a separate table of ingredients. We then edited the original code with CSS to make the overall affect much more visually pleasing.

Challenges we ran into

Initially, the idea itself was too vague and led to hours of pointless work. In addition, lack of experience made choosing and properly executing the right code difficult. Once the foundation was laid, there came the process of finding and linking an appropriate API and generating a table using the information provided.

Accomplishments that we're proud of

Overcoming our obstacles and lack of experience to create an attractive, user-friendly, Website complete with three different languages was no easy feat and to have accomplished all that we did in 24-hours is a source of pride for us.

What we learned

Not only did we get our first taste of Javascript, we were also able to delve far deeper into both HTML and CSS than ever before. Using the API effectively and collaborating through GitLab were two new skills that will be useful as we continue to code.

What's next for Recipe Ingredients Generator

Linking to other APIs from stores such as Walmart, Giant Eagle, or Acme and allowing the user to generate a shopping order within those Websites is our plan for the future of our Website.

Built With

Share this project: