And anotha one

nitishdayal · nitishdayal · commit d201e4533bc2 · 2017-05-13T03:33:45.000-07:00
you loyal
diff --git a/exercises/11 - Custom Video Player/scripts.js b/exercises/11 - Custom Video Player/scripts.js
@@ -1,3 +1,4 @@
+"use strict";
 (() => {
   const player = document.querySelector(".player"),
     video = player.querySelector(".viewer"),
@@ -12,30 +13,38 @@
     handleProgress = () =>
       progressBar.style.flexBasis = `${video.currentTime / video.duration * 100}%`,
     scrub = e =>
-      video.currentTime = e.offsetX / progress.offsetWidth * video.duration;
-
-  video.addEventListener("click", togglePlay);
-  video.addEventListener("play", updateButton);
-  video.addEventListener("pause", updateButton);
-  video.addEventListener("timeupdate", handleProgress);
-
-  toggle.addEventListener("click", togglePlay);
+      video.currentTime = e.offsetX / progress.offsetWidth * video.duration,
+    progressMoved = e => mousedown && scrub(e),
+    progressUp = e => mousedown = false,
+    progressDown = e => mousedown = true,
+    bClick = b => video.currentTime += parseFloat(b.dataset.skip),
+    updateRange = (range, e) => video[range.name] = range.value;
 
   let mousedown = false;
-  progress.addEventListener("click", scrub);
-  progress.addEventListener("mousemove", e => mousedown && scrub(e));
-  progress.addEventListener("mousedown", () => mousedown = true);
-  progress.addEventListener("mouseup", () => mousedown = false);
 
-  skipButtons.forEach(button => {
-    button.addEventListener(
-      "click",
-      () => video.currentTime += parseFloat(button.dataset.skip)
-    );
-  });
+  const events = [
+    { event: "click", handler: togglePlay, target: video },
+    { event: "play", handler: updateButton, target: video },
+    { event: "pause", handler: updateButton, target: video },
+    { event: "timeupdate", handler: handleProgress, target: video },
+    { event: "click", handler: togglePlay, target: toggle },
+    { event: "click", handler: scrub, target: progress },
+    { event: "mousedown", handler: progressDown, target: progress },
+    { event: "mousemove", handler: progressMoved, target: progress },
+    { event: "mouseup", handler: progressUp, target: progress },
+    { event: "click", handler: bClick, target: skipButtons },
+    { event: ["change", "mousemove"], handler: updateRange, target: ranges }
+  ];
 
-  ranges.forEach(range => {
-    range.addEventListener("change", () => video[range.name] = range.value);
-    range.addEventListener("mousemove", () => video[range.name] = range.value);
-  });
+  events.forEach(
+    ({ event: e, handler: h, target: t }) =>
+      (t instanceof NodeList
+        ? t.forEach((el, i) => {
+            el.addEventListener(
+              typeof e === "string" ? e : e[i],
+              typeof h === "function" ? h.bind(null, el) : h[i].bind(null, el)
+            );
+          })
+        : t.addEventListener(e, h))
+  );
 })();
diff --git a/exercises/13 - Slide in on Scroll/index.html b/exercises/13 - Slide in on Scroll/index.html
@@ -139,18 +139,20 @@ <h1>Slide in on Scroll</h1>
     (() => {
       const sliderImages = document.querySelectorAll('.slide-in');
 
-      function debounce(func, wait = 20, immediate = true) {
+      const debounce = (func, wait = 20, immediate = true) => {
         let timeout;
-        return function () {
-          const context = this, args = arguments;
-          const later = function () {
+
+        return (...args)=> {
+          const later = () => {
             timeout = null;
-            if (!immediate) func.apply(context, args);
+            if (!immediate) func.apply(this, args);
           };
+
           const callNow = immediate && !timeout;
           clearTimeout(timeout);
           timeout = setTimeout(later, wait);
-          if (callNow) func.apply(context, args);
+
+          if (callNow) func.apply(this, args);
         };
       };
 
@@ -229,4 +231,4 @@ <h1>Slide in on Scroll</h1>
 
 </body>
 
-</html>
+</html>
