Build a Motorcycle Shop - Lab Motorcycle Shop

Programming JavaScript
1

Tell us what’s happening:

I have been trying to get tests 17-24 on this lab to pass for like 2 days straight. I have tried several alternative approaches including the forum post where the guy recommended using document.createElement(‘div’) for each motorcycle card. But it seems that nothing can get them to pass, even adding an initial delay before the data fetch/render. It seems like nobody else is able to get these tests passing either.

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 Motorcycle Shop - Lab Motorcycle Shop

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-motorcycle-shop/694175528a794a090ea0ba74.md at main · freeCodeCamp/freeCodeCamp · GitHub

3

TS 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; // The dataset uses "engine" (e.g., "948cc"), not horsepower!
}

function fetchMotorcycles(): Promise<Array<Motorcycle>> {
  return fetch("https://cdn.freecodecamp.org/curriculum/labs/data/motorcycles.json")
    .then(res => res.json());
}

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

class MotorcycleGalleryApp {
  private allMotorcycles: Motorcycle[] = [];

  constructor() {
    this.initApp();
  }

  private async initApp() {
    try {
      const data = await fetchMotorcycles();
      this.allMotorcycles = data;
      this.renderMotorcycles();
    } catch (error) {
      console.error("Failed to load motorcycles:", error);
    }
  }

  renderMotorcycles() {
    const gridElement = document.getElementById("motorcycle-grid");
    const resultsElement = document.getElementById("results-number");

    let cardsHtml = "";
    this.allMotorcycles.forEach((motorcycle) => {
      cardsHtml += renderMotorcycleCard(motorcycle);
    });

    if (gridElement) {
      gridElement.innerHTML = cardsHtml;
    }

    if (resultsElement) {
      resultsElement.textContent = this.allMotorcycles.length.toString();
    }
  }
}

const app = new MotorcycleGalleryApp();
4

This is weird, and I’m not entirely sure why it makes difference. Tests are passing, when there’s added check in renderMotorcycles to make sure this.allMotorcycles are not empty. It can be also in form of checking if cardsHtml is falsey.

5

const app = new MotorcycleGalleryApp();

app.renderMotorcycles();

satisfy this, then all the test cases will pass. worked for me. because the assertion test cases are written to check this way. this means, the fetch, filtering all should happen inside the renderMotorcycles function.

for every test case from 17 to 24 new class instance is created. and render function is invoked. so, everytime a new instance is created, the data should be fetched and ready. then render happens. after that assertion test will check if there required number of elements with that specific class are there in the document or not.

6

I initially had an initGallery() function in my class to display the original 25 motorcycles but simply changing it to renderMotorcycles() helped me pass all the tests. Thank you @vishnurvp2