Character Counter

A Twitter-style character counter that tracks input length in real time, warns when approaching the limit, and controls post button accessibility.

Live Demo

[https://ifeanyi234.github.io/character-counter/]

Screenshots

Default State:

Typing — Normal:

Warning State (under 20 characters remaining):

Post Button Enabled:

Features

• Real-time character count display (used / max)
• Counter turns red when under 20 characters remaining
• Post button disabled when input is empty or over the limit
• Reads max length directly from HTML attribute — change once, works everywhere
• Smooth color transition on warning state

Tech Stack

HTML, CSS, JavaScript (no frameworks)

What I Learned

• Using classList.add/remove to toggle styles from CSS instead of inline styles
• Reading HTML attributes directly in JS with element.maxLength
• Controlling button accessibility with the disabled property (boolean not string)
• input event vs keyup — input fires instantly, keyup has slight delay

Known Limitations

• No character count animation or circular progress indicator
• No post submission handling — button click does nothing yet

What I'd Improve With More Time

• Add a circular SVG progress ring around the counter like Twitter
• Hook up the Post button to actually submit or log the content
• Add a character breakdown showing words and characters separately