Duong Ky Lan

@dklan·3 public vizzes

Cars Report DK

This example displays a text-based report of used cars priced under $2,000, generated from a hardcoded JSON array embedded in the source. It shows how JavaScript object destructuring, array `filter` and `map` methods, and the `join` method combine to format and present data as plain text in an HTML `<pre>` element. The code uses ES6 modules, including imports from `./getCars` and a commented-out promise-based `getCars` function, with the active output written directly to the DOM via `document.getElementById`. The report is rendered as a static list of car descriptions, with no visualization or external libraries used.

Jan 12, 2021

Loading thumbnail…

Second Cars

This example demonstrates how JavaScript objects, arrays, and modules can be combined to generate a text-based report of affordable secondhand cars. It shows a loading message, then fetches a hardcoded JSON array of five vehicles via a simulated asynchronous Promise, filters those under $2,000, and formats the results using template literals. The code uses native `JSON.parse`, Promises, `Array.filter`, `Array.map`, and `Array.join`, with ES module imports and exports for `formatCar.js`, `generateReport.js`, and `getCars.js`.

Jan 12, 2021

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript workflow that fetches car data and dynamically generates a formatted text report. It shows how modular code separates data retrieval, formatting, and report generation. The page initially displays “Loading...” and then presents a list of cars priced under $2,000, using a Promise with `setTimeout` to simulate an asynchronous API call. The implementation relies on ES6 modules, `JSON.parse` for handling embedded data, array methods like `filter` and `map`, and template literals for string construction. The visual output is plain text rendered directly into an HTML `<pre>` element.

Jan 12, 2021