Learn Basic OOP by Building a Shopping Cart - Step 24

JavaScript
1

Tell us what’s happening:

my code is not passing i’m stuck and i tried to wrap my right hand side in parenthesis still it does not work

Your code so far

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);
    const { name, price } = product;
    this.items.push(product);

    const totalCountPerProduct = {};
    this.items.forEach((dessert) => {
totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id])+1 || 0;
    })
  }

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn Basic OOP by Building a Shopping Cart - Step 24

2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

Your close.

but this part needs to be inside the parenthesis

hope that helps

4

Hi, I’m currently on this problem. Can you elaborate on this:

totalCountPerProduct[ dessert.id ] = (totalCountPerProduct[dessert.id] || 0 )+1 || 0;

so let’s say that totalCountPerProduct[dessert.id] is undefined and it isn’t found in the object. How does that equal this:

totalCountPerProduct[dessert.id] == undefined
(totalCountPerProduct[dessert.id] || 0 )+1
( 0 ) + 1

is it because an OR operator is a conditional meaning it’ll see what’s false and true? Since dessert isn’t found in the object, it would be false resulting in selecting 0 rather than totalCountPerProduct[dessert.id] which represents true?

5

It’s a bit weird. The logical “or” operator || will return true if any of the conditional expressions evaluates to true, or a truthy value, or will return the last value in the chain, if not.

So the expression (totalCountPerProduct[dessert.id] || 0 ) reduces to (undefined || 0). Since undefined is a falsy value, it skips that and returns the last value, 0.

More info.

6

Correction to myself, it returns the value of the first value that can be evaluated to true

7

sorry to sound dumb since I’m still getting the hang of JavaScript. What do you mean by “the chain”? Since undefined is a false value and it skips it. How do I know what’s in the chain or if I can rephrase that, how can I know what values are in order? I’m assuming the possible values? Such as 0 and undefined or an actual value which gives 1 false value (undefined) and 2 true values ( 0 and the actual value) if that makes sense?

8

I just meant, like if you had several comparisons at once. For example,

( 3 === 5 || 5 === 7 || "" || 4 || 5 )

The above expression will return 4. The “or” operator works left to right, so first 3 === 5 is reduced to “false.” It gets skipped and the next comparison is made. 5 === 7 is reduced to “false,” so it also gets skipped, and the next comparison is made. "" is an empty string, which is considered a falsy value, and is treated as false, so it gets skipped. Next is 4, which is considered a truthy value. This is evaluated as true, and the entire expression is reduced to just 4. It never even gets to 5 in this example. This is something called Short Circuit Evaluation, I believe.

If NONE of the conditionals evaluate as true, then the last value is returned. The below would return 0, even though 0 is a falsy value.

( 3 === 5 || 5 === 7 || "" || 0 )
9

yeah. Thanks for this. I have nothing the same issues with other code challenges, it’s not soo much that the challenge is difficult but the instructions are not very specific

1 Like
10

This is what’s happening to me across the whole JS certification. I lose more time trying to infer what the step is asking me to do than doing the thing itself :sweat_smile:
(Also, some corrections fail because of a parenthesis or a linebreak)
I hope that is because it’s in beta state and it gets better.
Cheers!