JS Practice

100%

✓ Published0🌍 Public

Last edited Dec 5, 2019

Created on Dec 5, 2019

This example demonstrates how to display a single data value on a webpage using JavaScript. It loads a hardcoded array of car objects from `cars.js`, parses it with `JSON.parse`, and retrieves the `make` property of the first car. The result is inserted into the page’s DOM via `document.getElementById` and assigned to `textContent`. The page uses a large pre-styled element with a custom Ubuntu font and a dark blue background from `styles.css`.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

js_example

This example demonstrates JavaScript object manipulation and data filtering by displaying a car's make in an HTML page. The code imports a JSON array of car objects and selects the first entry to render its manufacturer name in a large text element. It uses native JavaScript functions like `JSON.parse` and array methods such as `filter` and `map`, along with ES6 module imports. The visualization relies on a pre-generated bundle script and fetches no external data, instead using embedded car records from the local `cars.js` file.

AAlejandro Lozada

82% match

Loading thumbnail…

Cars Report

This example displays a single car make—Honda—in large text on a dark blue page. It demonstrates basic module loading and DOM manipulation with vanilla JavaScript, importing a car dataset from a JSON string parsed in `car.js`. The page renders the first record’s make using `document.getElementById` and `textContent`, with styling from an external CSS file that sets the Ubuntu font and background color. The visualization is minimal, serving as a template for data-driven text output.

Aamoustafa93

82% match

Loading thumbnail…

Viz Tester

This example demonstrates a minimal web-based visualization practicum that loads a static array of car objects from a local JavaScript module and displays the first car’s make inside a designated HTML paragraph element. The page uses plain JavaScript with an ES module import to fetch the data from `cars.js`, then writes the string to the DOM via `document.getElementById` and `innerHTML`. Styling applies a large Jost font and red highlights via CSS, while the page includes a header and message area.

FFink Nottle

82% match

Loading thumbnail…

Cars report

This example displays the make of the first car in a hardcoded JSON array as large text on a webpage. The code imports the car data from a `cars.js` module, parses it with `JSON.parse`, and uses vanilla JavaScript to set the `textContent` of a `<pre>` element. Styling applies a custom Ubuntu font and a dark blue background via CSS, with no external visualization libraries involved.

Cclara6

81% match

Loading thumbnail…

HTML Starter

This example shows how to display a single value from a static JSON dataset in a web page. It parses an embedded array of car objects using `JSON.parse` and writes the first car’s make to the page via `document.getElementById` and `textContent`. The page structure is defined in HTML with a `<pre>` element, styled by inline CSS, and the JavaScript logic runs in the browser without any external libraries or frameworks.

SSwetha Susan George

81% match

Loading thumbnail…

Cars Report

This example displays a single car make in large text on a webpage, showing the first entry from a hardcoded JSON dataset of three cars. The code parses the JSON string using `JSON.parse` and accesses the first object’s `make` property with `cars[0].make`. It then updates the HTML element’s text content via `document.getElementById('message-element').textContent`. The visualization relies on a simple DOM manipulation API, with the data stored locally in `cars.js` and bundled for the browser.

MMaxwellHarper

80% match

Loading thumbnail…

Cars report

This example renders a single car make from a hardcoded JSON array onto a webpage using plain JavaScript and the DOM API. It displays the text “honda” at a large font size against a dark blue background, styled with an imported Ubuntu font from Google Fonts. The data is parsed via `JSON.parse` and accessed through array indexing, with the result written to a `pre` element using `textContent`. No external visualization libraries are used.

Cclara6

80% match

Loading thumbnail…

Cars Report

This example displays a single car make, “Honda,” pulled from a hardcoded JSON array of five vehicle entries (year, make, model, price) defined in `cars.js` and parsed with `JSON.parse`. The code uses plain JavaScript to select an element by ID via `document.getElementById` and writes the text content to the page. No D3 version 6 APIs or visual elements are employed; the demonstration focuses on importing an ES module and manipulating the DOM directly.

Ttssytrack

80% match