![]() |
2 years ago | |
---|---|---|
.. | ||
README.md | 2 years ago | |
pick-and-click.html | 4 years ago |
README.md
Pick & click
Instructions
Today, you're going to create your own color picker.
Write the function pick
which turns the screen into a hsl
color picker. It will vary the hue
and luminosity
according to the position of the mouse.
The background
color of the body
will change based on the position of the mouse on the screen.
- The X axis will vary the hue value between 0 and 360.
- The Y axis will vary the luminosity value between 0 and 100.
You'll need to display these three values:
- The full
hsl
value in adiv
, which has the classhsl
in the middle of the screen. - The
hue
value in adiv
with the classhue
in the top right corner of the screen. - The
luminosity
value will be displayed in the bottom left corner of the screen, in adiv
with the classluminosity
.
When the mouse is clicked, the value of the hsl
will need to copied to the clipboard.
Two SVG lines with ids axisX
and axisY
will need to follow the cursor, like really long cross hairs.
- the
axisX
attributesx1
andx2
need to be set to the X position of the cursor. - the
axisY
attributesy1
andy2
need to be set to the Y position of the cursor.
The formatting of a
hsl
value:hsl(45, 50%, 35%)
.
Use
Math.round()
to round the values.
Files
You only need to create & submit the JS file pick-and-click.js
; we're providing you the following file to download and test locally:
-
the HTML file pick-and-click.html to open in the browser, which includes:
- the JS script which will enable you 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 here
Notions
- Copy event
- Mouse move event
- SVG
- createElementNS
- setAttribute
- Take a look at the HSL section