VanillaCartJS - ES6 JavaScript Shopping Cart

Start with a starter front-end project for vanilla cart js, with no back end and product data lives in html (index.html), ready to edit prices and images.

Enable strict mode to catch errors, then listen for clicks on cart buttons using data attributes, querySelector and arrow functions to collect product image, name, and price.

Learn how to add products to a shopping cart with VanillaCartJS, render items using template strings and insertAdjacentHTML, manage a cart array, and prevent duplicates.

Learn to implement quantity controls in a vanilla ES6 shopping cart: set initial quantity to 1 and wire increase, decrease, and remove buttons with DOM event listeners.

Master managing a vanilla cart by decreasing quantities and removing items with safe checks, DOM updates, and CSS animations, including preventing below-one quantities and persisting cart state in local storage.

Save the cart to local storage by stringifying the cart array with JSON.stringify under a key, then load it with JSON.parse on startup and update on changes.

Refactor the vanilla cart code by extracting repeated blocks into new functions, passing product and cart button elements to improve readability and enable future PayPal checkout and clear cart features.

Add a clear cart action and a single cart footer, update the cart array and local storage on item removal, and prepare a PayPal checkout flow.

Display the cart total on the PayPal checkout button and build a PayPal form to pass items, amounts, and quantities for checkout.