Character Counter
Build a textarea with a 20-character limit and a live status region that shows how many characters remain.
Create a small "Character Counter" widget. Render a <textarea> with the placeholder Write... that accepts at most 20 characters. Below (or beside) it, show a live status message in an element with role="status" that reads {remaining} characters left, where remaining is 20 minus the number of characters currently typed.
On first render, nothing is typed, so the status reads 20 characters left. As the user types, the status updates immediately to reflect the remaining characters. The input must be hard-capped at 20 characters: any attempt to enter more than 20 characters is truncated/ignored, so the remaining count never goes below 0 (it never shows a negative number).
This is a classic controlled-input + derived-state exercise: keep the typed text in state, enforce the cap, and render the remaining count into an accessible live region.
Requirements
- Render a textarea with placeholder "Write..." that limits input to 20 characters maximum.
- Render a live region with role="status" whose text is "{remaining} characters left".
- The status starts at "20 characters left" before any typing.
- Typing updates the remaining count immediately as a controlled input.
- Input beyond 20 characters is truncated/ignored so the remaining count never becomes negative (never below 0).
Hints (3)
- Keep the typed text in a useState string and derive remaining as 20 - text.length.
- Make the textarea controlled (value + onChange) and slice the incoming value to the first 20 characters before storing it, so you never store more than 20 chars.
- Put the count in an element with role="status" so tests (and screen readers) can read it as a live region.
Topics
- React
- DOM Manipulation
Asked at
Hotstar · Flipkart · Dream11 · BrowserStack · Zomato · Nykaa
