As someone who enjoys cooking, I have always wanted an app that would help me get rid of whatever I have left in the fridge or offer inspirations on what to cook for dinner. So I thought it’d be cool to actually try to make it myself.
I started the project first by looking at all the APIs that I can use, and eventually found a food API called Spoonacular. The API allows me to find recipes by ingredients and pull recipes from third-party websites. After finding the perfect API, I sketched out what I want my pages to look like and quickly typed down my pseudocode.
I imagined that the sketch would have a search bar and button as user input, and that input will be passed into the URL of the API so that the recipe result can match the user’s input. I also planned to add a picture of the recipe from the API and show ingredients used/needed so users will know what they can use from their pantry and what they need to buy. Initially, I thought I’d only need one class to hold and display the API. But as I started working on the project, I realized that I will need a second URL to pull recipe data from a third-party website. So I decided to give two results instead of one.
My first problem popped up when I was trying to load images from the JSON file. I made the mistake of not preloading the image, and as a result, my photos would not load or show up at all. I reached out to Scott and was advised to use preload and callback function when loading images. The issue was immediately resolved, and I moved on to build other elements of the sketch.
I then made the user input elements and have the input result passed into the URL of the API. Later, just as I thought everything was going smoothly, I realized that my JSON file would not load properly in preload now that it became a two-step process (user input-then load). Once again, Scott pointed out that I made the same mistake of not using callback and showed me how to use call back with an anonymous function so that the JSON data can be loaded into the constructor.
After encountering the same problem twice, I paid more attention to elements that need to be preloaded & callback. Finally, I was able to add another two classes into the sketch, which will be able to open external pages if the user wants to read more about the recipe. At last, I added my finishing touches, fixed up some colors, and cleaned up my sketch.
If I had more time, I’d add more visual elements such as different fonts and drop shadows for display windows. One thing that I still need to work on more is displaying an array of strings and make sure that they are equally spaced. I was not able to fully understand how I can use a for loop to achieve that. More ambitiously, I would love to turn this into a mobile-friendly sketch and actually start using it to plan out my meals!
