From 3cce1f7d05345492a9666c988680162f3f0b3054 Mon Sep 17 00:00:00 2001 From: MarieMalarme Date: Thu, 18 Jun 2020 13:30:46 +0100 Subject: [PATCH] Made the instructions more precise of pick and click + removed optional css classes. (#610) --- subjects/pick-and-click/README.md | 20 +++++++----- subjects/pick-and-click/index.html | 50 ------------------------------ 2 files changed, 13 insertions(+), 57 deletions(-) diff --git a/subjects/pick-and-click/README.md b/subjects/pick-and-click/README.md index c8841cce..c564f6dc 100644 --- a/subjects/pick-and-click/README.md +++ b/subjects/pick-and-click/README.md @@ -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: - -- 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 +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 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) diff --git a/subjects/pick-and-click/index.html b/subjects/pick-and-click/index.html index 568855b6..93152cfb 100644 --- a/subjects/pick-and-click/index.html +++ b/subjects/pick-and-click/index.html @@ -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); - } -} -