Build a Motorcycle Shop - Build a Motorcycle Shop

Curriculum Help
1

Tell us what’s happening:

Tests 18-24 consistently fail on my end, while Test 17, which is in the same group as the ones that fail, somehow passes (contrary to what others have reported before). I’ve tried rendering each full motorcycle card as HTML strings before attaching them to the motorcycle grid element, and I’ve tried generating full-fledged HTML elements for each part of the motorcycle card, yet only the image is being recognized in both cases.

Your code so far

/* file: index.ts */

//First approach

const renderMotorcycleCard = (motorcycle: Motorcycle): string => {

  return `<img class="motorcycle-card-image-container" src=${motorcycle.image_url}>
  <span class="motorcycle-card-year-badge">${motorcycle.year}</span>
  <h6 class="motorcycle-card-title">${motorcycle.name}</h6>
  <p class="motorcycle-card-manufacturer">Manufacturer: ${motorcycle.manufacturer}</p>
  <p class="motorcycle-card-category">Category: ${motorcycle.category}</p>
  <p class="motorcycle-card-description">${motorcycle.description}</p>
  <p class="motorcycle-card-engine"></p>
  <p class="motorcycle-card-price">Price: ${motorcycle.price}</p>`;
/*then loop through each motorcycle element to add the whole set as strings to the motorcycle-grid element's innerHTML*/
}

//Second approach

this.allMotorcycles.forEach((entry: Motorcycle) =>{
        let imageContainer: HTMLElement = document.createElement('img');
        let nameContainer: HTMLElement = document.createElement('h6');
        let yearContainer: HTMLElement = document.createElement('span');
        let manufacturerContainer: HTMLElement = document.createElement('p');
        let categoryContainer: HTMLElement = document.createElement('p');
        let descriptionContainer: HTMLElement = document.createElement('p');
        let engineContainer: HTMLElement = document.createElement('p');
        let priceContainer: HTMLElement = document.createElement('p');

        imageContainer.classList.add('motorcycle-card-image-container')
        imageContainer.setAttribute('src', entry.image_url)

        yearContainer.classList.add('motorcycle-card-year-badge')
        yearContainer.innerHTML = String(entry.year);

        nameContainer.classList.add('motorcycle-card-title')
        nameContainer.innerHTML = entry.name;

        manufacturerContainer.classList.add('motorcycle-card-manufacturer')
        manufacturerContainer.innerHTML = entry.manufacturer;

        categoryContainer.classList.add('motorcycle-card-category')
        categoryContainer.innerHTML = entry.category;

        descriptionContainer.classList.add('motorcycle-card-description')
        descriptionContainer.innerHTML = entry.manufacturer;

        engineContainer.classList.add('motorcycle-card-engine')
        //engineContainer.innerHTML = entry.engine; //no engine property

        priceContainer.classList.add('motorcycle-card-price')
        priceContainer.innerHTML = String(entry.price);

        console.log(`motorcycle ${entry.id}`);
        //append each class of element one by one
        document.getElementById('motorcycle-grid')!.append(imageContainer);
        document.getElementById('motorcycle-grid')!.append(yearContainer);
        document.getElementById('motorcycle-grid')!.append(nameContainer);
        document.getElementById('motorcycle-grid')!.append(manufacturerContainer);
        document.getElementById('motorcycle-grid')!.append(categoryContainer);
        document.getElementById('motorcycle-grid')!.append(descriptionContainer);
        document.getElementById('motorcycle-grid')!.append(priceContainer);
        document.getElementById('motorcycle-grid')!.append(engineContainer);

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

Could you share your complete code?

3

Here’s what I have so far, with the string approach in renderMotorcycleCard() and the element array approach in altRenderMotorcycleCard(). All renderings of properties from the year onwards aren’t being detected.

/* file: index.ts */

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
}

const fetchMotorcycles = () => fetch('https://cdn.freecodecamp.org/curriculum/labs/data/motorcycles.json', {method: 'GET'})
  .then(response => {console.log('data retrieved'); return response.json()})
  .catch(err => console.log(`Error: ${err}`));

const renderMotorcycleCard = (motorcycle: Motorcycle): string => {

  const stringFormat: string = `<img class="motorcycle-card-image-container" src=${motorcycle.image_url}>
  <span class="motorcycle-card-year-badge">${motorcycle.year}</span>
  <h6 class="motorcycle-card-title">${motorcycle.name}</h6>
  <p class="motorcycle-card-manufacturer">Manufacturer: ${motorcycle.manufacturer}</p>
  <p class="motorcycle-card-category">Category: ${motorcycle.category}</p>
  <p class="motorcycle-card-description">${motorcycle.description}</p>
  <p class="motorcycle-card-engine"></p>
  <p class="motorcycle-card-price">Price: ${motorcycle.price}</p>`

  return stringFormat;
}

const altRenderMotorcycleCard = (motorcycle: Motorcycle): HTMLElement[] => {
  let imageContainer: HTMLElement = document.createElement('img');
  let nameContainer: HTMLElement = document.createElement('h6');
  let yearContainer: HTMLElement = document.createElement('span');
  let manufacturerContainer: HTMLElement = document.createElement('p');
  let categoryContainer: HTMLElement = document.createElement('p');
  let descriptionContainer: HTMLElement = document.createElement('p');
  let engineContainer: HTMLElement = document.createElement('p');
  let priceContainer: HTMLElement = document.createElement('p');

  imageContainer.classList.add('motorcycle-card-image-container')
  imageContainer.setAttribute('src', motorcycle.image_url)

  yearContainer.classList.add('motorcycle-card-year-badge')
  yearContainer.innerHTML = String(motorcycle.year);

  nameContainer.classList.add('motorcycle-card-title')
  nameContainer.innerHTML = motorcycle.name;

  manufacturerContainer.classList.add('motorcycle-card-manufacturer')
  manufacturerContainer.innerHTML = motorcycle.manufacturer;

  categoryContainer.classList.add('motorcycle-card-category')
  categoryContainer.innerHTML = motorcycle.category;

  descriptionContainer.classList.add('motorcycle-card-description')
  descriptionContainer.innerHTML = motorcycle.manufacturer;

  engineContainer.classList.add('motorcycle-card-engine')
  //engineContainer.innerHTML = motorcycle.engine; //data from API has no engine property

  priceContainer.classList.add('motorcycle-card-price')
  priceContainer.innerHTML = String(motorcycle.price);

  const elementArrayFormat: HTMLElement[] = [imageContainer, nameContainer, yearContainer, manufacturerContainer, categoryContainer, descriptionContainer, engineContainer, priceContainer]

  return elementArrayFormat;
}

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

  public renderMotorcycles = () =>{

    fetchMotorcycles().then(response => {
      this.allMotorcycles = response;

      this.allMotorcycles.forEach((entry: Motorcycle) =>{

        console.log(`motorcycle ${entry.id}`);
        
        //document.getElementById('motorcycle-grid')!.innerHTML += renderMotorcycleCard(entry);

        document.getElementById('motorcycle-grid')!.append(...altRenderMotorcycleCard(entry));
      })
    })
    .catch(err => console.log(`Error: ${err}`))
    
  }
}

const app = new MotorcycleGalleryApp();

app.renderMotorcycles();
4

If you take a look at the browser’s console (not the console visible on page), there are some details regarding the failing tests.

It looks that for some reason each failing test finds the incorrect number of visible motorcycles (classes for which test is looking for). Number of them always increases by 25. Any ideas why that might be happening?

5

Somehow, the motorcycle-grid element’s contents isn’t being reset between tests, and the rendered elements from previous tests keep piling up. Resetting the contents via document.getElementById('motorcycle-grid')!.innerHTML = ''" every time the grid is rendered worked for me.