hi, no help button for this step. so be gentle. totally blind and using a screen reader jaws, windows 11 pro, google chrome. so up to step 51, and it is not passing, have tried researching on google. looking at similar code, but not using it, for comparison. so the code looks the same or very similar. so wondering if theres hidden characters, hidden trialling spaces, unless my code is not right or the logic is corrupted or not right. so it is not passing and have done multiple resets, multiple refreshes, rewritten the function a few times, but not passing, so maybe ray can help me out. he has been kind and curteous. so if any one can help me out, and the forum is not the most friendly screen reader forum, so trying my best to get the code formatted correctly on the forum, control m seems to work with jaws 2026. so will paste html my htmk, js and the error and the link to the step. using the fcc editor and then pasting once passed to vs code for a backup local copy. once i lost a whole project years ago and did not have a backup copy, so learnt my lesson the first time.
thank you.
marvin.
ps: pasting code below.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>freeCodeCamp Shopping Cart</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header>
<h1 class="title">Desserts Page</h1>
</header>
<main>
<button id="cart-btn" type="button" class="btn">
<span id="show-hide-cart">Show</span> Cart
</button>
<div id="cart-container">
<button class="btn" id="clear-cart-btn">Clear Cart</button>
<div id="products-container"></div>
<p>Total number of items: <span id="total-items">0</span></p>
<p>Subtotal: <span id="subtotal">$0</span></p>
<p>Taxes: <span id="taxes">$0</span></p>
<p>Total: <span id="total">$0</span></p>
</div>
<div id="dessert-card-container"></div>
</main>
<script src="./script.js"></script>
</body>
</html>
javascript:/* === 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"); // <-- FCC TESTS THIS
const cartTotal = document.getElementById("total");
const showHideCartSpan = document.getElementById("show-hide-cart");
let isCartShowing = false;
/* === PRODUCTS === */
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" }
];
/* === 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>
`;
});
/* === SHOPPING CART CLASS === */
class ShoppingCart {
constructor() {
this.items = [];
this.taxRate = 8.25;
this.total = 0;
}
addItem(id) {
const product = products.find(p => p.id === id);
if (!product) return;
this.items.push(product);
const exists = document.getElementById(`dessert${id}`);
if (exists) {
const countSpan = document.getElementById(`product-count-for-id${id}`);
const sameItems = this.items.filter(item => item.id === id).length;
countSpan.textContent = `${sameItems}x `;
} else {
productsContainer.innerHTML += `
<div id="dessert${id}" class="product">
<p><span id="product-count-for-id${id}"></span>${product.name}</p>
<p>$${product.price}</p>
</div>
`;
document.getElementById(`product-count-for-id${id}`).textContent = "1x ";
}
this.updateCartDisplay();
}
calculateSubtotal() {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
calculateTaxes(subtotal) {
return parseFloat(((this.taxRate / 100) * subtotal).toFixed(2));
}
updateCartDisplay() {
const subtotal = this.calculateSubtotal();
const taxes = this.calculateTaxes(subtotal);
this.total = subtotal + taxes;
/* FCC TESTS THESE LINES — MUST USE textContent */
cartSubTotal.textContent = subtotal.toFixed(2);
cartTaxes.textContent = taxes.toFixed(2); // <-- IMPORTANT LINE
cartTotal.textContent = this.total.toFixed(2);
}
}
/* === INIT CART === */
const cart = new ShoppingCart();
/* === EVENT LISTENERS === */
document.querySelectorAll(".add-to-cart-btn").forEach(btn =>
btn.addEventListener("click", e => {
const id = Number(e.target.id);
cart.addItem(id);
totalNumberOfItems.textContent = cart.items.length;
})
);
cartBtn.addEventListener("click", () => {
isCartShowing = !isCartShowing;
showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
cartContainer.style.display = isCartShowing ? "block" : "none";
});
clearCartBtn.addEventListener("click", () => {
cart.items = [];
productsContainer.innerHTML = "";
totalNumberOfItems.textContent = "0";
cart.updateCartDisplay();
});
error:
You should access the textContent property of the cartTaxes element.
link to the step: