What’s In My Fridge? Tues July 14, 2020 ─ Group Members Nate Kashyap Corey Keith
“What’s In My Fridge” is an easy to use application that grants any novice chef or culinary hobbyist a wide range of delectable recipes made from any of the ingredients found in their fridge. Simply type in the name of your main ingredient, accompanied by any other ingredients you would like to have included in your potential recipes,select the number of recipes you would like to see, hit submit and let the application do the rest. Once the application has done this work users can reset the page add in, change or take away ingredients. Use “What’s In My Fridge” and never find yourself scratching your head about what to cook with what you’ve got ever again! Concept Description—Applications are meant to make it easier for a user to achieve a particular goal. With “What’s In My Fridge”, a variety of recipes can be found, based on the ingredients you would find in your fridge/pantry. Type in the name of an ingredient into the main ingredient box, choose how many recipes you’d like to find, and click to the search button. Refine your search by filling in more ingredient boxes!
We don’t always have the luxury of knowing exactly what we want to cook. We’re either too tired, or too busy to figure things out. That’s why the focus for this app’s development was to make it as easy as possible for the user to figure out what they can cook with what they’ve got in their fridge with as little effort as possible.
1. As a USER, I want to figure out what I can cook with things inside my fridge. 2. As a USER, I don’t want to spend a lot of time doing research. 3. When I am bored of ingredients I can find new recipes for them. 4. As a USER, I am able to dictate how many different recipes I would like to see.
Technologies Used Pen and paper—pseudo coding initial code and dividing parts of the project that we needed to tackle in our MVP VisualStudio—our primary code editor for HTML, CSS, and JS Bootstrap—streamlining our CSS and giving us a basic idea of what our application would look like JQuery—streamlining our JS logic while ensuring an organized documentation during collaboration RapidAPI—for API research and API usage GitHub—for project management and collaboration
Firstly, on GitHub, we created a group repo based on what we learned in class. We set parameters for uploading to the master branch and made sure everyone had access to the repo and knew how to navigate through the Kaban. Through pseudo coding and the User Story, we figured out what we wanted to achieve in our application and what the MVP was. Here we recorded each initial section of the application breakdown in the “Issues” section of the Kaban. Upon breaking down the requirements of the application, we assigned each member a particular section of the application to work on (i.e. Cory to focus on filtering allergies, Kashyap and Nathan figuring out the API call as well as CSS and HTML organization, and Keith on basic JS logic such as having the search button grab the value of the text box etc.) We maintained constant communication through Slack and Zoom, keeping each other updated on progress of our work. We collectively met to troubleshoot each other’s code, and pull from one another as we realized and understood our interdependence with each other.
a. One of our first initial challenges was collaborating in github. We were able to push code up to the master branch, but navigating the collaboration part efficiently will take some time. We ran into conflicts when more than one person pushed code. I believe this was because we had named our Index.html and script.js the same
b. The code itself. As we are still struggling with javascript, starting the project from scratch took us a lot of time. Although having google and past activities to work from, we still struggled with putting all of the syntax together properly. c. Troubleshooting. We are coming to learn that the console can be our best friend in terms of troubleshooting javascript. Naturally, errors will occur, but some of our struggles were figuring out how to fix a null, or undefined syntax error. d. Positioning. Our code will not work properly without proper positioning of code in javascript. There were times when code would not work and, in part, was due to having the syntax in the wrong place within the code. Trial and error is the best way to describe these challenges.
GETTING IT TO WORK! Our first milestone was clicking the submit button and having the API show up in the console, displaying all the necessary information. Clicking the search button and having the recipes appear listed within the HTML. Clicking the clear button and clearing out the input forms back to empty.
Fonts:
font-family: 'Annie Use Your Telescope', cursive; font-family: 'Lemon', cursive;
Application Link: https://llenrocc.github.io/Recipe_API/
Photos used are stock free images from "https://www.pexels.com/search/food/".
https://rapidapi.com/spoonacular/api/recipe-food-nutrition/endpoints
ac032b7765msh7b7ea8d251892bbp18630ejsnfccfef5696ae