Money input

Your task is to create an input that allows entering a numeric value, and on blur shows a user-friendly formatted text.

Requirements:

  • By default, the input should be empty.
  • When the input is focused, change the type attribute to number, so that the user can enter only a valid number.
  • When the input is blurred, change the type attribute to string, and format the number according to the below rules.
    • Prefix it with a $ character.
      Example: 123 -> $123
    • Separate thousands by a comma.
      Example: 1000 -> $1,000
    • If the value is less than 0, wrap it in parentheses.
      Example: -1000 -> ($1,000)
    • Support the fraction part properly (max 4 characters) and separate it always with a dot character.
      Example: 1000.54 -> $1,000.54
  • It should be possible to clear the input. Format it as an empty string as well.

You are free to add classes, styles, ids, but don't edit or remove data-test attributes.
Create an account to start coding
Create account