Character counter

  • React
  • Exercises
  • Character counter

React exercise number 3

  • JSX
  • useState

Character counter

Let's build a React app to count characters!

Quick start

Start with this code as a boilerplate for the exercise.


Step 1:

Switch the input border color to green when the entered word has more than 10 characters, and switch it back to black when it has 10 characters or less.

Step 2:

Every time the number of characters of the entered word is 0 show a proper warning message. When the number of characters of the entered word is 1 or more, remove this warning message. Use the WarningMessage component located at /src/components/WarningMessage.jsx.

Step 3:

Do not allow the user to enter spaces on the input. To remove spaces from a string you can use the following function:

function removeSpaces(string) {
  return string.replaceAll(' ', '');

Step 4:

Every time the entered word includes numbers, show an error message in red. Use the component ErrorMessage located at /src/components/ErrorMessage.jsx which contains the error message. You can use the following function to check if a string includes at least one number.

function hasNumber(string) {
  return /\d/.test(string);

Step 5:

Add a reset button with the text "Reset" which clears the input field when clicked.

Step 6:

Add a button with the text "Uppercase" which, when clicked, causes the input text to be all in UPPERCASE.

Setp 7:

Change the app's background color to one of your choice.

Step 8:

Add a button with the text "Lowercase" which, when clicked, causes the input text to be all lowercase.

Step 9:

Create a component called SuccessMessage identical to the other error and alert message components, but with a green background and with the text "Valid word!". This component, which represents a success alert, must appear whenever the word entered does not contain numbers and has a number of characters greater than 0.


Step 1:

Add a square-shaped div, with height and width equal to the number of characters in the word times 10. For example, if the word is "windows" it has 7 characters, that is, multiplying by 10, we have 70, so your div will be a 70px by 70px square (this div must have a black background).

Step 2:

Add a color picker that allows the user to select the background color of the div you added in step 1. To select the color, you can use an input[type="color"] element as in the example below:

  onChange={(event) => {
    console.log(`New color value: ${}`);

Step 3:

Remove the UPPERCASE and lowercase buttons. After removing them, add a single button that will act as a toggle between UPPERCASE and lowercase. If the last time you clicked it it changed the text to UPPERCASE, now it will change it to lowercase, and vice versa. The text of the button must vary between "Uppercase" and "Lowercase" if it goes by the text UPPERCASE or lowercase, correspondingly.

Step 4:

If you haven't already, move the color picker code to a separate component called ColorPicker, and place it in the following path /src/components/ColorPicker.jsx.