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

Curriculum Help
,
1

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

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):

2

const app = new MotorcycleGalleryApp();

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

3

I updated the constructor to manage the testing you mentioned:

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();