Build a Motorcyle Shope

Curriculum Help
1

My code keeps failing the test 17 - 24. I have reviewed and debugged several times and I even had to use AI but it keeps failing. Please kindly help.

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;
}

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

function renderMotorcycleCard(motorcycle: Motorcycle): string {
  return `
    <div class="motorcycle-card">
      <img class="motorcycle-card-image-container" src="${motorcycle.image_url}" alt="${motorcycle.name}">
      <span class="motorcycle-card-year-badge">
        ${motorcycle.year}
      </span>
      <h2 class="motorcycle-card-title">${motorcycle.name}</h2>
      <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.toLocaleString("en-US")}</p>
      <p class="motorcycle-card-engine">Engine: N/A</p>
    </div>
  `;
}

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

  constructor() {
    const nameFilterInput = document.getElementById("name-filter-input");

    nameFilterInput?.addEventListener("input", (event) => {
      const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();

      this.displayedMotorcycles = this.allMotorcycles.filter((motorcycle) =>
        motorcycle.name.toLowerCase().includes(searchTerm)
      );
      this.renderMotorcycles();
    });

    this.init();
  }

  private async init(): Promise<void> {
    const loadingContainer = document.getElementById("loading-container");
    if (loadingContainer) {
      loadingContainer.style.display = "flex";
    }

    try {
      const data = await fetchMotorcycles();
      this.allMotorcycles = data;
      this.displayedMotorcycles = data;
    } catch (error) {
      console.error("Failed to load motorcycles:", error);
      this.allMotorcycles = [];
      this.displayedMotorcycles = [];
    }

    if (loadingContainer) {
      loadingContainer.style.display = "none";
    }

    this.renderMotorcycles();
  }

  renderMotorcycles(): void {
    const motorcycleGrid = document.getElementById("motorcycle-grid");
    const resultsNumber = document.getElementById("results-number");
    const noResults = document.getElementById("no-results");

    if (!motorcycleGrid) {
      throw new Error("Motorcycle grid not found");
    }

    motorcycleGrid.innerHTML = this.displayedMotorcycles
      .map((motorcycle) => renderMotorcycleCard(motorcycle))
      .join("");

    if (resultsNumber) {
      resultsNumber.textContent = `${this.displayedMotorcycles.length}`;
    }

    if (noResults) {
      noResults.style.display =
        this.displayedMotorcycles.length === 0 ? "block" : "none";
    }
  }
}

const app = new MotorcycleGalleryApp();

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

2

Hi @nerdytechy5,

Would you please post a link to this challenge?

Thank you.