Skip to main content
100%

Character & Word Count

✓ Published0🌍 Public
Aangusgrant
Last edited Oct 19, 2022
Created on Oct 19, 2022

This example shows a live character and word counter for user-entered text. As the user types into a textarea, the page updates two counts in real time: the total number of characters and the number of words, calculated by splitting the input on spaces and filtering out empty strings. The visualization uses plain HTML, CSS, and vanilla JavaScript, with the `input` event listener on the textarea and the `querySelector` API to update the displayed counts. No external libraries or data sources are involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Character Count

A textarea accepts user input and displays a live character count beneath it, updating as the user types or deletes. The page shows the current number of characters in bold, starting at zero when the field is empty. The code uses the browser’s native DOM `input` event and `event.target.matches()` to detect changes to the textarea, then updates the `#character-count` span’s text content via `document.querySelector()`. No external libraries are used; only plain JavaScript and HTML.

Aangusgrant
86% match
Loading thumbnail…

Character & Word Count - Announcing the Count

This interactive text editor displays live character and word counts as a user types. It shows the running totals in a sentence below the textarea, updating with each input event. The code uses the DOM API’s `querySelector` and `addEventListener` to bind an input listener, splitting the text on whitespace via a regular expression to count words, while character count is derived from the string’s `length` property. The page also includes ARIA live regions for screen-reader accessibility.

Aangusgrant
85% match
Loading thumbnail…

Letter Count Bar Chart

This interactive bar chart visualizes the frequency of each letter in a text file, updating live as the user types in a textarea. The chart loads Peter Piper’s tongue twister asynchronously via `d3.text`, counts characters with JavaScript, and renders SVG rectangles using `d3.scaleLinear` and `d3.scaleBand`. Axes are drawn with `d3.axisBottom` and `d3.axisRight`, and the chart animates with D3’s enter/update/exit pattern on each `keyup` event.

115Dkatz
61% match
Loading thumbnail…

Letter Count Visulization

This interactive letter-count visualization displays the frequency of each alphabetic character in a user-editable text area. It dynamically updates an SVG bar chart as the text changes, using D3.js v3 scales and axes to map letter counts to bar heights. The visualization loads initial text from a local file and animates bar transitions via D3 transitions when the input is modified.

Mmrharis1
59% match
Loading thumbnail…

Gist 16f833f25c52e08f53e5255e4db05a2e

This example shows a real-time typing game where a user’s input is matched against a target text, displaying victory and elapsed time in milliseconds. The code uses React state and event handlers (`onChange`) to update the displayed text as the user types. It renders the current user input in an input field and shows a congratulatory message once the correct text is entered. The visualization relies on basic DOM updates rather than a charting library, focusing on interaction feedback through a simple JSX template.

115Dkatz
58% match
Loading thumbnail…

People Counting App

This example shows a manual passenger-counting interface with a large numeric display, an INCREMENT button, and a SAVE button. The app tracks how many people have entered and logs previous entries in a running text string. Using plain JavaScript functions (`increment()` and `save()`), it updates the displayed count via `textContent` and resets the counter after each save. The visual design relies on CSS background styling with `background-image` and `background-size`, while the interface itself is built from static HTML buttons and headings without any external charting or data libraries.

GGayan Priyadarshana
58% match
Loading thumbnail…

textbox-outline

Typing into a text input updates an overlay of outlined boxes and arrows that segment the text into individual words, showing the word boundaries and their spacing. The visualization uses a hidden SVG layer synchronized with the input element’s rendered text, calculating character width from a monospace font. It is built with D3 selections and event handlers, rendering rectangles and text elements in SVG while reading the current input value on each keystroke.

11wheel
57% match
Loading thumbnail…

D3.js - Barchart for counting characters in text

This example visualizes character frequency in a text area as a horizontally oriented bar chart that updates dynamically with each keystroke or paste. It counts all characters, standardizing whitespace variants to a single "\\s" label, and color-codes bars by category: lowercase, uppercase, numbers, whitespace, and other symbols. Built with D3 v7, the chart uses `d3.scaleLinear` and `d3.scaleBand` for scaling, `d3.axisTop` and `d3.axisLeft` for ticks, and `selection.join` with transitions to animate bar height and position changes. The source text is derived from Nick Morgan's JavaScript Crash Course, 2024.

AAxVa 🐍 💪
56% match