Recipe App JavaScript Project

Hosted Project

https://js-beginners.github.io/recipe-app/

Github Source Files

https://github.com/JS-Beginners/recipe-app

The recipe app project was the capstone project in Andrew Mead's, The Modern JavaScript Bootcamp course. The challenge was to put together an app that used the features from both the Todo and the Notes app built earlier in his course. Since this was the first “real app” I built by myself (no tutorial solution given), I found myself going back to different parts of the course to refresh myself on how to do things such as use external libraries, use the Array filter method, and use the Array forEach loop.

Unfortunately, I used a lot of duplicate code. In fact, instead of using one page for the editing like Andrew did in his Todo app, I used one page for adding recipes and another page for editing the recipes. I felt this gave a better user design experience. 

New things learned or refreshed

I didn't learn any new JavaScript features during this project since it used pieces of the two prior apps. But it definitely challenge me to use what I had already learned.

Time it took to code

Since I'm writing this post a little over a month after finishing this project, I can't really remember exactly how long of continuous coding it took me to finish it out. I do know it took me at least a full day, however. 

Biggest take away

I think my biggest take away from this project was it can be a pain to host files on github pages if you're new at it. I learned that if you don't use the root directory file path in your files when creating your pages ( i.e. ./ for your index.html file and ./css/styles.css for your CSS files in a folder off the root directory path), github will host your app in its default directory and you'll be trying to figure out why nothing works!

Your Turn!

What to accomplish

1. A user should be  able to add new recipes to his Recipe App.
2. When the user clicks on ‘add recipe', he should be able to add a new recipe on a separate page.
3. The user should be able to add a ‘recipe name', a place for the directions to make the recipe, and be able to add a list of ingredients.
4. The user should be able to check a checkbox to indicate whether or not he has the ingredient in stock.
5. If the user mistakenly adds an ingredient, he should be able to delete it.
6. Once back on the main page of the app, the user should be able to use the ‘Search' function to filter through his list of recipes.
7. Clicking on a recipe should allow the user to edit and then delete the recipe, if necessary.
8. On the home page, there should be a summary statement for each recipe that indicates whether the user has ‘none', ‘some', or ‘all' of the ingredients.
9. The app should also save items to local storage.
10. Add a link to your finished project below!

Unfortunately, there's no video solution to this project. But everything you need to know to put this project together is taught in Andrew Mead's Modern JavaScript Bootcamp Course. Get it now!

Once you complete this project, be sure to add it to the comment area below. We'd love to see it!

Need to see the video solution for this project? Get Andrew's The Modern JavaScript Course Now!