i need help test 17-24 isn’t passing even though it appears correct
<!-- file: index.html -->
/* file: styles.css */
/* file: index.ts */
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
Build a Motorcycle Shop - Build a Motorcycle Shop
Hey there,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
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 = async (): Promise<Motorcycle[]> =>{
const response = await fetch('https://cdn.freecodecamp.org/curriculum/labs/data/motorcycles.json');
if (!response.ok){
throw new Error('failed to fetch motocycles')
};
const data: Motorcycle[]= await response.json();
console.log(data.length);
return data;
}
const renderMotorcycleCard= (motorcycle: Motorcycle): string=>{
const card: string = `
<div class="motorcycle-card">
<img src="${motorcycle.image_url}"
alt=""
class="motorcycle-card-image-container" />
<h2 class="motorcycle-card-title" >${motorcycle.name}</h2>
<h3 class="motorcycle-card-category">${motorcycle.category}</h3>
<p class="motorcycle-card-description" >${motorcycle.description}</p>
<h4 class="motorcycle-card-price" >$${motorcycle.price}</h4>
<p class="motorcycle-card-manufacturer" >${motorcycle.manufacturer}</p>
<p class="motorcycle-card-year-badge" >Year: ${motorcycle.year}</p>
<p class="motorcycle-card-engine">pending</p>
</div>
`;
return card;
}
class MotorcycleGalleryApp {
private allMotorcycles: Motorcycle[]=[];
constructor(initialMotorcycles: Motorcycle[] = []) {
this.allMotorcycles = initialMotorcycles;
}
renderMotorcycles(filter: string = ''): void {
const container = document.getElementById('motorcycle-grid');
const count=document.getElementById('results-number');
if(!container){
throw new Error('container was not found')
};
let motorcycles=this.allMotorcycles
console.log(motorcycles)
if (filter.trim()) {
motorcycles = this.allMotorcycles.filter(m =>
m.name.toLowerCase().includes(filter.toLowerCase())
);
}
if (count) {
count.innerHTML = String(motorcycles.length);
}
container.innerHTML=motorcycles.map((m)=>renderMotorcycleCard(m)).join('')
}
}
document.addEventListener("DOMContentLoaded", async () => {
const data =await fetchMotorcycles();
const app= new MotorcycleGalleryApp(data);
app.renderMotorcycles()
const filterInput = document.getElementById("name-filter-input") as HTMLInputElement;
if (filterInput) {
filterInput.addEventListener("input", () => app.renderMotorcycles(filterInput.value));
}
});
hello!
inside renderMotorcycles, before rendering the motorcycles, check if motorcycles array has motorcycles data. if not, return early without rendering.
waw thanks alot you are a genius …
this is all i added
```
if(!motorcycles || motorcycles.length == 0) return;