Build a Motorcycle Shop - Build a Motorcycle Shop

Curriculum Help
1

Tell us what’s happening:

Passing every test except 13, “The MotorcycleGalleryApp should have an array named allMotorcycles.” Which is absurd, because it’s passing tests 14 and 15, “The allMotorcycles property should be private,” and “The allMotorcycles property should be statically typed to Motorcycle.”

Your code so far

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


/* file: styles.css */


/* file: index.ts */

Your browser information:

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

Challenge Information:

Build a Motorcycle Shop - Build a Motorcycle Shop

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

2

Pasting in my code because it looks like it didn’t automatically come over:

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<any> {
  try {
    const response = await fetch('https://cdn.freecodecamp.org/curriculum/labs/data/motorcycles.json');
    if (!response.ok) {
      throw new Error(`Failed: ${response.status}`);
    }
    const motorcycles = await response.json()
    return motorcycles;
  }
  catch (error) {
    console.error(error);
    return;
  }
}

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

class MotorcycleGalleryApp {
  private allMotorcycles: Motorcycle[] = [];
  constructor(motorcycleInput: Motorcycle[]) {
    this.allMotorcycles = motorcycleInput;
  }

  renderMotorcycles(filter: string = ''): void {
    const renderSpot = document.getElementById('motorcycle-grid');
    const results = document.getElementById('results-number');
    
    if (renderSpot) {
      let motorcyclesFilter = this.allMotorcycles;
      if (!motorcyclesFilter || motorcyclesFilter.length == 0) {
        return;
      }
      if (filter) {
        motorcyclesFilter = motorcyclesFilter.filter(x => x.name.toLowerCase().includes(filter.toLowerCase()))
      }
      if (results) {
        results.innerHTML = String(motorcyclesFilter.length)
      }
      renderSpot.innerHTML = motorcyclesFilter.map((m) => renderMotorcycleCard(m)).join('')
    }
    else alert('No spot to render');
  }

}

document.addEventListener("DOMContentLoaded", async() => {
  const motorcycles = await fetchMotorcycles();
  const runApp = new MotorcycleGalleryApp(motorcycles);
  runApp.renderMotorcycles();
  const inputElement = document.getElementById('name-filter-input') as HTMLInputElement;
  if (inputElement) {
    inputElement.addEventListener('input', () => runApp.renderMotorcycles(inputElement.value))
  }
})
3

It may be because you put it to private as it’s tested like this

const gallery = new MotorcycleGalleryApp();
assert.isArray(gallery.allMotorcycles);
4

It’s a requirement that it be private - that’s the next thing the tests test for. Is there some way to declare it private after it’s been tested for existing, and convert it to private, or something?

5

then there is something else, the code used to validate the tests is also having it be private

make sure it’s always an array, maybe

6

Changing “constructor(motorcycleInput: Motorcycle[])” to “constructor(motorcycleInput: Motorcycle[] = [])” got it to pass. I don’t really understand why that would matter, but I passed, so I’m happy, I reckon.