Skip to main content
100%

Character & Word Count - Announcing the Count

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

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Character & Word Count

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.

Aangusgrant
85% match
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
79% 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
61% 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
60% 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
57% 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
56% match
Loading thumbnail…

counting things in javascript

A short JavaScript snippet counts word frequencies from a fixed string of text, using the array `reduce` method to tally occurrences and building a plain object that maps each word to its count. The example demonstrates a minimal functional programming pattern for aggregating categorical data, with the source data being a literal sentence split into an array of words. The output is logged to the console, showing a frequency distribution where repeated words like “pease” and “porridge” appear with higher counts than unique terms. No external libraries are used; the code relies solely on native JavaScript array and object methods.

Aamundo
56% 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 🐍 💪
55% match