forked from root/public
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 lines
1.0 KiB
25 lines
1.0 KiB
4 years ago
|
## 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` according to the position of the mouse, which:
|
||
|
|
|
||
|
|
- displays the `hue` value in text
|
||
|
|
- displays the `luminosity` value in text
|
||
|
|
- displays the full `hsl` value in text
|
||
|
|
- copies that value in the clipboard on click
|
||
|
|
- displays two lines, for X and Y axis, following the cursor
|
||
|
|
|
||
|
|
### 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)
|
||
|
|
|
||
|
|
### Expected result
|
||
|
|
|
||
|
|
You can see an example of the expected result:
|
||
|
|
[](https://www.youtube.com/watch?v=eE4eE9_eKZI)
|