hi, a screen reader user, step 28 is not passing. and i ahve tried multiple angles. have reset the lesson, have done refreshes, even rewrote the function two or three times. have tried for the last 24 hours and the editor is not the most friendly for screen readers with their vague error messages. so whats the code to get this to pass, have done research and tried to look at other code samples, to see if my code is wrong. so have tried and just fed up, it does not pass. so can some one show me how to get it to pass, not to do it for me, but the accessibility hurdles i am facing using a screen reader. do want to learn, this is the worst step i have come across. so strict and picky, and how to get htis to work, so can you sho me how to get it to pass. pasting my vs html, js and the error message below. can any one help me out, are there other blind people on this forum or doing the course, have they encountered this accessibility hurdle. and how they got it to work, so banging my head against the brick wall, but no bricks falling, can any one help me out asap. or have to wait another day just because i live in australia. sorry for grovelling or being a pain, maybe you want me to go away na m,maybe just a pain. so rant over. so have tried and tried and going around in circles and totally frustrated. have tried everything else i know, but not passing, and so this is going to take me a month or two with accessibility barriers, as another 32 steps to go. so can any one help me? sorry for being a pain!
thank you.
marvin.
ps: pasting my code below and the error message and also trying to use control m for preformatted code but the forum is not easy to navigate with a screen reader.
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" />
<style>
/\* Quick basic styling \*/
body { font-family: Arial, sans-serif; padding: 20px; }
.dessert-card { border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
.btn { padding: 5px 10px; cursor: pointer; }
#cart-container { display: none; margin-top: 20px; border: 1px solid #888; padding: 10px; }
</style>
</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.00</span></p>
<p>Taxes: <span id="taxes">$0.00</span></p>
<p>Total: <span id="total">$0.00</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");
const cartTotal = document.getElementById("total");
const showHideCartSpan = document.getElementById("show-hide-cart");
let isCartShowing = false;
// =======================
// 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" }
];
// =======================
// SHOPPING CART CLASS
// =======================
class ShoppingCart {
constructor() {
this.items = [];
this.taxRate = 8.25;
}
addItem({ name, id, price, category }) {
this.items.push({ name, id, price, category });
let currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
if (!currentProductCountSpan) {
currentProductCountSpan = document.createElement("span");
currentProductCountSpan.id = `product-count-for-id${id}`;
currentProductCountSpan.textContent = "1";
const p = document.createElement("p");
p.className = "cart-item";
p.appendChild(currentProductCountSpan);
p.append(` ${name}`);
productsContainer.appendChild(p);
} else {
currentProductCountSpan.textContent = parseInt(currentProductCountSpan.textContent) + 1;
}
} // <-- CLOSE addItem
updateTotals() {
const subtotal = this.items.reduce((sum, item) => sum + item.price, 0);
const taxes = subtotal * this.taxRate / 100;
cartSubTotal.textContent = `$${subtotal.toFixed(2)}`;
cartTaxes.textContent = `$${taxes.toFixed(2)}`;
cartTotal.textContent = `$${(subtotal + taxes).toFixed(2)}`;
totalNumberOfItems.textContent = this.items.length;
}
clearCart() {
this.items = [];
productsContainer.innerHTML = "";
cartSubTotal.textContent = "$0.00";
cartTaxes.textContent = "$0.00";
cartTotal.textContent = "$0.00";
totalNumberOfItems.textContent = "0";
}
}
// =======================
// CREATE CART INSTANCE
// =======================
const cart = new ShoppingCart();
// =======================
// GENERATE DESSERT CARDS
// =======================
products.forEach(product => {
const card = document.createElement("div");
card.className = "dessert-card";
card.innerHTML = `
<p>${product.name} - $${product.price.toFixed(2)}</p>
<button id="product-${product.id}" class="add-to-cart-btn btn">Add to Cart</button>
`;
dessertCards.appendChild(card);
});
// =======================
// EVENT LISTENERS
// =======================
dessertCards.addEventListener("click", e => {
if (e.target.classList.contains("add-to-cart-btn")) {
const productId = parseInt(e.target.id.replace("product-", ""));
const product = products.find(p => p.id === productId);
cart.addItem(product);
cart.updateTotals();
}
});
clearCartBtn.addEventListener("click", () => {
cart.clearCart();
});
cartBtn.addEventListener("click", () => {
isCartShowing = !isCartShowing;
cartContainer.style.display = isCartShowing ? "block" : "none";
showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
});
error message:
You should remove the undefined from your truthy expression.
