cf.completefrontend

Write the codeEasy

Build a controlled input with a character count

Build App: a text input labelled Name whose value lives in React state. Under it, a paragraph shows how many characters you've typed out of 20, like 0/20 at first and 3/20 after typing Ada.

Names can't be longer than 20 characters: once there are 20, more typing changes nothing. Clearing the input takes the count back to 0/20.

Write this (App.jsx)
export default function App() {
  return (
    <form>
      <label>
        Name <input />
      </label>
      <p>0/20</p>
    </form>
  );
}
The checks your code must pass
  • starts empty at 0/20
  • counts as you type
  • counts spaces too
  • stops at 20 characters
  • goes back to 0/20 when cleared

Try it in the editor

The answer

Write it yourself first. Then compare it with a reference solution and the checks it passes.

Checking your sign-in…