javascript 27 lines · 7 steps

A live character counter for textareas

Attach an accessible, self-updating character count to any textarea and hand back a cleanup function.

Explained by highlit

Intermediate dom closures accessibility event-listeners cleanup

1function initCharacterCounter(textarea, options = {}) {
const maxLength = options.maxLength ?? 280;
const warnThreshold = options.warnThreshold ?? 0.9;
4 
const counter = document.createElement('div');
counter.className = 'char-counter';
counter.setAttribute('aria-live', 'polite');
textarea.insertAdjacentElement('afterend', counter);
9 
const update = () => {
  const length = [...textarea.value].length;
  const remaining = maxLength - length;
13 
  counter.textContent = `${remaining} character${remaining === 1 ? '' : 's'} remaining`;
  counter.classList.toggle('char-counter--warning', length >= maxLength * warnThreshold);
  counter.classList.toggle('char-counter--error', remaining < 0);
  textarea.setAttribute('aria-invalid', String(remaining < 0));
};
19 
textarea.addEventListener('input', update);
update();
22 
return () => {
  textarea.removeEventListener('input', update);
  counter.remove();
};
27}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Returning a teardown function lets callers undo every side effect the setup created.
2aria-live and aria-invalid keep dynamic UI changes legible to screen readers.
3Spreading a string into an array counts Unicode code points rather than UTF-16 units.

Related explainers

javascript

const ROLE_PERMISSIONS = {
  admin: ['users:read', 'users:write', 'billing:read', 'billing:write'],
  manager: ['users:read', 'billing:read'],
  member: ['users:read'],

Role-based permissions middleware in Express

authorization middleware rbac

Intermediate 9 steps

javascript

function attachThousandSeparators(input, { locale = 'en-US' } = {}) {
  const formatter = new Intl.NumberFormat(locale);
  const groupSep = formatter.format(11111).replace(/\d/g, '')[0] || ',';
  const decimalSep = formatter.format(1.1).replace(/\d/g, '')[0] || '.';

Live thousand separators without losing the caret

dom intl caret-preservation

Advanced 8 steps

javascript

import { useReducer, useEffect } from "react";
 
const initialState = { status: "idle", data: null, error: null };

Building a data-fetching hook in React

custom-hooks usereducer data-fetching

Intermediate 9 steps

javascript

const express = require('express');
const app = express();
 
app.get('/health', (req, res) => res.json({ status: 'ok' }));

Graceful shutdown in an Express server

graceful-shutdown signal-handling connection-tracking

Advanced 9 steps

javascript

import { useState, useEffect, useCallback } from 'react';
 
function getColumnCount(width) {
  if (width < 640) return 1;

A responsive column hook in React

custom-hooks debouncing responsive-design

Intermediate 7 steps

javascript

function autoResizeTextarea(textarea, { maxHeight = Infinity } = {}) {
  const resize = () => {
    textarea.style.height = 'auto';
    const contentHeight = textarea.scrollHeight;