This project was to create a website that hosts a both users and recipes that they can cook. This website allows users to favorite recipes, save recipes to cook, hold a pantry for users, and create a shopping list of what ingredients they would need to cook a recipe.
- Click on the green clone button and copy the link.
- Go to the directory you would like this project to live in and type in 'git clone [copied key]'
- Once it is installed, in terminal type in npm install
- If you would like to see the test cases passed, run npm test
- To see the site in action, in terminal type open src/index.html
- There were some issues with some glitches on the first two gifs, that seems to be the gif capture software
For this project, we were given a set of class requirements and data files to use. We were required to come up with our own MVP and design decisions for our app. During the planning stages, we came up with an outline of iterations to have an idea of what we wanted to complete and when. We also created a wireframe of what we wanted our application to look like on the browser. A lot of decisions on the look of the project was decided while designing the site. In addition, we tend to enjoy Javascript more than CSS, so our focus was more on functionality than design.
Taryn - I really enjoyed working on this project! It was definitely a challenge, but one I greatly enjoyed. I felt like I learned a lot, especially about accessing arrays and objects, and iterating over both. I also gained a lot more experience with DOM manipulation, which I really enjoyed. I am also really proud of figuring out how to get the filter and search functions to work. I do think that I need to work on improving my CSS and DOM manipulation because I had so much trouble inserting the data into the HTML to display on the page.
Ben - I loved this project! It was definitely a challenge, but I learned a lot about working with inconsistent data sets, using array iterator methods, and pseudocoding out more difficult functions. I also learned some cool new HTML pieces and some CSS styling for transparent backgrounds. In terms of learning, I would consider this project my best so far. I think I still need to work on making more tests and really testing for every little thing the function does, because I ran into a few errors that were based around the different data that could have been solved with further testing.
- Heart, cooking pot, filter, and pantry icons made by Freepik from www.flaticon.com
- Menu icon made by iconixar from www.flaticon.com
- Arrow icons made by Darius Dan from www.flaticon.com
- Create Recipe and Recipes classes
- Create Test File for Recipe and Recipes classes
- Create Pantry and User classes
- Create Test File for Pantry and User classes
- Set up Basic HTML Layout
- Set up Basic CSS Design
- Set up Event Listeners and Helper Functions in scripts
- DOM Manipulation - recipe images are on site; data can populate site
- Functional; can
- save favorites and recipes to cook
- list what user has in pantry
- display recipe
- list what ingredients are missing from a recipe
- CSS is clean and looks nice
In the future, we would like to add a shopping list button that displays the ingredients needed and the total price for those ingredients for a specific recipe added to the Meals to Cook list. We also want to make the website responsive and compatible with mobile devices. Finally, we want to make clicking on a recipe in Favorite Recipes or Meals to Cook open the recipe card.