Color picker

  • React
  • Exercises
  • Color picker

React exercise number 2

  • JSX
  • useState

Color picker

Let's build a simple color picker app using React!

Quick start

Start with this code as a boilerplate for the exercise.


Step 1

Take a look at the boilerplate code.

Step 2

Show on the page the HEX value of the chosen color.

Step 3

Add an input and a button to the page, and every time the user enters a HEX value on the input and clicks the button, the app sets the color entered on the input field as the chosen color.

Step 4

When the user clicks the button, if the value on the input field is not a valid HEX color, show an error message informing the user that the value entered is incorrect.

For simplicity reasons, assume that a valid value for an HEX color is a string that starts with a # and has 7 characters total.


Step 1

What about if the user selected 2 colors instead of just 1? Could we generate a gradient instead of a solid color in this case? 🤔