hi, using a screen reader jaws 2026. using windows 11 pro. using google chrome, up to step 59 and it is not liking the reset the text content of the items to 0. have put them from a “0” to 0. but fcc is extremely picky. so, is it my code, logic, a dom timing issue, or something stupid i am doing. not able to see if theres any hidden characters or hidden trailing spaces as totally blind and rely on speech. so will paste my html, and js and the error and the link to the step. maybe ray can help me out. found him kind and curteous. and so heres my code. can any one help me out, so close to finishing this project, but fcc testing system could be more screen reader friendly. and you could have more plain english messages, isntead of vague message. could make the testing system a whole lot better for lbind developers. did suggest some options a while back, but they were ignored either by quincy him self or the mods. so wont suggest any more accessibility improvements as you dont listen to blind people or blind developers. defintely rant over. pasting 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>
java script:
// -----------------------------
// 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;
totalNumberOfItems.textContent = 0; // ✅ Important for FCC
// -----------------------------
// 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 },
];
// -----------------------------
// Render Product Cards
// -----------------------------
products.forEach(p => {
dessertCards.innerHTML += `
<div class="dessert-card">
<h2>${p.name}</h2>
<p class="dessert-price">$${p.price}</p>
<button id="${p.id}" class="btn add-to-cart-btn">Add to cart</button>
</div>
`;
});
// -----------------------------
// Shopping Cart Class
// -----------------------------
class ShoppingCart {
constructor() {
this.items = [];
this.taxRate = 8.25; // percent
}
addItem(id) {
const product = products.find(p => p.id === id);
this.items.push(product);
this.renderCart();
totalNumberOfItems.textContent = this.items.length; // ✅ important
this.updateTotals();
}
renderCart() {
productsContainer.innerHTML = "";
const counts = {};
this.items.forEach(item => {
counts[item.id] = (counts[item.id] || 0) + 1;
});
Object.keys(counts).forEach(pid => {
const product = products.find(p => p.id === Number(pid));
productsContainer.innerHTML += `
<div class="product">
<p>${counts[pid]}x ${product.name}</p>
<p>$${product.price}</p>
</div>
`;
});
}
clearCart() {
this.items = [];
productsContainer.innerHTML = "";
totalNumberOfItems.textContent = 0; // ✅ FCC requires number 0
cartSubTotal.textContent = "$0.00";
cartTaxes.textContent = "$0.00";
cartTotal.textContent = "$0.00";
}
updateTotals() {
const subtotal = this.items.reduce((sum, item) => sum + item.price, 0);
const tax = +(subtotal * (this.taxRate / 100)).toFixed(2);
cartSubTotal.textContent = `$${subtotal.toFixed(2)}`;
cartTaxes.textContent = `$${tax.toFixed(2)}`;
cartTotal.textContent = `$${(subtotal + tax).toFixed(2)}`;
}
}
// -----------------------------
// Instantiate Cart
// -----------------------------
const cart = new ShoppingCart();
// -----------------------------
// Event Listeners
// -----------------------------
[...document.getElementsByClassName("add-to-cart-btn")].forEach(btn => {
btn.addEventListener("click", e => cart.addItem(Number(e.target.id)));
});
cartBtn.addEventListener("click", () => {
isCartShowing = !isCartShowing;
showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
cartContainer.style.display = isCartShowing ? "block" : "none";
});
clearCartBtn.addEventListener("click", () => cart.clearCart());
error:
You should set the textContent of the totalNumberOfItems element to 0 .
link to the step:
:
