public/subjects/pick-and-click

Pick & click

Instructions

Today, you're gonna create your own color picker.

Write the function pick which creates a hsl color picker varying the hue and luminosity of the according to the position of the mouse, which:

• changes background of the body
• displays those 3 values, using the text class:
  • the hue value in a div with the class hue
  • the luminosity value in a div with the class luminosity
  • the full hsl value
• copies that value in the clipboard on click
• displays two SVG lines, with respective ids axisX and axisY, following the cursor

Notions

• Copy event
• Mouse move event
• SVG: createElementNS, setAttribute
• Take a look at the HSL section

Provided files

• Use the HTML file index.html, which includes:

  • the JS script which will allow to run your code
  • some CSS pre-styled classes: feel free to use those as they are, or modify them

Expected result

You can see an example of the expected result: