Build a Motorcycle Shop

For this lab, you have been provided with all the HTML and CSS. You are going to use TypeScript to complete the functionalities of a motorcycle shop page. **Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should create a `type` called `Category` that consists of the following possible values: `'Sport'`, `'Cruiser'`, `'Touring'`, `'Dirt'`, `'Adventure'`, `'Naked'`, `'Electric'`. 2. You should create an `interface` called `Motorcycle` that has the following properties: an `id` of type `string`, an `name` of type `string`, an `manufacturer` of type `string`, a `category` of type `Category`, a `price` of type `number`, an `image_url` of type `string`, an `created_at` property of type `Date`, an `description` of type `string`, and a year of type `number` 3. You should create a function named `fetchMotorcycles` that returns a `Promise` resolving to an array of `Motorcycle` objects. 4. You should load `Motorcycle` data from the `https://cdn.freecodecamp.org/curriculum/labs/data/motorcycles.json` endpoint. 5. You should create a function named `renderMotorcycleCard` that takes a single `Motorcycle` object as a parameter and returns a string containing the HTML that contains a formatted HTML string for the motorcycle card. 1. The `renderMotorCycleCard` function should take a parameter called `motorcycle` of type `Motorcycle`. 2. The `renderMotorCycleCard` function should return a type of `string`. 3. Each motorcycle card component should have an `img` element that has a valid image and a class of `motorcycle-card-image-container`. 4. Each motorcycle card component should have an element with an class of `motorcycle-card-year-badge` that lists the year in plain text. 5. Each motorcycle card component should have an element with a class of `motorcycle-card-title` that lists the name of the motorcycle in plain text. 6. Each motorcycle card component should have an element with a class of `motorcycle-card-manufacturer` that lists the name of the motorcycle manufacturer in plain text. 7. Each motorcycle card component should have an element with a class of `motorcycle-card-category` that lists the category of the motorcycle in plain text. 8. Each motorcycle card component should have an element with a class of `motorcycle-card-description` that lists the description of the motorcycle in plain text. 9. Each motorcycle card component should have an element with a class of `motorcycle-card-price` that lists the price of the motorcycle in plain text. 10. Each motorcycle card component should have an element with a class of `motorcycle-card-engine` that lists the horsepower of each engine. 6. You should have a class called `MotorcycleGalleryApp`. 1. The class should have a `private` array called `allMotorcycles` that is statically typed to a type of an array of `Motorcycle` objects. 2. That class should have a function called `renderMotorcycles` that renders the equivalent motorcycle card components of the `allMotorcycles` variable inside the element with id of `motorcycle-grid`. 7. The number of `Motorcycle` elements that are displayed should be listed inside of an element with an id of `results-number`. 8. The filter should be updated on an `input` event. # --before-all-- ```js const _testMotorcycles = [ { id: '1', name: 'Ninja H2', manufacturer: 'Kawasaki', category: 'Sport', price: 29000, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-vmoto-stash.jpg', description: 'Supercharged hypersport with unmatched power', year: 2024, created_at: '2024-01-01T00:00:00Z' }, { id: '2', name: 'Street Triple RS', manufacturer: 'Triumph', category: 'Naked', price: 13500, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-yamaha-r3.png', description: 'Agile naked bike with triple-cylinder perfection', year: 2024, created_at: '2024-01-02T00:00:00Z' }, { id: '3', name: 'R1250 GS Adventure', manufacturer: 'BMW', category: 'Adventure', price: 21995, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-vmoto-stash.jpg', description: 'The ultimate adventure touring machine', year: 2024, created_at: '2024-01-03T00:00:00Z' }, { id: '4', name: 'Panigale V4', manufacturer: 'Ducati', category: 'Sport', price: 28395, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-kawasaki-zx10r.png', description: 'Italian superbike engineering at its finest', year: 2024, created_at: '2024-01-04T00:00:00Z' }, { id: '5', name: 'Road Glide Special', manufacturer: 'Harley-Davidson', category: 'Cruiser', price: 29999, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-yamaha-vmax.jpg', description: 'Classic American touring with modern tech', year: 2024, created_at: '2024-01-05T00:00:00Z' }, { id: '6', name: 'MT-09', manufacturer: 'Yamaha', category: 'Naked', price: 9999, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-yamaha-mt7.jpg', description: 'Lightweight naked bike with crossplane power', year: 2024, created_at: '2024-01-06T00:00:00Z' }, { id: '7', name: 'Africa Twin', manufacturer: 'Honda', category: 'Adventure', price: 14599, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-honda-africa.jpg', description: 'Legendary adventure bike reborn for modern times', year: 2024, created_at: '2024-01-07T00:00:00Z' }, { id: '8', name: 'Super Duke R', manufacturer: 'KTM', category: 'Naked', price: 18999, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-suzuki-sv650.jpg', description: 'The Beast returns with 180hp of raw power', year: 2024, created_at: '2024-01-08T00:00:00Z' }, { id: '9', name: 'GSX-R1000R', manufacturer: 'Suzuki', category: 'Sport', price: 17199, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-suzuki-gsxr1000.jpg', description: 'Track-ready sportbike with championship DNA', year: 2024, created_at: '2024-01-09T00:00:00Z' }, { id: '10', name: 'Street Glide', manufacturer: 'Harley-Davidson', category: 'Cruiser', price: 21999, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-yamaha-vmax.jpg', description: 'Milwaukee-Eight power in a sleek bagger', year: 2024, created_at: '2024-01-10T00:00:00Z' }, { id: '11', name: 'Z H2', manufacturer: 'Kawasaki', category: 'Naked', price: 17000, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-kawasaki-zh2.jpg', description: 'Supercharged naked bike mayhem', year: 2024, created_at: '2024-01-11T00:00:00Z' }, { id: '12', name: 'Multistrada V4', manufacturer: 'Ducati', category: 'Adventure', price: 22995, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-yamaha-mt3.jpg', description: 'Italian style meets adventure capability', year: 2024, created_at: '2024-01-12T00:00:00Z' }, { id: '13', name: 'Speed Triple 1200', manufacturer: 'Triumph', category: 'Naked', price: 16500, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-honda-transalp.jpg', description: 'British muscle bike with cutting-edge tech', year: 2024, created_at: '2024-01-13T00:00:00Z' }, { id: '14', name: 'S1000RR', manufacturer: 'BMW', category: 'Sport', price: 17295, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-kawasaki-z900a1.jpg', description: 'German precision in a superbike package', year: 2024, created_at: '2024-01-14T00:00:00Z' }, { id: '15', name: 'MT-07', manufacturer: 'Yamaha', category: 'Naked', price: 7999, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-yamaha-mt7.jpg', description: 'Best-selling parallel twin for pure fun', year: 2024, created_at: '2024-01-15T00:00:00Z' }, { id: '16', name: 'V-Strom 1050', manufacturer: 'Suzuki', category: 'Adventure', price: 13799, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-benelli-trk702.png', description: 'Reliable adventure touring on a budget', year: 2024, created_at: '2024-01-16T00:00:00Z' }, { id: '17', name: 'Sportster S', manufacturer: 'Harley-Davidson', category: 'Cruiser', price: 15999, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-yamaha-r3.png', description: 'Revolution Max engine in a modern cruiser', year: 2024, created_at: '2024-01-17T00:00:00Z' }, { id: '18', name: 'CBR1000RR-R', manufacturer: 'Honda', category: 'Sport', price: 28500, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-honda-cbr500.png', description: 'Honda racing technology for the street', year: 2024, created_at: '2024-01-18T00:00:00Z' }, { id: '19', name: 'Tiger 900', manufacturer: 'Triumph', category: 'Adventure', price: 14400, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-triumph-tiger900.png', description: 'Middleweight adventure excellence', year: 2024, created_at: '2024-01-19T00:00:00Z' }, { id: '20', name: '890 Duke R', manufacturer: 'KTM', category: 'Naked', price: 11999, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-kawasaki-zx10r.png', description: 'The Scalpel - precise handling perfection', year: 2024, created_at: '2024-01-20T00:00:00Z' }, { id: '21', name: 'Ninja 400', manufacturer: 'Kawasaki', category: 'Sport', price: 5299, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-vmoto-stash.jpg', description: 'Perfect entry-level sportbike', year: 2024, created_at: '2024-01-21T00:00:00Z' }, { id: '22', name: 'Scrambler 1200', manufacturer: 'Triumph', category: 'Adventure', price: 13250, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-ducati-scrambler.jpg', description: 'Modern classic with off-road capability', year: 2024, created_at: '2024-01-22T00:00:00Z' }, { id: '23', name: 'Monster Plus', manufacturer: 'Ducati', category: 'Naked', price: 14295, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-kawasaki-zx10r.png', description: 'Evolved Monster with V-twin soul', year: 2024, created_at: '2024-01-23T00:00:00Z' }, { id: '24', name: 'CB650R', manufacturer: 'Honda', category: 'Naked', price: 9199, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-kawasaki-z900.png', description: 'Neo Sports Café styling with inline-four power', year: 2024, created_at: '2024-01-24T00:00:00Z' }, { id: '25', name: 'Low Rider S', manufacturer: 'Harley-Davidson', category: 'Cruiser', price: 17999, image_url: 'https://cdn.freecodecamp.org/curriculum/labs/motorcycle-suzuki-vstorm650.jpg', description: 'Blacked-out cruiser with attitude', year: 2024, created_at: '2024-01-25T00:00:00Z' } ]; window.fetch = () => new Promise(resolve => setTimeout( () => resolve({ ok: true, status: 200, statusText: 'OK', json: () => Promise.resolve(_testMotorcycles), text: () => Promise.resolve(JSON.stringify(_testMotorcycles)) }), 0 ) ); ```