Made the instructions more precise of pick and click + removed optional css classes. (#610)

4 years ago · 3cce1f7d05
2 changed files with 13 additions and 57 deletions
--- 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)
--- 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);
-  }
-}
-
  </style>
 </head>
 <body>