mirror of https://github.com/01-edu/public.git
Made the instructions more precise of pick and click + removed optional css classes. (#610)
This commit is contained in:
parent
ee8604fc14
commit
3cce1f7d05
|
@ -4,16 +4,22 @@
|
|||
|
||||
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:
|
||||
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`
|
||||
- displays those 3 values, using the `text` class:
|
||||
- the `hue` value in a `div` with the class `hue`
|
||||
- the `luminosity` value in a `div` with the class `luminosity`
|
||||
- the full `hsl` value
|
||||
- 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 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
|
||||
|
||||
> Here is how a hsl value is formatted: `hsl(45, 50%, 35%)`
|
||||
|
||||
> Use `Math.round()` to round the values
|
||||
|
||||
### Notions
|
||||
|
||||
- [Copy event](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event)
|
||||
|
|
|
@ -71,56 +71,6 @@ svg line {
|
|||
left: 100px;
|
||||
}
|
||||
|
||||
/* optional elements */
|
||||
.origin {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 80px;
|
||||
left: 80px;
|
||||
border-radius: 50%;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.picked {
|
||||
opacity: 0;
|
||||
bottom: 100px;
|
||||
right: 100px;
|
||||
}
|
||||
|
||||
.click-wave {
|
||||
background: white;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
animation: wave 0.15s ease-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in 1s;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0.4;
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
Loading…
Reference in New Issue