Garrett Haas

@garretthaas·2 public vizzes

Cars Report 2

This example displays a filtered list of cars, showing only those priced under $2,000 in a large text format. The React-based code uses a `generateReport` function that filters the `cars` array and maps each car through `formatCar` to produce a formatted string. The resulting message is inserted into the DOM via `document.getElementById` and assigned to `textContent`. The data originates from a static JSON array embedded in the `cars.js` module, and the rendering occurs within a plain HTML `<pre>` element.

Jun 23, 2020

Loading thumbnail…

Cars Report

This example displays a single text message—the make of the first car in a hardcoded JSON array—inside a large `<pre>` element. It loads the car data from `cars.js` via a JSON string parsed with `JSON.parse` and imported as a module, then accesses `cars[0].make` to update the page content. The visualization is minimal, demonstrating how a React-based project can integrate plain JavaScript data handling and DOM manipulation through `document.getElementById` and `textContent`. The data includes five cars with attributes like year, make, model, and price.

Jun 23, 2020