firstviz

100%

✓ Published0🌍 Public

Last edited Oct 8, 2020

Created on Oct 7, 2020

Forked from Hello JS

This example displays a text-based report of affordable cars, filtering a small dataset of used vehicles by price and formatting each entry as a single line with year, make, model, and price. The page renders the result inside a `<pre>` element with large font size using plain DOM manipulation via `document.getElementById`. It leverages ES modules for data parsing and report generation, with the car data stored as inline JSON and exported through `JSON.parse`. The core logic uses JavaScript array methods `filter`, `map`, and `join` within a custom `generateReport` function.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Cars Report

This example displays a text-based report of cars under a specified price, formatted as a list. It shows data for four vehicles, filtering from a static JSON array and outputting each car's year, make, model, and price. The application uses JavaScript’s native `filter`, `map`, and `join` methods on arrays, with custom formatting and report generation functions. The report renders into an HTML `pre` element via `document.getElementById` and textContent, all within a React-based setup using the VizHub framework.

WWMLek

86% match

Loading thumbnail…

Car Report

This example shows a text-based car report generated from a small dataset of five vehicles. It displays cars under a $2,000 price threshold as formatted strings in a large HTML <pre> element. The React starter code uses the native JavaScript `JSON.parse` method to load car data, then applies `filter` and `map` through the `generateReport` function, which formats each entry with the `formatCar` helper. The result is rendered by directly setting the `textContent` of the message element.

VVittala-Puttur

85% match

Loading thumbnail…

Cars Report

This example displays a text-based report of used cars, showing five entries with their year, make, model, and price. It demonstrates data filtering and formatting by selecting vehicles priced under $2,000 and converting each record into a readable string. The code uses the `cars.js` module, which parses a JSON array of car data, and React renders the result into a large `<pre>` element via `document.getElementById` and the `textContent` property. The visualization highlights a single selected car’s details while illustrating how static JSON data can be transformed and presented in a simple web interface.

JJulia

84% match

Loading thumbnail…

Cars report

This example displays a text-based report of cars filtered by price, showing each vehicle’s year, make, model, and cost. The application imports car data from a JSON array and uses a `formatCar` function to structure each entry, while a `generateReport` function filters cars below a maximum price and joins the results. The output is rendered into an HTML `<pre>` element using React and vanilla JavaScript DOM manipulation, with the report styled via CSS for large, centered text.

Mmorjyooo

84% match

Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price, showing each car’s year, make, model, and price on separate lines. It uses React, but the core logic runs through JavaScript functions in separate modules: `generateReport` filters the imported `cars` array (parsed from JSON) by a maximum price and joins formatted strings via `formatCar`. The HTML page has a styled `<pre>` element that receives the generated message through `document.getElementById` and sets its `textContent`.

Zzjutkarma

84% match

Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price. It lists each car as a formatted string showing the year, make, model, and price for vehicles under a maximum price threshold. The React code imports car data and uses functional utilities like `filter` and `map`, along with a custom `generateReport` function that joins the formatted entries with newlines. The report is rendered into a `<pre>` element using vanilla `document.getElementById` and `textContent`.

Yyubeichen0826

84% match

Loading thumbnail…

Cars Report

This example displays a text-based report of affordable used cars, showing only the entries with a price under $2,000. It filters an embedded JavaScript array of car objects and formats each matching record into a single line containing the year, make, model, and price. The filtered results are joined with newlines and rendered inside a large `<pre>` element using the DOM API via `getElementById`. The code relies on standard JavaScript array methods, such as `filter`, `map`, and `join`, alongside the `formatCar` function for string composition, with the data and logic running entirely in the browser.

Ssambird1

84% match

Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price, showing each car’s year, make, model, and cost on a large HTML `<pre>` element. It fetches car data asynchronously from a hardcoded JSON array after a two-second delay, then filters vehicles under $2,000 and formats them into a list. The code uses JavaScript Promises via `getCars()`, string template literals in `formatCar`, and the array methods `filter`, `map`, and `join` within `generateReport`, with React not actively used despite being listed in the framework metadata.

KKenneth Goh

84% match