Github Source Fileshttps://github.com/JS-Beginners/welcome-message
- DOM Manipulation
- Control Structures
- event propagation
Project Description/SummaryThis 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.
//delete one item
let parent = event.target.parentElement.parentElement;
let text = event.target.parentElement.previousElementSibling.textContent;
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 CodeThis 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.
What to Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
- Add a link to your finished project below!
What You Should See
- You should be able to add an item to your cart.
- Once an item is added, you should get feedback by means of a green alert status.
- If you try to add an item that doesn't exist, you should get a red alert status.
- You should be able to delete one or all items.
- Whatever you don't delete should persist by means of local storage.
Need to see the video solution for this project?