Week 5: Make “Add to Cart” Work

Today you’ll build…

A working “Add to Cart” button. When you click on a product’s button, it will appear in the cart section. This is the first time your site will respond to user input.

You’ll display the item’s name, image, quantity, and price inside the cart section you built in Week 3.

To do that, you’ll learn…

• How to add event listeners in JavaScript
• How to find items in arrays using .find()
• How to push to an array and update the DOM
• How to manage simple state (cart items stored in memory)

By the end of today…

Each student will:

• Add a click event to each “Add to Cart” button
• Store selected items in a cart array
• Update the cart area to show items as they are added

Example flow:

const cart = [];
 
function addToCart(productId) {
  const product = products.find((p) => p.id === productId);
  // TODO: stretch update quantity
  const existingItem = cart.find((item) => item.id === productId);
 
  if (existingItem) {
    existingItem.quantity++;
  } else {
    cart.push({ ...product, quantity: 1 });
  }
 
  updateCart();
}

// TODO: start by grabbing by id then grab all
document.querySelectorAll(".add-to-cart-button").forEach((button) => {
  button.addEventListener("click", () => {
    addToCart(button.dataset.id);
  });
});

Agenda (1 hour total)

Instructor Notes

Setup

• Students should already have:

  • A products array (from Week 4)
  • A cart section (#cart-items, #empty-cart-message, etc.)

• Add data-id="${product.id}" to each “Add to Cart” button

Instructor Live Coding Goals

• Explain what event listeners are and when they run
• Show how to use .find() to locate items in the array
• Render items into the cart using .innerHTML or DOM creation
• Emphasize correct cart structure and data updates

1:1 Mentor Goals

• Every student can click a button and see at least one cart item appear
• Help debug logic around finding items or incorrect IDs
• If ahead: display quantity or total price

Wrap-up and What’s Next

Reinforce:

• You now have a real, working cart
• Items can be added dynamically by clicking — a key part of web interactivity

Preview:

“Next week, you’ll track how many times a product is added, and calculate the total price of the cart.”