https://github.com/JS-Beginners/grocery-list-project-2 (Hosted on Github)
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.
- DOM manipulations
- forEach loops
- local storage
- CSS manipulation
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.
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.
Time to Code
This project took me about 2 hours to code, including the HTML and CSS.
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