exercises 8 + 10

nitishdayal · nitishdayal · commit 79e7a228fb87 · 2017-05-13T02:24:34.000-07:00
diff --git a/exercises/08 - Fun with HTML5 Canvas/index.html b/exercises/08 - Fun with HTML5 Canvas/index.html
@@ -30,11 +30,11 @@
 
       // Declare & define variable reference for current & last mouse location
       const mouse = { x: 0, y: 0 },
-        last_mouse = { ...mouse};
+            last_mouse = { ...mouse};
 
       // Declare & define variables to change line hue & line width
       let hue = 0,
-        increaseLineWidth = true;
+          increaseLineWidth = true;
 
       // mousedown event handler function
       const quickDraw = () => {
@@ -45,9 +45,11 @@
         ctx.closePath();              // Create path starting from moveTo and ending at lineTo
         ctx.stroke();                 // Draw the defined path on the canvas
 
-        hue >= 360 ? hue = 0 : hue++; // Ternary operator to reset/increase hue value
+        // Ternary operator to reset/increase hue value
+        hue >= 360 ? 0 : hue++;
 
-        increaseLineWidth ? ctx.lineWidth++ : ctx.lineWidth--; // Ternary operator to increase/decrease line width
+        // Ternary operator to increase/decrease line width
+        increaseLineWidth ? ctx.lineWidth++ : ctx.lineWidth--;
 
         // Width of line increases or decreases, staying within a value of 1-100.
         if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) increaseLineWidth = !increaseLineWidth;
@@ -59,15 +61,24 @@
         [last_mouse.x, last_mouse.y, mouse.x, mouse.y] = [mouse.x, mouse.y, e.offsetX, e.offsetY];
       }
 
+      // An object with key/value pairs corresponding with the name of the action
+      // and the function we want to for that action
       const quick = {
         add: () => myCanvas.addEventListener('mousemove', quickDraw),
         rem: () => myCanvas.removeEventListener('mousemove', quickDraw)
       }
+
+      // Array of event + eventHandler objects to iterate over and use
+      // as arguments for adding event listeners to myCanvas
+      const evs = [
+        {e: 'mousemove', h: setMouseLocation},
+        {e: 'mousedown', h: quick.add},
+        {e: 'mouseup', h: quick.rem},
+        {e: 'mouseout', h: quick.rem}
+      ];
+
       // Attach event listeners
-      myCanvas.addEventListener('mousemove', setMouseLocation);
-      myCanvas.addEventListener('mousedown', quick.add);
-      myCanvas.addEventListener('mouseup', quick.rem);
-      myCanvas.addEventListener('mouseout', quick.rem);
+      evs.forEach(({e, h}) => { myCanvas.addEventListener(e, h); });
     })(); // Immediately invoke anonymous function
 
   </script>
diff --git a/exercises/10 - Hold Shift and Check Checkboxes/index.html b/exercises/10 - Hold Shift and Check Checkboxes/index.html
@@ -60,7 +60,7 @@
   <!--
    The following is a common layout you would see in an email client.
 
-   When a user clicks a checkbox, holds Shift, and then clicks another checkbox a 
+   When a user clicks a checkbox, holds Shift, and then clicks another checkbox a
    few rows down, all the checkboxes inbetween those two checkboxes should be checked.
   -->
   <div class="inbox">
@@ -105,43 +105,52 @@
   <script>
     // Wrap JS code in an IIFE, creating a closure so as to not pollute the global namespace
     (() => {
+
+      // Declare variable that will be defined later as the input that the user
+      // most recently selected
+      let lastSelected;
+
       // Declare & define constant as a reference to all inputs of type checkbox
       // that are children of the 'inbox' class
       const checkBoxes = document.querySelectorAll('.inbox input[type="checkbox"]');
-      // Declare variable that will be defined later
-      let lastSelected;
 
       // Event Handler function
-      function multiCheck(e) {
+      const multiCheck = (el, e) => {
 
         // If the lastSelected variable is defined and the shift key was pressed
         // when this event triggered...
         if (lastSelected && e.shiftKey) {
-          // Set checked property of function context to be the same as the
+
+          // Set checked property of checkbox to be the same as the
           // checked property of the last selected input
-          this.checked = lastSelected.checked;
-          // Declare two variables 
-          let startIdx, endIdx;
-          // If the ID of the function context is greater than the ID of the last selected input...
-          this.id > lastSelected.id ?
-            // ...define variable startIdx as last selected input ID and endIdx as function context ID
-            [startIdx, endIdx] = [lastSelected.id, this.id] :
+          el.checked = lastSelected.checked;
+
+          // If the ID of the checkbox is greater than the ID of the last selected input...
+          const [startIdx, endIdx] = el.id > lastSelected.id ?
+            // ...define variable startIdx as last selected input ID and endIdx as checkbox ID
+            [lastSelected.id, el.id] :
             // ...if not, switch variable definitions
-            [startIdx, endIdx] = [this.id, lastSelected.id];
+            [el.id, lastSelected.id];
 
           // Declare & define constant as an array of inputs between the last selected input
-          // and the function context input
-          const middleInputs = Array.from(checkBoxes).slice(parseInt(startIdx) + 1, endIdx);
-          // Set checked property of each input to match checked property of function context input
-          middleInputs.forEach(checkbox => checkbox.checked = this.checked);
-        } // If no lastSelected or shiftKey was not pressed, entire if statement is skipped
+          // and the checkbox input
+          const middleInputs = [...checkBoxes].slice(parseInt(startIdx) + 1, endIdx);
+
+          // Set checked property of each input to match checked property of checkbox input
+          middleInputs.forEach(checkbox => checkbox.checked = el.checked);
+        }
+
+        // If no lastSelected or shiftKey was not pressed, entire if statement is skipped
         // Define lastSelected as the input that was the checked which triggered the event handler
-        lastSelected = this;
+        lastSelected = el;
       }
+
       // Add event listener to each input that will call multiCheck function on the 'click' event
-      checkBoxes.forEach(checkBox => checkBox.addEventListener('click', multiCheck));
+      checkBoxes.forEach(checkBox => {
+        checkBox.addEventListener('click', multiCheck.bind(null, checkBox));
+      });
     })();
   </script>
 </body>
 
-</html>
+</html>
