Tell us what’s happening:
I can’t understand why tests 17 through 24 are not being validated.
The page is rendering correctly.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
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;
displacement: number; // CORREÇÃO: Propriedade real do JSON do FCC para cilindrada
}
const fetchMotorcycles = async (): Promise<Motorcycle[]> => {
const response = await fetch("https://cdn.freecodecamp.org/curriculum/labs/data/motorcycles.json");
const data = await response.json();
return data as Motorcycle[];
};
const renderMotorcycleCard = (motorcycle: Motorcycle): string => {
const formattedPrice = motorcycle.price.toLocaleString('en-US');
return `
<div class="motorcycle-card">
<div class="motorcycle-card-image-container">
<img src="${motorcycle.image_url}" alt="${motorcycle.name}" />
</div>
<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>
<span class="motorcycle-card-category">${motorcycle.category}</span>
<p class="motorcycle-card-description">${motorcycle.description}</p>
<p class="motorcycle-card-price">$${formattedPrice}</p>
<p class="motorcycle-card-engine">${motorcycle.displacement}cc</p>
</div>
`;
}
class MotorcycleGalleryApp {
private allMotorcycles: Motorcycle[] = [];
constructor() {
this.init();
}
async init(): Promise<void> {
try {
this.allMotorcycles = await fetchMotorcycles();
this.renderMotorcycles();
} catch (error) {
console.error("Error initializing app:", error);
}
}
renderMotorcycles(): void {
const container = document.getElementById('motorcycle-grid');
const resultsNumber = document.getElementById('results-number');
if (container) {
const cardsHTML = this.allMotorcycles
.map(motorcycle => renderMotorcycleCard(motorcycle))
.join("");
container.innerHTML = cardsHTML;
}
if (resultsNumber) {
resultsNumber.textContent = this.allMotorcycles.length.toString();
}
}
}
// Inicializa o app
const app = new MotorcycleGalleryApp();
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0
Challenge Information:
Build a Motorcycle Shop - Build a Motorcycle Shop