Recipe Finder

Inspiration

Amid the pandemic, society has been on a constant search for activities to do while staying at home. Of the many things people have started try, relying more heavily on home cooked meals is one undeniable change. This inspired us to build "Recipe Finder", a simple, web application that streamlines the process of finding easy-to-make, enjoyable meals.

What it does

When a user inputs a list of ingredients they currently have at hand into "Recipe Finder", they are taken to collection of resulting recipes that can each be made with those food items only.

How we built it

The concept behind Recipe Finder is similar to that of the CSE 143 3rd Assessment–Search Engine. First, we started our algorithm by taking a personally compiled database of recipes in String format and parses it into a Map made of a String keyset and associated Array values with the keyset representing recipe titles and the Array values representing the ingredients respective to each recipe. The second part of algorithm searches through the Map created and compares the user input to the recipe database. It then outputs the resulting recipe titles in an Array.

To combine the algorithm to the front end of the program, we also used HTML, CSS, and Javascript. When the Welcome page loads and the user inputs their ingredients into the HTML element, the input value is saved in a variable that is passed into the Javascript to be parsed. This String is then split() into an Array and passed into the algorithm explained above. In order to connect these components of our project together, at this point, we converted our Java algorithm into Javascript. After the function outputs the resulting recipes, the user is sent to a new HTML tab that the resulting recipes are appended onto the new page onload of the HTML window using HTML DOM features.

Challenges we ran into

1) Converting the Java to Javascript took us a while because the two languages are quite different in the sense of different API's, that Javascript does not have a Scanner class, and with reference semantics. The algorithm was changed slightly, but the basic idea stayed the same. 2) Ed does not have a debugging option, so we constantly used alert() to access our variable values. Not being able to debug also meant that if the code was wrong in any sense, the web application tester would not display at all. It was also difficult to find mistakes, especially API misapplications. For a long time, one problem we had was using a method to access a Javascript Set() value when Javascript Set() values can only be accessed with an iterator object. 3) Saving the user input from HTML and passing to Javascript. We tried many different solutions but in the end we used HTML DOM features to manipulate the data. We did consider utilizing the Server.java code provided by the assessments, but we did not want to reformat our entire program. 4) Appending Child Nodes onto a new HTML page. We manipulated HTML DOM features in so many ways before realizing that two steps were required to append these Nodes 1) saving the window address to a specific variable 2) utilizing onload = function()

Accomplishments that we're proud of

1) Linking the front and back end 2) Efficient and simple Java algorithm 3) Manipulation to convert from Java to Javascript

What we learned

1) A lot :,)

What's next for Recipe Finder

1) Finding a better way to parse the recipe ingredients especially for plural and singular words 2) Finding a better database, maybe connecting to an online database with HTML data extraction 3) Create a more dynamic second page with links and sample online recipes with the expanded database 4) Adding images to the resulting recipes 5) Bottom signature div is not formatted ideally so if more than 3 recipe results need to be displayed, elements overlap 5) Fixing the use of "var", "let", and "const" and fully understanding the scope of variables and the reference semantics of sets, maps, and arrays in Javascript