Learn Basic OOP by Building a Shopping Cart - Step 19

JavaScript
1

Tell us what’s happening:Hello, I don’t see how to use const to declare the name and price variables

const cartContainer = document.getElementById("cart-container");
const productsContainer = document.getElementById("products-container");
const dessertCards = document.getElementById("dessert-card-container");
const cartBtn = document.getElementById("cart-btn");
const clearCartBtn = document.getElementById("clear-cart-btn");
const totalNumberOfItems = document.getElementById("total-items");
const cartSubTotal = document.getElementById("subtotal");
const cartTaxes = document.getElementById("taxes");
const cartTotal = document.getElementById("total");
const showHideCartSpan = document.getElementById("show-hide-cart");
let isCartShowing = false;

const products = [
  {
    id: 1,
    name: "Vanilla Cupcakes (6 Pack)",
    price: 12.99,
    category: "Cupcake",
  },
  {
    id: 2,
    name: "French Macaron",
    price: 3.99,
    category: "Macaron",
  },
  {
    id: 3,
    name: "Pumpkin Cupcake",
    price: 3.99,
    category: "Cupcake",
  },
  {
    id: 4,
    name: "Chocolate Cupcake",
    price: 5.99,
    category: "Cupcake",
  },
  {
    id: 5,
    name: "Chocolate Pretzels (4 Pack)",
    price: 10.99,
    category: "Pretzel",
  },
  {
    id: 6,
    name: "Strawberry Ice Cream",
    price: 2.99,
    category: "Ice Cream",
  },
  {
    id: 7,
    name: "Chocolate Macarons (4 Pack)",
    price: 9.99,
    category: "Macaron",
  },
  {
    id: 8,
    name: "Strawberry Pretzel",
    price: 4.99,
    category: "Pretzel",
  },
  {
    id: 9,
    name: "Butter Pecan Ice Cream",
    price: 2.99,
    category: "Ice Cream",
  },
  {
    id: 10,
    name: "Rocky Road Ice Cream",
    price: 2.99,
    category: "Ice Cream",
  },
  {
    id: 11,
    name: "Vanilla Macarons (5 Pack)",
    price: 11.99,
    category: "Macaron",
  },
  {
    id: 12,
    name: "Lemon Cupcakes (4 Pack)",
    price: 12.99,
    category: "Cupcake",
  },
];

products.forEach(
  ({ name, id, price, category }) => {
    dessertCards.innerHTML += `
      <div class="dessert-card">
        <h2>${name}</h2>
        <p class="dessert-price">$${price}</p>
        <p class="product-category">Category: ${category}</p>
        <button 
          id="${id}" 
          class="btn add-to-cart-btn">Add to cart
        </button>
      </div>
    `;
  }
);

class ShoppingCart {
  constructor() {
    this.items = [];
    this.total = 0;
    this.taxRate = 8.25;
  }

  addItem(id, products) {
    const product = products.find((item) => item.id === id);
    product.forEach(({name, price}) => { name, price});
  }
};

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Learn Basic OOP by Building a Shopping Cart - Step 19

2

Hello, there is an issue with your template literals in the forEach loop, also fix your addItem method, then it will be fine( you should have something like this.items.push

3

Two questions

  1. do you remember what destructuring is?

  2. what kind of thing is product? I don’t think you can use a forEach there

You can use a console log to see what product is

4

a forEach can be used

5

No. A forEach should not be used on this step. Double check the instructions for the Step and you’ll see what is expected

6

Hi @kakadhinio

Here is an article on destructuring assignment you may find helpful.

Happy cooding

1 Like
7

You said you don’t think he/she can use a forEach there , i was saying it can , because it can be used to iterate over the products array

8

No, I said that a forEach cannot be used on the variable product. That variable is not an array.

Also, you can’t use a forEach to accomplish this Step. Please click on the link to see the task.

9

the products is not an array is that what you are saying ?

10

Nope. product and products are two different variables. product is not an array.

Please check the Step

11

i have been talking about products variable not product.
Check her question.

12

Yep, checked again and the instructions talk about the product variable and not the products variable. You cannot use forEach to accomplish this Step.

13

Thank you for your indications I solve this problem

2 Likes
14

i do understand you man, the step doesn’t mention that.
What i am saying is, i was talking based on her code snippet(i wasn’t focused on the step)
Do you understand ?

15

In the code in the first post, forEach is called on product. The variable product cannot use forEach and the forEach cannot be used on this Step.