Cars Report

100%

✓ Published0🌍 Public

Last edited Jul 27, 2022

Created on Apr 4, 2021

This example displays a report on car data by extracting specific values—such as make, model, and price—from a local JSON array and presenting them as large red text on a webpage. It demonstrates modular JavaScript by importing the car data from `vehicle.js` and a formatting helper from `formatCar.js` using ES6 `import` statements, then updating `<pre>` elements via `document.getElementById` and `innerHTML`. The page loads without external dependencies, relying on plain JavaScript and CSS from `styles.css` to style the highlighted output.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example renders a simple text report about cars from a static JSON array imported via an ES6 module. It displays the make of the first car in large, styled text using the Ubuntu font from Google Fonts, with dark blue page background and light text color. The code defines a `formatCar` function to convert a car object into a readable string, and it filters, maps, and joins the data, though only the first car’s make is ultimately shown in the `message-element` `<pre>` tag. It uses plain JavaScript array methods and DOM manipulation via `document.getElementById`.

Kkevin0903

90% match

Loading thumbnail…

Cars Report

This example displays a car report with a list of filtered vehicles, highlighting a selected entry in red within a green-styled page. It demonstrates ES6 module imports and exports across multiple JavaScript files, using `cars.js` to parse JSON data, `formatCar` to construct string descriptions, and `generateReport` to filter cars by price and join the results. The HTML output is styled with CSS, and the `index.js` file calls `generateReport` to populate the page via `document.getElementById`, though the message element is not present in the provided markup.

Ggavriel-binshtok

90% match

Loading thumbnail…

Car Report

This example demonstrates a simple text-based car report rendered on a web page. It filters a hardcoded JSON array of car objects by price, formats each matching car into a single string, and displays the final report in a large font. The code uses the `JSON.parse` method to load the data, a custom `formatCar` function for string templating, and `Array.filter` and `Array.map` to process the cars. The report is output as plain text into a `<pre>` element via `document.getElementById`.

Gghsueh01

90% match

Loading thumbnail…

Cars Report

This example displays a car report by reading imported JSON data and rendering the make of the first vehicle in large text on a dark, styled page. Using the cars module, it parses a static array of car objects and assigns the property to a DOM element’s text content via `document.getElementById`. The interface relies on plain HTML, CSS with a Google Fonts import, and ES6 module exports, though no D3 or interactive visualization is present.

KKG-Gurley

90% match

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based car report generated from a JSON array of car objects. The page initially displays the make of the first car, while a separate module, `generateReport.js`, filters cars by price and formats them with `formatCar`. Data loading is simulated asynchronously via `getCars()`, which returns a promise after a two-second delay. The code uses native JavaScript `JSON.parse`, array methods `filter` and `map`, and ES6 module exports, with the final output rendered into an HTML `<pre>` element.

MMusikdude

90% match

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report for a car inventory, displaying a car’s make in large type on a web page. Working from an embedded JSON array of car objects, it uses a JavaScript module (`cars.js`) to parse the data and a separate function (`generateReport`) to filter cars under a given price and format each entry. The page’s content is updated via the Document Object Model’s `textContent` property, with the code bundled using Rollup for execution in the browser.

Hhawjelly

90% match

Loading thumbnail…

Cars Report

This example displays a simple text-based report of used cars, listing each vehicle’s year, make, model, and price in a large preformatted element. It demonstrates basic JavaScript module usage with ES6 `export` and `import` syntax, though the author notes difficulty getting exports to work. The report filters a hardcoded JSON array of five car objects to include only those under a specified price threshold, then formats each entry using a destructuring template literal. The page runs entirely client-side, rendering output by setting `textContent` on a DOM element.

Aarontha

90% match

Loading thumbnail…

Cars Report

This example demonstrates a minimal data-reporting page titled “Cars Report” that displays the make of the first car in a hardcoded JSON array. The page renders the text “Ram” prominently in a large, centered font using the Ubuntu typeface on a dark navy background. The code imports the car data from a separate ES6 module, `cars.js`, and uses plain JavaScript DOM manipulation via `document.getElementById` and `textContent` to inject the value into an HTML `<pre>` element. The styling is applied through an external `styles.css` file, with the layout defined in `index.html`.

Jjmillanm

89% match