JavaScript Grocery List Project 2

Hosted Project

JavaScript Grocery List Project #2 (Hosted on Github Pages)

Source Files

https://github.com/JS-Beginners/grocery-list-project-2 (Hosted on Github)

Project Objective

The objective of this JavaScript grocery list project is to create a list that accepts an item and also saves it to local storage.

If the user tries to submit a blank item, the top container in the project alerts the user to add an item with an “alert” message. If the user successfully adds an item, the top container alerts the user with a “success” message.

Every time an item is added, the item is displayed in the DOM and is also saved to the user's local storage.

If the user clicks the “clear items” button, all items will be removed from the DOM and local storage.

If the user clicks just one of the delete item icons, only that item will be removed.

JavaScript Used

• DOM manipulations
• functions
• eventListners
• forEach loops
• local storage
• CSS manipulation
• conditionals

My Personalize Summary

Today's project came from John Smilga's project course. I wouldn't call this a beginner project because of the shear about of logic and the number of functions involved, but you can do it if you've been coding a while.

I just wanted to watch John's solution today and do a code-along since I've done many of these “todo-like” projects in the past.

I even have another JavaScript grocery list project on this site, though it is slightly different than this one.

So, it felt good passively learning today, instead of grinding over my code.

New Things Learned or Refreshed

As I already stated, it was good watching John's solution. In particular, I wanted to focus on the function that deletes just a single item from the list.

I believed this was the trickiest part of the solution.

The function took advantage of the DOM's event bubbling.

Specifically, when the icon is clicked, the event propagates up and through its parents. So, the key to making this project work is having the list with its icons and title fields contained within a parent.

This way, you can select the event that occurs within the parent to work with.

This project will probably take about an hour to code, assuming you also put together the CSS and HTML. But, you don't have to remember? Just download the files from my repository.

Happy coding!

Time to Code

This project took me about 2 hours to code, including the HTML and CSS.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up John Smilga's JavaScript Tutorial and Projects Course.
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Grocery List Project #2 in action.

Need to see the video solution for this project? Get John Smilga's JavaScript Tutorial and Projects Course Now!