Useful console methods

100%

Useful console methods

✓ Published0🌍 Public

Last edited Apr 27, 2017

Created on Apr 27, 2017

This example demonstrates the variety of output methods available in the browser console, ranging from simple logging and warnings to CSS-injected styling, object tables, timing, collapsed grouping, and counters. The code runs directly in the console without any libraries, using native Web Console API methods like `console.log`, `console.warn`, `console.error`, `console.info`, `console.debug`, `console.table`, `console.time`, `console.groupCollapsed`, and `console.count`. It shows static data arrays of employees to illustrate how each method formats and displays information, including string substitution and percentage-based styling for large text.

AI-generated description

Similar vizzes

Loading thumbnail…

JavaScripts Arrays

A web page titled "JavaScripts Arrays" demonstrates a minimal console-based interaction with JavaScript’s `typeof` operator. The page renders a single large, centered text message—"object"—as the visual output. The underlying code logs `typeof[]` to the browser’s developer console, showing that an empty array returns the string "object." The example uses plain HTML, CSS, and JavaScript, with no external libraries or data sources, to illustrate a fundamental type-checking behavior.

EEduard

64% match

Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring and template literal syntax, contrasting a concise ES6+ implementation with its transpiled ES5 equivalent. The page’s source code includes a hand-written JavaScript version using `const` and arrow functions, alongside a generated `'use strict'` script that employs `var` and helper functions like `printName` to achieve the same console output. The data being processed is a simple inline object literal with a name and age property. The visualization is purely textual, relying on the browser’s console to show the logged results of both code paths.

AAlsaxian

64% match

Loading thumbnail…

JavaScript Basics

This example demonstrates basic JavaScript syntax and concepts using console output. The code defines functions and objects, including a `person` arrow function that returns an object with `first` and `last` properties, and logs the result to the browser console. It also shows commented-out examples of variable declaration with `const` and `let`, loops, and arithmetic operations. The page uses a simple CSS class for styling but no external libraries or data sources.

CCeciliaW888

64% match

Loading thumbnail…

Javascript Basics (code in index.html)

This example demonstrates JavaScript basics by outputting results to the console, including arithmetic operations, comparisons, variable assignments, loops, and arrow functions. The final active code creates a `person` function that returns an object with first and last name properties, then logs the result. The visualization uses an empty SVG element and plain JavaScript with no external libraries, relying on browser console output for visible results.

Hhelloelectro

63% match

Loading thumbnail…

arrays

This example demonstrates fundamental JavaScript array operations through console logging, including iteration, filtering, sorting, mapping, and reducing. It shows a custom `range` function, a sorting comparator for numbers, and how to build objects from array entries using `reduce`. The code imports `ascending` and `descending` from D3 to illustrate library-based sorting, and relies on D3 version 7.3.0 for these utilities. The visualization itself is minimal—a single HTML page with a large styled message—while the core content lives in the script’s output.

SSamuele Greco

62% match

Loading thumbnail…

Javascript Arrays

This example demonstrates JavaScript array manipulation through console output, using a custom `range` function to generate numeric arrays and applying methods like `forEach`, `filter`, `map`, `reduce`, and `sort`. It also processes an array of key-value objects, converting them into a single object via `reduce` and sorting them with `d3.ascending` from D3 v7. The page itself is a minimal HTML/CSS structure displaying a static "Hello HTML!" message, with all array operations visible only in the browser’s developer console.

PPhan Nguyen

62% match

Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring of objects through a side-by-side comparison of original source code and the compiled output. The `index.html` file contains two script blocks: the first shows transpiled ES5 code using `var` declarations and manual property access, while the second shows the original ES6 source with `const` and destructuring assignment. The code logs names from objects to the console, illustrating how ES6 destructuring patterns translate into traditional variable assignments. The visualization uses plain HTML and JavaScript with no external libraries.

AAlsaxian

61% match

Loading thumbnail…

Gist 58ea1113852500390cf7cb5f0bd2d88c

This example demonstrates two JavaScript methods for converting between JavaScript objects and JSON format. It uses the native `JSON.parse()` function to transform a JSON string into an object, then accesses its properties to display "John, 30" via `document.getElementById().innerHTML`. A second example uses `JSON.stringify()` to convert a JavaScript array of names into a JSON string for output. The code relies on standard JavaScript APIs and renders results directly into HTML elements, illustrating basic data serialization without external libraries.

MMistyBlunch

61% match