JavaScript Grocery List Project

Hosted Project

https://js-beginners.github.io/welcome-message

Github Source Files

https://github.com/JS-Beginners/welcome-message

JavaScript Used

• DOM Manipulation
• Control Structures
• Array.forEach()
• Array.filter();
• JavaScript CSS Manipulation
• eventListeners
• event propagation

Project Description/Summary

This project involves creating a grocery list that uses local storage to save items.  When an item is added you will receive feedback using the Bootstrap alert-danger or the alert-success classes. This project also uses event propagation to transverse the DOM.

New Things Learned or Refreshed

I've stepped away from JavaScript for about a month because I was caught up at work. So, it was good to get back into the grove of coding again. Most all of this project was a refresh for me. This time, however, it was good have my memory refreshed on how event propagation works in JavaScript. If you follow the hosted project and then add an item to the cart, you'll see that each item has a trash can icon. When you click on the trash can icon, it actually has a few parent elements. Using the parent elements is how the list items are accessed. Specifically, the code is this: //delete one item listItems.addEventListener('click', function(event){ if(event.target.parentElement.classList.contains('remove-icon')){ let parent = event.target.parentElement.parentElement; listItems.removeChild(parent); let text = event.target.parentElement.previousElementSibling.textContent; clearSingle(text); } }); This event listener listens for a click on the trash icon, which has a parent element with a class of remove icon. Once this item is retrieved, its parent..and the parent of its parent…is then put into the parent variable. This allows for the remove of the entire element. Pretty clever if you ask me. he other thing I was refreshed on was the use of localStorage. It's not complicated once you learn it, but it's easy to forget if you don't use it. So, I'm glad I looked at this again.

Time to Code

This took about two hours to code.  I watched John's solution for the most part and coded along as he wired up the project.

Biggest Take Away(s)

None this project.

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's JavaScript Tutorial and Projects Course.
5. Add a link to your finished project below!

What You Should See

1. You should be able to add an item to your cart.
2. Once an item is added, you should get feedback by means of a green alert status.
3. If you try to add an item that doesn't exist, you should get a red alert status.
4. You should be able to delete one or all items.
5. Whatever you don't delete should persist by means of local storage.

Remember, to see the project work in full, visit the hosted project above. Otherwise:

Need to see the video solution for this project?

Get John's JavaScript Tutorial and Projects Course