Color Picker

Create a color picker with 2 components. One component should contain the slider and the label. The other component will be a div to display the color. Use the useEffect how to make it so that the hex color value is create updates the div component.

Code Copy

const rgbToHex = function (rgb) {
  var hex = Number(rgb).toString(16);
  if (hex.length < 2) {
    hex = "0" + hex;
  }
  return hex;
};

export const fullColorHex = function (r, g, b) {
  var red = rgbToHex(r);
  var green = rgbToHex(g);
  var blue = rgbToHex(b);
  return "#" + red + green + blue;
};

Learning Goals

  • How to create components and pass in props
  • How to make your components reactive with useEffect
  • Practice useState
  • Practice Events

Code

Demo

Resource