hi. totally blind, using jaws 2026. now up to step 34 of the project, and have to then do the for each for the buttons for the project, but wondering if fcc is having a timing issue and have done a reset of the lesson, done hard refreshes, rewritten the code and it is not passing. so can any one help me out? nd how to get this to pass. what is the code i need to get it to pass. is it my code, my logic or a fcc timing or bug. thanks.
marvin.
ps: pasting the java script code, the error and the link to the step.
java script:
// Step 1–5: Grab DOM elements
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;
// Step 6–12: Products array
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" }
];
// Step 13–30: Render products
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>
`;
});
// Step 31: ShoppingCart class
class ShoppingCart {
constructor() {
this.items = [];
this.total = 0;
this.taxRate = 8.25;
}
addItem(id, products) {
const product = products.find(p => p.id === id);
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach(p => {
totalCountPerProduct[p.id] = (totalCountPerProduct[p.id] || 0) + 1;
});
const currentCount = totalCountPerProduct[product.id];
const countSpan = document.getElementById(`product-count-for-id${id}`);
if (currentCount > 1) {
countSpan.textContent = `${currentCount}x`;
} else {
productsContainer.innerHTML += `
<div id="dessert${id}" class="product">
<p>
<span class="product-count" id="product-count-for-id${id}"></span>${product.name}
</p>
<p>${product.price}</p>
</div>
`;
}
}
}
// Step 32: Instantiate cart
const cart = new ShoppingCart();
// Step 33–34: Use window.onload to make sure DOM is ready
window.onload = function() {
const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
const addToCartBtnsArray = [...addToCartBtns];
// Step 34: forEach on the array (empty callback for now)
addToCartBtnsArray.forEach((btn) => {
// callback intentionally empty for Step 34
});
};
error:
You should use the forEach method on the array you created.
link to the step: