mirror of https://github.com/01-edu/public.git
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.
|
4 years ago | |
---|---|---|
.. | ||
README.md | 4 years ago | |
index.html | 4 years ago |
README.md
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 the
background
color of thebody
- displays those 3 values, using the
text
class:- the
hue
value in adiv
with the classhue
- the
luminosity
value in adiv
with the classluminosity
- the full
hsl
value
- the
- copies that value in the clipboard on click
- displays two SVG lines, with respective ids
axisX
andaxisY
, following the cursor
Notions
- Copy event
- Mouse move event
- SVG:
createElementNS
,setAttribute
- Take a look at the HSL section
Provided files
-
Check 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