## Pick & click
### Instructions
Today, you're gonna create your own color picker.
Write the function `pick` which turns the screen into a `hsl` color picker, varying the `hue` and `luminosity` of according to the position of the mouse, which:
- changes the `background` color of the `body` , so the `hsl` value is different on each mouse position on the screen:
- on the axis X, the hue value has to vary between 0 and 360
- on the axis Y, the luminosity value has to vary between 0 and 100
- displays those 3 values using the `text` class:
- the full `hsl` value in a `div` with the class `hsl` in the middle of the screen
- the `hue` value in a `div` with the class `hue` in the top right corner of the screen
- the `luminosity` value in a `div` with the class `luminosity` in the bottom left corner of the screen
- copies that value in the clipboard on click
- displays two SVG lines, with respective ids `axisX` and `axisY` , following the cursor like so:
- the axisX has to set the attributes `x1` and `x2` to the mouse X position
- the axisY has to set the attributes `y1` and `y2` to the mouse Y position
> Here is how a hsl value is formatted: `hsl(45, 50%, 35%)`
> Use `Math.round()` to round the values
### Notions
- [Copy event ](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event )
- [Mouse move event ](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event )
- [SVG ](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg ): [`createElementNS` ](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS ), [`setAttribute` ](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute )
- Take a look at the [HSL section ](https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color )
### Provided files
You have at your disposal the following file that you can download to test locally:
- the HTML file [index.html ](/public/subjects/pick-and-click/index.html ) to open in the browser, 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:
[](https://www.youtube.com/watch?v=eE4eE9_eKZI)
