Build a Shopping Cart - Step 30

JavaScript
1

hi totally blind using jaws 2026, windows 11 pro, google chrome. up to step 30. of this project. now it is not passing step 30. so will explain whats happening. create 2 paragraph tags in the product container. but it is not passing, have researched online to understand. looked at some example code, and looks the same or similar. it is not passing, and fcc system should be more forgiving and more screen reader friendly. i know i am the only blind person on the forum, trying my best and want to learn, so how to get this to pass. and what code to use to get it to pass, and why is it so strict and what is it actually looking for? pasting my java script code, the error and the link to the step. so can you help me out? i also tried resetting the lesson, hard refresh of the syste, and rewrote the function a few times, but it is not passing, so can any one help?

driving me crazy.

marvin.

ps: pasting below.

java script:

  // Step 1-5: Grab DOM elements
const cartContainer = document.getElementById("cart-container");
const productsContainer = document.getElementById("products-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");

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

// Step 13-30: Render products (Step 30 requirement)
products.forEach(({ name, price }) => {
  const productDiv = document.createElement("div");

  const pName = document.createElement("p");
  pName.textContent = name;

  const pPrice = document.createElement("p");
  pPrice.textContent = `$${price}`;

  productDiv.appendChild(pName);
  productDiv.appendChild(pPrice);

  productsContainer.appendChild(productDiv);
});

// Step 20-29: ShoppingCart class
class ShoppingCart {
  constructor() {
    this.items = [];
    this.total = 0;
    this.taxRate = 8.25;
  }

  addItem(id, products) {
    const product = products.find(item => item.id === id);
    this.items.push(product);

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

    const currentProductCount = totalCountPerProduct[product.id];
    const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);

    if (currentProductCount > 1) {
      currentProductCountSpan.textContent = `${currentProductCount}x`;
    } else {
      productsContainer.innerHTML += `<div id="dessert${id}"></div>`;
    }
  }
}

error:
You should add two p elements inside your div element.

link to the step:

2

Hi @BlindVisionMan

You modified the start code, in ways you were not ask to do.

One of them is changing the variable for the .forEach() method from dessert to item

The other is change the ternary to an if / else statement.

The third change is removing the class attribute from the div element.

Please reset the step to restore the seed code.

For this step, add two p elements inside the div element.

Inside the second p element, add the price variable. Remember to use template literal syntax, so JavaScript knows it is a variable and not text.

Happy coding

3

hi, not passing, so how to get it to pass. using a screen reader, so an extra challenge and then vague messages. so how to get it to pass and what code do i use. and also will [aste the java script and the error.
marvin.

ps: pasting below.

java script

// Step 1–5: Grab DOM elements
const cartContainer = document.getElementById(“cart-container”);
const productsContainer = document.getElementById(“products-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”);

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

// Step 13–30: Cart array required by FCC
let cart = [ ];

// Step 13–30: Render desserts (exactly as FCC expects)
desserts.forEach((dessert) => {
const card = document.createElement(“div”);
card.classList.add(“dessert-card”);

const p1 = document.createElement(“p”);
p1.textContent = dessert.name;

const p2 = document.createElement(“p”);
p2.textContent = `${dessert.price}`;

card.appendChild(p1);
card.appendChild(p2);

productsContainer.appendChild(card);
});

., it is still not passing, did try to then follow your steps and suggestions, fcc is being very picky and then added challenge of using a screen reader and vague messages. so will paste the error code and my vs code below. so how to get step 30 to pass, tried for a few hours, reset the lessons, hard refreshes, even rewrote the function a fourth time, and now still not passing, so how to get it to pass, and what code do i use to get it to pass. so can you help. this is very frustrating, especially when i cannot see and relying on speech alone. help!
thank you.
marvin.
ps: pasting the code and my error message below. still hitting a brick wall.

javas script:// Step 1–5: Grab DOM elements

const cartContainer = document.getElementById(“cart-container”);

const productsContainer = document.getElementById(“products-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”);

// Step 6–12: Desserts array

const desserts = \[

{ id: 1, name: “Vanilla Cupcakes (6 Pack)”, price: 12.99 },

{ id: 2, name: “French Macaron”, price: 3.99 },

{ id: 3, name: “Pumpkin Cupcake”, price: 3.99 },

{ id: 4, name: “Chocolate Cupcake”, price: 5.99 },

{ id: 5, name: “Chocolate Pretzels (4 Pack)”, price: 10.99 },

{ id: 6, name: “Strawberry Ice Cream”, price: 2.99 },

{ id: 7, name: “Chocolate Macarons (4 Pack)”, price: 9.99 },

{ id: 8, name: “Strawberry Pretzel”, price: 4.99 },

{ id: 9, name: “Butter Pecan Ice Cream”, price: 2.99 },

{ id: 10, name: “Rocky Road Ice Cream”, price: 2.99 },

{ id: 11, name: “Vanilla Macarons (5 Pack)”, price: 11.99 },

{ id: 12, name: “Lemon Cupcakes (4 Pack)”, price: 12.99 }

\];

// Step 13–30: Cart array required by FCC

let cart = [ ];

// Step 13–30: Render desserts (exactly as FCC expects)

desserts.forEach((dessert) => {

const card = document.createElement(“div”);

card.classList.add(“dessert-card”);

const p1 = document.createElement(“p”);

p1.textContent = dessert.name;

const p2 = document.createElement(“p”);

p2.textContent = \`${dessert.price}\`;

card.appendChild(p1);

card.appendChild(p2);

productsContainer.appendChild(card);

}

error:

You should add two p elements inside your div element.

4

Hi, Marvin! I see good progress here, congrats!

In the code you shared I dind’t find the requested code you needed to write to pass the task.
And as Teller mentioned, you modified the given code.

So, the first, please reset the step.

In the initial code you have a div element, the opening tag is on line 127, here it is:

<div id="dessert${id}" class="product">

Line 128 is empty and the closing tag of this div is on the 129th line.

You need to place two paragraphs on the 128th line, between the opening and closing tags.

In the second p element you need to place the price variable.
As Teller mentioned earlier, you will need to use template literal.

For example:
${exampleVariableName}

So in the end your second p element will look like this:
<p>${exampleVariableName}</p>

Hope this helps, if you have any further questions, let us know