Tell us what’s happening:
Hi guys, could someone help me understand what’s happening in my code? It fails on tests 13, 16, 17, 20, and all the after that.
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;
}
async function fetchMotorcycles(){
try{
const res = await fetch(
"https://cdn.freecodecamp.org/curriculum/labs/data/motorcycles.json"
);
if(!res.ok){
console.log("response is not ok")
throw new Error(`HTTP error: ${res.status}`);
}
const data= await res.json();
console.log(data)
return data
}
catch(error){
console.log("error was occured in fetching data")
return []
}
}
function renderMotorcycleCard(motorcycle:Motorcycle):string{
return `
<article>
<img src="${motorcycle.image_url}" class="motorcycle-card-image-container" alt="motor cycle image"/>
<p class="motorcycle-card-year-badge">${motorcycle.year}</p>
<p class="motorcycle-card-title">${motorcycle.id}</p>
<p class="motorcycle-card-category">${motorcycle.category}</p>
<p class="motorcycle-card-manufacturer">${motorcycle.manufacturer}</p>
<p class="motorcycle-card-description">${motorcycle.description }</p>
<p class="motorcycle-card-price">${motorcycle.price}</p>
<p class="motorcycle-card-engine">${motorcycle.name}</p>
</article>
`
}
class MotorcycleGalleryApp{
private allMotorcycles:Motorcycle[] = [];
totalNumberOfMotors:number = 0
constructor(products:Promise<Motorcycle[]>){
console.log("hi")
products.then(motorcycles=>{
this.allMotorcycles = motorcycles
this.renderMotorcycles("motorcycle-grid")
})
}
renderMotorcycles(id:string,type?:string):void{
const motorcycleGridElement = document.getElementById(id) as HTMLElement;
const resultsNUmber = document.getElementById("results-number") as HTMLElement
const filterd = type?this.allMotorcycles.filter(e=>{
e.name.toLowerCase().includes(type.toLowerCase())
}):this.allMotorcycles
this.totalNumberOfMotors = filterd.length;
resultsNUmber.innerHTML = String(this.totalNumberOfMotors)
motorcycleGridElement.innerHTML = filterd.length>0 ?filterd.map(el=>{
return renderMotorcycleCard(el)
}).join(""):"<p>No result</p>"
}
}
const result = fetchMotorcycles()
const product = new MotorcycleGalleryApp(result)
const input = document.getElementById("name-filter-input") as HTMLInputElement
input.addEventListener("input",(e)=>{
const text = (e.target as HTMLInputElement).value;
product.renderMotorcycles("motorcycle-grid",text)
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/152.0.0.0 Safari/537.36
Challenge Information:
Build a Motorcycle Shop - Build a Motorcycle Shop