JavaScript Algorithms and Data Structures (Beta) - Step 13

[smykes]

Describe the Issue

A button id is set to a number, which is not valid HTML.

Affected Page

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-basic-oop-by-building-a-shopping-cart/step-13

Your code

const products = [
  {
    id: 1,
    name: "Vanilla Cupcakes (6 Pack)",
    price: 12.99,
    category: "Cupcake",
  },
]

products.forEach(({ name, id, price, category }) => {
  dessertCards.innerHTML += `
    <div class="dessert-card">
      <h2>${name}</h2>
    </div>
    <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>
  `;
});

Expected behavior

The id attribute for the button with the class of btn add-to-cart-btn should likely follow best practices and not have an id that begins with a number.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

Screenshots

No response

System

• Device: [Laptop]
• OS: MacOS 12.7.4
• Browser: Brave
• Version: [e.g. 22]
• Version 1.65.130 Chromium: 124.0.6367.159 (Official Build) (x86_64)

Additional context

The products array has been shortened in order to make the code more legible in the Your Code section.

[jdwilkin4]

Here are the new ids for the products

const products = [
  {
    id: "vanilla-cupcake-pack",
    name: "Vanilla Cupcakes (6 Pack)",
    price: 12.99,
    category: "Cupcake",
  },
  {
    id: "french-macaron",
    name: "French Macaron",
    price: 3.99,
    category: "Macaron",
  },
  {
    id: "pumpkin-cupcake",
    name: "Pumpkin Cupcake",
    price: 3.99,
    category: "Cupcake",
  },
  {
    id: "chocolate-cupcake",
    name: "Chocolate Cupcake",
    price: 5.99,
    category: "Cupcake",
  },
  {
    id: "chocolate-pretzel-pack",
    name: "Chocolate Pretzels (4 Pack)",
    price: 10.99,
    category: "Pretzel",
  },
  {
    id: "strawberry-ice-cream",
    name: "Strawberry Ice Cream",
    price: 2.99,
    category: "Ice Cream",
  },
  {
    id: "chocolate-macaron-pack",
    name: "Chocolate Macarons (4 Pack)",
    price: 9.99,
    category: "Macaron",
  },
  {
    id: "strawberry-pretzel",
    name: "Strawberry Pretzel",
    price: 4.99,
    category: "Pretzel",
  },
  {
    id: "pecan-ice-cream",
    name: "Butter Pecan Ice Cream",
    price: 2.99,
    category: "Ice Cream",
  },
  {
    id: "rocky-road",
    name: "Rocky Road Ice Cream",
    price: 2.99,
    category: "Ice Cream",
  },
  {
    id: "vanilla-macaron-pack",
    name: "Vanilla Macarons (5 Pack)",
    price: 11.99,
    category: "Macaron",
  },
  {
    id: "lemon-cupcakes-pack",
    name: "Lemon Cupcakes (4 Pack)",
    price: 12.99,
    category: "Cupcake",
  },
];

[jdwilkin4]

I am removing the help wanted label for now.

It looks like updating the ids will also affect some of the logic for the methods like here.
This would need to be updated to the just check for the id

const product = products.find((item) => item.id);

instead of

const product = products.find((item) => item.id === id);

And there will probably be other changes needed too. This is just after a quick glance at the project.

I'll wait to hear from the other members to see if this should be opened up for help wanted or just handled by a team member to make sure the core functionality is still in place.

[naomi-lgbt]

Wait hang on, how is this not valid?

Technically, the value for an id attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, '_', and '-' should be used, and the value for an id attribute should start with a letter.

Everything mentioned in MDN as a "reason not to do this" is not really relevant to this project, because we aren't using these IDs as a selector.

[jdwilkin4]

Yeah, I was reading this part of MDN

id attribute should start with a letter.

But if that doesn't apply in this situation, then we shouldn't move forward with this change because it would mean updating other parts of the functionality

[smykes]

I should have written is not best practice instead of is not valid. If I remember correctly older specs, maybe XHTML used to fail in the WC3 validator if an ID did start with a number. Apparently it doesn't even give a warning anymore. @naomi-lgbt is that relevant since the aim is to teach best practices and this could lead students to use this strategy in other projects outside of Free Code Camp? I know it's not a small fix, I just wanted to bring it up.

Edit: Not trying to be argumentative at all.

[naomi-lgbt]

Honestly, in this case I don't think so. It's pretty common to use numbers as IDs when you're doing things like mapping an array to a bunch of elements.

[princeonyekah]

Hello. I am new to open source. Can you help with the folder that produces this code on the codebase.

[princeonyekah]

Hello. I am new to open source. Can you help with the folder that produces this code on the codebase.

I think I figured it.

[jdwilkin4]

@princeonyekah

This issue is not open for contribution.

Please look into issues marked with the help-wanted or first-timers-only label
thanks

[Supravisor]

Although using id as a number is valid JavaScript, Campers may become confused as they are first taught id as an attribute.
How about renaming id to something else, such as identifier or dessert?