Build a Product Showcase - Build a Product Showcase

JavaScript
1

Tell us what’s happening:

All tests pass except #40 and #41 which are about hooking up the filter with the buttons. When testing it manually the filters are applied correctly. Also #42 passes which I would expect to fail as well if there is an issue with filtering or the way the event handlers are configured.

  • 40. Clicking the #books button should display the corresponding set of products in the #output element. (FAILED)

  • 41. Clicking the #electronics button should display the corresponding set of products in the #output element. (FAILED)

  • 42. Clicking the #clothing button should display the corresponding set of products in the #output element. (OK)

Your code so far

<!-- file: index.html -->
<!-- unmodified -->

/* file: styles.css */
/* unmodified */

/* file: index.ts */
interface Item {
  type: "book" | "electronics" | "clothing";
  id: string;
  price: number
}

interface Book extends Item {
  type: "book";
  title: string,
  author: string
}

interface Electronics extends Item {
  type: "electronics";
  item: string;
  model: string;
  warranty?: number
}

interface Clothing extends Item {
  type: "clothing";
  item: string;
  brand: string;
  size?: "S" | "M" | "L"
}

type Product = Book | Electronics | Clothing

class Collection<T> {
  items: T[];
  constructor(items: T[]) {
    this.items = items
  };
  getAll() {
    return this.items
  }
  filter(cb: Function) {
    return this.items.filter(x => cb(x))
  }
}

const renderProduct = (p: Product) => {
  const price = `<div class="price" style="color: black">\$${p.price}</div>`
  if (p.type == "book") {
    return `<div class="item" id="${p.id}">
    Book: ${p.title} by ${p.author} ${price}</div>`
  } else if (p.type == "electronics") {
    return `<div class="item" id="${p.id}">
      Electronics: ${p.item} - ${p.model}${p.warranty ? ` - Warranty: ${p.warranty} year(s)` : ""}
    ${price}</div>`
  } else if (p.type == "clothing") {
    return `<div class="item" id="${p.id}">
      Clothing: ${p.item} by ${p.brand} ${p.size ? `- Size ${p.size}` : ""}
    ${price}</div>`
  }
  const p2 = p as Item
  throw new Error(`Unknown product type: ${JSON.stringify(p)}`)
}

const products: Collection<Product> = new Collection<Product>([
  {type: "book", title: "AI for Dummies", author: "Pete", id:"b1", price: 12},
  {type: "book", title: "AI for Dummies II", author: "Pete", id:"b2", price: 12},
  {type: "electronics", item: "Pitch Modulator", price: 120, id: "e1", model: "T-Pain 9000"},
  {type: "clothing", price: 90, id: "c1", item: "Traditional Kilt", brand: "Bag Your Pipes"}
])

const showProducts = (type: null|string = null) => {
  const outputEl = document.getElementById("output")!
  const p2 = type == null ? products.getAll() :
    products.filter((x : Product) => x.type == type)
  const htmlString = p2.map(product => renderProduct(product)).join("")
  outputEl.innerHTML = htmlString
}

document.addEventListener("DOMContentLoaded", () => {
  showProducts()
})

const qs = (x:string) => document.querySelector<HTMLButtonElement>(x)!
qs("#all").onclick = () => showProducts(null)
qs("#books").addEventListener("click", () => showProducts("book"))
qs("#electronics").onclick = () => showProducts("electronics")
qs("#clothing").onclick = () => showProducts("clothing")

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Challenge Information:

Build a Product Showcase - Build a Product Showcase

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-product-showcase/696920c0c98a1ed58eb86293.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @GregorDeCillia,

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

We have blurred this solution (with [spoiler][/spoiler] tags) so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.

Happy coding

3

Thanks! I just went back to the exercise, clicked “check” again (without a reset) and it worked. I can’t tell what changed but the issue is resolved now.