Skip to main content
ELYTE
EasyFrontendBuild

Restricted Textarea

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

Start problemBrowse all problems

What you will practice

HTMLCSSJavaScriptDOM & EventsForms & ValidationDOMEventsValidationStrings

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.

Starter files

index.htmlEditable template
styles.cssEditable starter
main.jsEditable starter

What the judge checks

  • Runs in the browser environment with the browser-eval runner.
  • Uses a 1500ms judge budget.
  • Requires test IDs: app, restricted-textarea, remaining-counter.
  • Checks formatted text for: remaining_counter, initial_counter.
  • Behavior rules include: Initial Render Required, Js Logic Required, Html Only Shortcut Disallowed, Character Counting.

Constraints

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

Example behavior

Input
maxLength = 10
User types: "hello"
Output
Counter text: "5 characters remaining"
Input
maxLength = 10
User pastes: "helloworld123"
Output
Textarea value: "helloworld"
Counter text: "0 characters remaining"

Input truncated to maxLength.

Follow-up

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