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.
…
|
||
---|---|---|
.. | ||
README.md | ||
pick-and-click.html |
README.md
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 thebody
, so thehsl
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 adiv
with 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 in adiv
with the classluminosity
in the bottom left corner of the screen
- the full
- copies that value in the clipboard on click
- displays two SVG lines, with respective ids
axisX
andaxisY
, following the cursor like so:- the axisX has to set the attributes
x1
andx2
to the mouse X position - the axisY has to set the attributes
y1
andy2
to the mouse Y position
- the axisX has to set the attributes
Here is how a hsl value is formatted:
hsl(45, 50%, 35%)
Use
Math.round()
to round the values
Notions
- Copy event
- Mouse move event
- SVG:
createElementNS
,setAttribute
- Take a look at the HSL section
Files
You only need to create & submit the JS file pick-and-click.js
; we're providing you the following file to download (click right and save link) & test locally:
-
the HTML file pick-and-click.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