Character Counter

Easy
Free
#Forms and Inputs

Build a character counter for a profile bio: as you type, it shows how many of the 100 characters are left and warns when the bio is too long. You'll practice keeping the text in useState and working out the count and the warning from it on every render. The starter has the MAX_LENGTH limit, and the page's Bio box, "Characters left:" line and "too long" warning.

Requirements

  • The Bio box starts empty, and the "Characters left:" line shows how many of the MAX_LENGTH (100) characters are left, so 100 at first.
  • The number updates on every keystroke: typing "Hello" leaves 95, and deleting characters brings it back up.
  • You can keep typing past the limit, and the number goes below zero: a 105-character bio shows -5.
  • The "too long" warning shows only while the bio is longer than 100 characters. At exactly 100 it isn't shown, and it goes away again once the bio is short enough.

React docs

Concepts you'll practice