Skip to main content
Problem 1

Restricted Textarea

EASYBUILD
DOM+3

Given an integer maxLength, build a restricted textarea with a live character counter.

Requirements
  • Render a textarea with data-testid="restricted-textarea".
  • Render a counter with data-testid="remaining-counter".
  • The initial counter text must be exactly {maxLength} characters remaining.
  • On input, truncate the textarea value so it never exceeds maxLength.
  • The counter text must be exactly {remaining} characters remaining.
  • When remaining <= 10, the textarea border and counter text must be #e53e3e.
  • When remaining > 10, both warning styles must reset.
Examples
Example 1
Input
maxLength = 10
User types: "hello"
Output
Counter text: "5 characters remaining"
Example 2
Input
maxLength = 10
User pastes: "helloworld123"
Output
Textarea value: "helloworld"
Counter text: "0 characters remaining"
Note

Input truncated to maxLength.

Constraints
  • 1 <= maxLength <= 500
  • Counter text must match the exact format
  • Use JavaScript string length; test input uses ASCII characters
Follow-up

Use CSS classes instead of inline styles — add a `.warning` class and use `classList.toggle()`.

Hints
Related Practice
Track
Frontend Fundamentals

Keep moving through related frontend fundamentals problems and build a stronger search-friendly practice loop around this topic.

View track →
Problem 4
Live Search Filter
easy
Problem 11
Responsive Card Grid
easy
Problem 9
Cooldown Button
medium
Console output will appear here...