Cars report

100%

✓ Published0🌍 Public

Last edited Oct 21, 2021

Created on Oct 21, 2021

This example displays a text-based report of used cars priced under $2,000, listing each vehicle’s year, make, model, and price. After a simulated two-second delay, the data loads and the report replaces an initial “Loading data” message in the page’s `<pre>` element. The code uses JavaScript promises and `setTimeout` in `getCars.js` to fetch the data, and the `generateReport` function filters and formats the car objects via `Array.filter` and `Array.map`.

AI-generated description

This is my first time trying to use Javascript to implement something. Looks good to me. Hope I can get familiar with Javascript and d3 ASAP.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example displays a text-based report of used cars, filtered to show only those priced below $2,000 and formatted as a list of year, make, model, and price. The page initially shows "Loading..." while it retrieves the car data, then replaces it with the report. It uses JavaScript's `Promise` and `setTimeout` in `getCars` to simulate a delayed data fetch, and `filter`, `map`, and `join` in `generateReport` to process the data. The HTML `<pre>` element renders the formatted output.

Kkkwyoung

95% match

Loading thumbnail…

Cars Report

This example demonstrates how to fetch and display a text report of used cars priced under $2,000. The page initially shows “Loading...” while a promise-based `getCars()` function simulates a two-second delay before resolving with a hardcoded JSON array. The `generateReport` function filters that array and applies `formatCar` to produce a formatted list with year, make, model, and price. It uses JavaScript ES6 modules, destructuring, `JSON.parse`, and `Promise` with `setTimeout` to mimic asynchronous data retrieval.

AA1L9E9X9

95% match

Loading thumbnail…

Cars Report

This example displays a text-based report of used cars, showing each vehicle’s year, make, model, and price for models under $2,000. It begins with a “Loading...” message and then renders the filtered results in a large <pre> element after a simulated two-second delay. The code uses JavaScript promises via `getCars`, a `generateReport` function that filters and maps car data, and the `formatCar` helper to compose each line. Data comes from an inline JSON array containing five car records.

YYifei Wang

95% match

Loading thumbnail…

Cars Report

This example displays a text-based report of used cars priced under $2,000, with each entry formatted as “year make model: price” and separated by newlines. After a brief “Loading...” state, the report appears once data arrives, filtering five car records from an inline JSON array. The code demonstrates modular JavaScript with ES modules, using `getCars()` to return a Promise that resolves after a two-second delay, and `generateReport()` to filter and map the data. The output is rendered into an HTML `<pre>` element via `textContent`.

ÁÁlvaro Cáceres Muñoz

94% match

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of used cars, filtering the data to show only vehicles priced under $2,000. The page initially displays a loading message before the report appears as formatted lines, each listing the year, make, model, and price. The code uses JavaScript promises with `getCars` to simulate a delayed data fetch and modules like `formatCar` and `generateReport` to transform a JSON array. The interface relies on DOM manipulation via `getElementById` and `textContent`.

Mmhdpessanha

93% match

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of car listings, showing each vehicle’s year, make, model, and price, filtered to include only cars under a $2,000 threshold. It uses a simulated asynchronous data source via `getCars()` with a `Promise` and `setTimeout`, then processes the data with `generateReport()`, which applies `Array.filter`, `Array.map`, and `formatCar()` to build a formatted string. The output is displayed in a `<pre>` element, updated after a two-second loading delay using the DOM API `document.getElementById`. No external libraries are used, relying solely on vanilla JavaScript and HTML.

AAparnaPSha

93% match

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2,000, listing each vehicle’s year, make, model, and price. The page initially shows a “Loading...” message, then uses a JavaScript Promise to simulate a two-second delay before fetching a hardcoded JSON array of five cars. The `generateReport` function filters the data by price, formats each entry with a custom `formatCar` helper, and joins the results into a multi-line string rendered inside an HTML `<pre>` element via the browser’s DOM manipulation API.

Ggilbster

93% match

Loading thumbnail…

Cars Report

This example displays a report of cars priced under $2000, listing them by year, make, model, and price. It also shows a "Loading ..." message before the data appears. The code uses JavaScript objects, arrays, and modules, employing `Promise`, `setTimeout`, and `JSON.parse` to simulate an asynchronous data fetch. The report is generated via the `generateReport` function, which filters and maps car data, and is then displayed in a `<pre>` element.

MMauradion

93% match