Tell us what’s happening:
I dont understand why im failing test 21 to 24, its clearly rendering 25 cards with the right classes
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* 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
engine?: any
}
async function fetchMotorcycles(): Promise<Motorcycle[]>{
let response = await fetch('https://cdn.freecodecamp.org/curriculum/labs/data/motorcycles.json')
let data = 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}'>
<p class='motorcycle-card-year-badge'>${motorcycle.year}</p>
<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[] = []
async renderMotorcycles(){
this.allMotorcycles = await fetchMotorcycles()
let input = document.querySelector('input') as HTMLInputElement
let grid = document.getElementById('motorcycle-grid') as HTMLElement
let filterer = ''
input.addEventListener('change', e =>{
grid.innerHTML = ''
filterer = input.value
if (!filterer){
this.allMotorcycles.forEach(i => grid.innerHTML += renderMotorcycleCard(i))
}else{
let newArr = this.allMotorcycles.filter(i => i.name.includes(filterer))
console.log(newArr)
newArr.forEach(i => grid.innerHTML += renderMotorcycleCard(i))
}
})
this.allMotorcycles.forEach(i => grid.innerHTML += renderMotorcycleCard(i))
}
}
let app = new MotorcycleGalleryApp
app.renderMotorcycles()
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36 Edg/151.0.0.0
Challenge Information:
Build a Motorcycle Shop - Build a Motorcycle Shop