# Stuck with "Build a Motorcycle Shop" workshop in Front-End Development Libraries Certification

**URL:** <https://forum.freecodecamp.org/t/stuck-with-build-a-motorcycle-shop-workshop-in-front-end-development-libraries-certification/801660>\
**Category:** Curriculum Help\
**Tags:** html-css, javascript\
**Created:** [October 3, 2026, 12:36pm UTC](https://forum.freecodecamp.org/t/stuck-with-build-a-motorcycle-shop-workshop-in-front-end-development-libraries-certification/801660 "2026-10-03T12:36:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nikhil.23.idiculla](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nikhil.23.idiculla/32/422283_2.png) [@nikhil.23.idiculla](https://forum.freecodecamp.org/u/nikhil.23.idiculla)\
**Post date:** [October 3, 2026, 12:36pm UTC](https://forum.freecodecamp.org/t/stuck-with-build-a-motorcycle-shop-workshop-in-front-end-development-libraries-certification/801660/1 "2026-10-03T12:36:04Z")

</div>

## Tell us what’s happening:

I’ve been stuck on this particular workshop for days right now, the following test cases have been failing non-stop no matter what I try:

- Failed:13. The `MotorcycleGalleryApp` should have an array named `allMotorcycles`.
- Failed:17. The `renderMotorcycles` function should render 25 elements with a class of `motorcycle-card-image-container`.
- Failed:18. The `renderMotorcycles` function should render 25 elements with a class of `motorcycle-card-year-badge`.
- Failed:19. The `renderMotorcycles` function should render 25 elements with a class of `motorcycle-card-title`.
- Failed:20. The `renderMotorcycles` function should render 25 elements with a class of `motorcycle-card-manufacturer`.
- Failed:21. The `renderMotorcycles` function should render 25 elements with a class of `motorcycle-card-category`.
- Failed:22. The `renderMotorcycles` function should render 25 elements with a class of `motorcycle-card-description`.
- Failed:23. The `renderMotorcycles` function should render 25 elements with a class of `motorcycle-card-price`.
- Failed:24. The `renderMotorcycles` function should render 25 elements with a class of `motorcycle-card-engine`.

## I can see the the function, successfully render all 25 elements in the preview, I’ve also ensured that the following class names are also present, any help would be appreciated.

## Your code so far

```typescript
type Category = 'Sport' | 'Cruiser' | 'Touring' | 'Dirt' | 'Adventure' | 'Naked' | 'Electric';

interface Motorcycle {
  id: string;
  name: string;
  manufacturer: string;
  category: Category;
  price: number;
  image_url: string;
  created_at: Date;
  description: string;
  year: number;
  engine?: string | number;
}

async function fetchMotorcycles(): Promise<Motorcycle[]> {
  const response = await fetch('https://cdn.freecodecamp.org/curriculum/labs/data/motorcycles.json');
  return response.json();
}

function renderMotorcycleCard(motorcycle: Motorcycle): string {
  return `
    <div class="motorcycle-card">
      <div class="motorcycle-card-image-container">
        <img src="${motorcycle.image_url}" alt="${motorcycle.name}" class="motorcycle-card-image">
        <div class="motorcycle-card-year-badge">
          ${motorcycle.year}
        </div>
      </div>
      <div class="motorcycle-card-content">
        <div class="motorcycle-card-header">
          <div>
            <h3 class="motorcycle-card-title">${motorcycle.name}</h3>
            <p class="motorcycle-card-manufacturer">${motorcycle.manufacturer}</p>
          </div>
          <span class="motorcycle-card-category">
            ${motorcycle.category}
          </span>
        </div>
        <p class="motorcycle-card-description">${motorcycle.description}</p>
        <div class="motorcycle-card-footer">
          <div>
            <p class="motorcycle-card-price">
              $${motorcycle.price}
            </p>
            <p class="motorcycle-card-engine">${motorcycle.engine}</p>
          </div>
          <button class="motorcycle-card-button" data-motorcycle-id="${motorcycle.id}">
            View Details
          </button>
        </div>
      </div>
    </div>
  `;
}

class MotorcycleGalleryApp {
  private allMotorcycles: Motorcycle[];

  constructor(motorcycles: Motorcycle[]) {
    this.allMotorcycles = motorcycles;
  }

  renderMotorcycles(): void {
    const grid = document.getElementById('motorcycle-grid');
    const resultsNumber = document.getElementById('results-number');
    
    if (grid) {
      grid.innerHTML = this.allMotorcycles.map(renderMotorcycleCard).join('');
    }
    
    if (resultsNumber) {
      resultsNumber.textContent = this.allMotorcycles.length.toString();
    }
  }
}

fetchMotorcycles().then(motorcycles => {
  const app = new MotorcycleGalleryApp(motorcycles);
  app.renderMotorcycles();

  const filterInput = document.getElementById('name-filter-input');
  if (filterInput) {
    filterInput.addEventListener('input', (e: Event) => {
      const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
      const filteredMotorcycles = motorcycles.filter(motorcycle => 
        motorcycle.name.toLowerCase().includes(searchTerm)
      );
      
      const grid = document.getElementById('motorcycle-grid');
      const resultsNumber = document.getElementById('results-number');
      
      if (grid) {
        grid.innerHTML = filteredMotorcycles.map(renderMotorcycleCard).join('');
      }
      if (resultsNumber) {
        resultsNumber.textContent = filteredMotorcycles.length.toString();
      }
    });
  }
});

```

## 

Lesson URL (copy - paste from your browser’s address bar):

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/front-end-development-libraries-v9/lab-motorcycle-shop/lab-motorcycle-shop)**
>
> Learn to Code for Free

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [October 3, 2026, 4:17pm UTC](https://forum.freecodecamp.org/t/stuck-with-build-a-motorcycle-shop-workshop-in-front-end-development-libraries-certification/801660/2 "2026-10-03T16:17:27Z")

</div>

`const app = new MotorcycleGalleryApp();`

this is used like this when testing, is your code able to manage that?

---

<div class="post-metadata">

**Author:** ![nikhil.23.idiculla](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nikhil.23.idiculla/32/422283_2.png) [@nikhil.23.idiculla](https://forum.freecodecamp.org/u/nikhil.23.idiculla)\
**Post date:** [October 4, 2026, 8:47am UTC](https://forum.freecodecamp.org/t/stuck-with-build-a-motorcycle-shop-workshop-in-front-end-development-libraries-certification/801660/3 "2026-10-04T08:47:31Z")

</div>

I updated the constructor to manage the testing you mentioned:

```typescript
class MotorcycleGalleryApp {
  private allMotorcycles: Motorcycle[];

  constructor(motorcycles: Motorcycle[] = []) {
    this.allMotorcycles = motorcycles;
  }

  renderMotorcycles(): void {
    const grid = document.getElementById('motorcycle-grid');
    const resultsNumber = document.getElementById('results-number');
    
    if (grid) {
      grid.innerHTML = this.allMotorcycles.map(renderMotorcycleCard).join('');
    }
    
    if (resultsNumber) {
      resultsNumber.textContent = this.allMotorcycles.length.toString();
    }
  }
}

```

Now I’m able to run:  
`const app = new MotorcycleGalleryApp();`