Github Source Fileshttps://github.com/JS-Beginners/grocery-cart-project
- DOM Manipulation
- Control Structures
- Immediately Invoked Function Expressions
New Things Learned or RefreshedI didn't learn much of anything new during this project with the exception of using the .reduce() method. It was interesting to see it in use since before this project I only learned about it in a previous tutorial. I was refreshed on the clever ways the DOM can be manipulated to retrieve different parts. For example, you can start in the inner most HTML element and select its parent by using
element.parentElement, or you can select it's sibling by using
element.parentElement.previousElementSibling. The list of other properties used on elements for DOM manipulation can be found on the MDN Element Web API page.
Time to CodeThis took about an hour to code. I watched John's solution for the most part and coded along as he wired up the project.
Biggest Take Away(s)Retrieving elements from the DOM take practice, practice, practice. Going beyond the basic selections such as
querySelector()can be very beneficial on your coding journey. So, be sure to check out the MDN Element Web API page to practice using the different properties to select different elements on your page.
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
- Added items will appear in the cart section in the top right-hand corner of the website.
- The total amount of the added items will show in the running total.
Need to see the video solution for this project?