
Hosted Project
https://js-beginners.github.io/grocery-cart-project/Github Source Files
https://github.com/JS-Beginners/grocery-cart-projectJavaScript 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 usingelement.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 asgetElementById()
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
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- If you think you need to see a video solution first, be sure to pick up John's JavaScript Tutorial and Projects Course.
- Add a link to your finished project below!
What You Should See
- 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.
- 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?
Get John's JavaScript Tutorial and Projects Course
How did you create the products css animations, when clicking on the product the box appears to relocate, how did you do that, can you help me with that?