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.
 
 
 
 
 
 

2.3 KiB

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

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

Expected result

You can see an example of the expected result: video