mirror of https://github.com/01-edu/public.git
docs(pick-and-click): correct grammar
This commit is contained in:
parent
a912624feb
commit
22e7c768a1
|
@ -2,43 +2,47 @@
|
|||
|
||||
### Instructions
|
||||
|
||||
Today, you're gonna create your own color picker.
|
||||
Today, you're going to 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:
|
||||
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.
|
||||
|
||||
- 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
|
||||
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.
|
||||
|
||||
> Here is how a hsl value is formatted: `hsl(45, 50%, 35%)`
|
||||
You'll need to display these three values:
|
||||
- The full `hsl` value in a `div`, which has 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 will be displayed in the bottom left corner of the screen, in a `div` with the class `luminosity`.
|
||||
|
||||
> Use `Math.round()` to round the values
|
||||
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` attributes `x1` and `x2` need to be set to the X position of the cursor.
|
||||
- the `axisY` attributes `y1` and `y2` 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](./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](https://www.youtube.com/watch?v=eE4eE9_eKZI)
|
||||
|
||||
### 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)
|
||||
- [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)
|
||||
- Take a look at the [HSL section](https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color)
|
||||
|
||||
### 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](./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](https://img.youtube.com/vi/eE4eE9_eKZI/0.jpg)](https://www.youtube.com/watch?v=eE4eE9_eKZI)
|
||||
|
|
Loading…
Reference in New Issue