Grocery Cart JavaScript Project

Hosted Project

https://js-beginners.github.io/grocery-cart-project/

Github Source Files

https://github.com/JS-Beginners/grocery-cart-project

JavaScript Used

• DOM Manipulation
• Control Structures
• Array.forEach()
• JavaScript CSS Manipulation
• eventListeners
• Immediately Invoked Function Expressions

Project Description/Summary

This project involves wiring up the cart section of the grocery store project. Wiring up the search filter of this grocery store eCommerce website was done in the filter JavaScript project earlier this year.

New Things Learned or Refreshed

I 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 Code

This 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 getElementById() and 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.

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. In the cart section of the website, when you click on a given cart button, a JavaScript alert should pop up, letting you know that your item was added.
2. Added items will appear in the cart section in the top right-hand corner of the website.
3. The total amount of the added items will show in the running total.

Note that this project only wires up the cart. To work on the search functionality, see the previous JavaScript filter project.

Need to see the video solution for this project?

Get John's JavaScript Tutorial and Projects Course