From 838605bc5cb06f07f4b7326edf1e4b0f0d3ec847 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sat, 21 Apr 2018 11:32:43 -0700
Subject: [PATCH 01/23] play audio on keypress

---
 01 - JavaScript Drum Kit/index-START.html | 64 +++++++++++++----------
 01 - JavaScript Drum Kit/style.css        |  2 +
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..d8819b7c7c 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -9,56 +9,64 @@
 
 
   <div class="keys">
-    <div data-key="65" class="key">
-      <kbd>A</kbd>
+    <div data-key="a" class="key">
+      <kbd>a</kbd>
       <span class="sound">clap</span>
     </div>
-    <div data-key="83" class="key">
-      <kbd>S</kbd>
+    <div data-key="o" class="key">
+      <kbd>o</kbd>
       <span class="sound">hihat</span>
     </div>
-    <div data-key="68" class="key">
-      <kbd>D</kbd>
+    <div data-key="e" class="key">
+      <kbd>e</kbd>
       <span class="sound">kick</span>
     </div>
-    <div data-key="70" class="key">
-      <kbd>F</kbd>
+    <div data-key="u" class="key">
+      <kbd>u</kbd>
       <span class="sound">openhat</span>
     </div>
-    <div data-key="71" class="key">
-      <kbd>G</kbd>
+    <div data-key="h" class="key">
+      <kbd>h</kbd>
       <span class="sound">boom</span>
     </div>
-    <div data-key="72" class="key">
-      <kbd>H</kbd>
+    <div data-key="t" class="key">
+      <kbd>t</kbd>
       <span class="sound">ride</span>
     </div>
-    <div data-key="74" class="key">
-      <kbd>J</kbd>
+    <div data-key="n" class="key">
+      <kbd>n</kbd>
       <span class="sound">snare</span>
     </div>
-    <div data-key="75" class="key">
-      <kbd>K</kbd>
+    <div data-key="s" class="key">
+      <kbd>s</kbd>
       <span class="sound">tom</span>
     </div>
-    <div data-key="76" class="key">
-      <kbd>L</kbd>
+    <div data-key="d" class="key">
+      <kbd>d</kbd>
       <span class="sound">tink</span>
     </div>
   </div>
 
-  <audio data-key="65" src="sounds/clap.wav"></audio>
-  <audio data-key="83" src="sounds/hihat.wav"></audio>
-  <audio data-key="68" src="sounds/kick.wav"></audio>
-  <audio data-key="70" src="sounds/openhat.wav"></audio>
-  <audio data-key="71" src="sounds/boom.wav"></audio>
-  <audio data-key="72" src="sounds/ride.wav"></audio>
-  <audio data-key="74" src="sounds/snare.wav"></audio>
-  <audio data-key="75" src="sounds/tom.wav"></audio>
-  <audio data-key="76" src="sounds/tink.wav"></audio>
+  <audio data-key="a" src="sounds/clap.wav"></audio>
+  <audio data-key="o" src="sounds/hihat.wav"></audio>
+  <audio data-key="e" src="sounds/kick.wav"></audio>
+  <audio data-key="u" src="sounds/openhat.wav"></audio>
+  <audio data-key="n" src="sounds/boom.wav"></audio>
+  <audio data-key="t" src="sounds/ride.wav"></audio>
+  <audio data-key="h" src="sounds/snare.wav"></audio>
+  <audio data-key="s" src="sounds/tom.wav"></audio>
+  <audio data-key="d" src="sounds/tink.wav"></audio>
 
 <script>
-
+window.addEventListener('keydown', ev => {
+  // console.log({ key: ev.key  });
+  const aud = document.querySelector(`audio[data-key='${ev.key}`)
+  if (aud) {
+    // console.log({ aud  });
+    aud.currentTime = 0;
+    aud.play();
+  }
+})
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 075578c930..1ff1151058 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -15,6 +15,8 @@ body,html {
   min-height: 100vh;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
+  align-content: center;
 }
 
 .key {

From 5d3522c468b644392baac68804d72dca7b4b4cc6 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sat, 21 Apr 2018 11:58:10 -0700
Subject: [PATCH 02/23] add and remove highlight on key

---
 01 - JavaScript Drum Kit/index-START.html | 28 ++++++++++++++++-------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index d8819b7c7c..4afa864575 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,15 +58,27 @@
   <audio data-key="d" src="sounds/tink.wav"></audio>
 
 <script>
-window.addEventListener('keydown', ev => {
-  // console.log({ key: ev.key  });
-  const aud = document.querySelector(`audio[data-key='${ev.key}`)
-  if (aud) {
-    // console.log({ aud  });
-    aud.currentTime = 0;
-    aud.play();
+
+  const removeTransition = e => {
+    if (e.propertyName !== 'transform') return;
+    e.target.classList.remove('playing');
   }
-})
+const playSound = ev => {
+  const aud = document.querySelector(`audio[data-key='${ev.key}`)
+  if (!aud) return;
+
+  const key = document.querySelector(`div[data-key="${ev.key}"]`)
+  key.classList.add('playing')
+  aud.currentTime = 0
+  aud.play()
+}
+
+
+window.addEventListener('keydown', playSound);
+
+const keys = Array.from(document.querySelectorAll('.key'));
+keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
 </script>
 
 

From 4e15156621e2d9287b95805b50987143ce271d36 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sat, 21 Apr 2018 15:20:01 -0700
Subject: [PATCH 03/23] rotate second hand

---
 02 - JS and CSS Clock/index-START.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index ee7eaefb1f..b78a285f52 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>JS + CSS Clock</title>
+  <title>JS + oooo CSS Clock</title>
 </head>
 <body>
 
@@ -62,12 +62,24 @@
       background:black;
       position: absolute;
       top:50%;
+      transform: rotate(0deg);
+      transform-origin: 100%;
     }
 
   </style>
 
   <script>
 
+    const secondHand = document.querySelector('.second-hand');
+
+    function animateHands(ev) {
+      const now = new Date()
+      const sec = now.getSeconds();
+      const d = ((sec * 6) % 360) + 90;
+      console.log({ sec, d   });
+      secondHand.style.transform = `rotate(${d}deg)`;
+    }
+    window.setInterval(animateHands, 1000);
 
   </script>
 </body>

From ed5388761b04d3c6bcf213de49fc83190e95da9b Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sat, 21 Apr 2018 15:42:06 -0700
Subject: [PATCH 04/23] rotate and animate all

---
 02 - JS and CSS Clock/index-START.html | 31 +++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index b78a285f52..89268e42be 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -64,20 +64,41 @@
       top:50%;
       transform: rotate(0deg);
       transform-origin: 100%;
+      transition: all 0.5s;
+
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+
+    }
+
+    .second-hand {
+      height:2px;
+    }
+
+    .hour-hand {
+      height:12px;
     }
 
+
   </style>
 
   <script>
 
     const secondHand = document.querySelector('.second-hand');
+    const minuteHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
 
-    function animateHands(ev) {
+    function animateHands() {
       const now = new Date()
-      const sec = now.getSeconds();
-      const d = ((sec * 6) % 360) + 90;
-      console.log({ sec, d   });
-      secondHand.style.transform = `rotate(${d}deg)`;
+      const sd = ((now.getSeconds() * 6) % 360) + 90;
+      secondHand.style.transform = `rotate(${sd}deg)`;
+
+      const md = ((now.getMinutes() * 6) % 360) + 90;
+      minuteHand.style.transform = `rotate(${md}deg)`;
+
+      const hd = ((now.getHours()%12) * 30) + 90;
+      hourHand.style.transform = `rotate(${hd}deg)`;
+
+
     }
     window.setInterval(animateHands, 1000);
 

From b9158238e77d53a306f3600d601fc0465488532f Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sun, 22 Apr 2018 12:08:37 -0700
Subject: [PATCH 05/23] add css vars for color

---
 03 - CSS Variables/index-START.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 8a4f0d556e..dc418829c0 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -22,6 +22,12 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <style>
 
+    :root {
+      --base: rebeccapurple;
+      --blur: 8px;
+      --spacing: 20px;
+    }
+
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -42,6 +48,12 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width:100px;
     }
+
+    img {
+      filter: blur(var(--blur));
+      padding: var(--spacing);
+      background: var(--base);
+    }
   </style>
 
   <script>

From 24dcf0cb08f286627b87c10d2441fc86aa7940c7 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sun, 22 Apr 2018 12:35:06 -0700
Subject: [PATCH 06/23] Day three exercise: update CSS variables with
 JavaScript

---
 03 - CSS Variables/index-START.html | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index dc418829c0..bf62fb4e28 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -15,7 +15,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
     <label for="base">Base Color</label>
-    <input id="base" type="color" name="base" value="#ffc600">
+    <input id="base" type="color" name="base" value="rebeccapurple">
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -57,6 +57,24 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+
+    function handleChange (ev) {
+      const target = ev.target;
+      if (!target) return;
+
+      const suffix = this.dataset.sizing || '';
+
+      // why is `this` the same as event target?
+      //      console.log( this, ev.target  );
+      const { id, value } = ev.target;
+
+      document.documentElement.style.setProperty(`--${id}`, `${value}${suffix}`)
+    }
+
+    document.querySelectorAll('.controls input').forEach(el => {
+      el.addEventListener('change', handleChange);
+      el.addEventListener('mousemove', handleChange);
+    });
   </script>
 
 </body>

From 0dc98236215dfe680ca0911669f60dd516b5c9ce Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Mon, 23 Apr 2018 11:28:32 -0700
Subject: [PATCH 07/23] array cardio

---
 04 - Array Cardio Day 1/index-START.html | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..47b20ae7a4 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -29,31 +29,53 @@
 
     const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
 
+    const yearsLived = i => i.passed - i.year;
+
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    console.log( inventors.filter( i => i.year > 1500 && i.year < 1600)  );
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    console.log( inventors.map( i => [i.first, i.last]));
+
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    console.log( inventors.sort( (a,b) => a.year - b.year ));
+
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    console.log( inventors.reduce( (acc, cur) => acc + yearsLived(cur), 0));
 
     // 5. Sort the inventors by years lived
+    console.table( inventors
+        .sort((a,b) => yearsLived(b) - yearsLived(a))
+        .map( i => [yearsLived(i), i.first, i.last].join(' '))
+      )
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    // im skipping this; well understood
 
-
+    const extractNameComponents = name => {
+      const [last, first] = name.split(',');
+      return { last, first };
+    }
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    console.table( people
+      .map(extractNameComponents)
+      .sort( (a, b) => a.last > b.last ? 1 : -1)
+    )
+
 
     // 8. Reduce Exercise
     // Sum up the instances of each of these
     const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
 
+
   </script>
 </body>
 </html>

From 6a5bacb7362ad869e88465134a5f63c74471eb41 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Mon, 23 Apr 2018 12:36:53 -0700
Subject: [PATCH 08/23] Count instances of vehicle type in array using reduce

---
 04 - Array Cardio Day 1/index-START.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 47b20ae7a4..bb00653b7c 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -73,8 +73,14 @@
 
     // 8. Reduce Exercise
     // Sum up the instances of each of these
-    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
-
+    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'moped' ];
+    const counts = data.reduce( (acc, cur) =>
+      // clone the accumulator so we avoid mutating the value
+      Object.assign({}, acc, {
+        [cur]: acc[cur] ? acc[cur] + 1 : 1
+      }), {});
+
+    console.log( counts  );
 
   </script>
 </body>

From 9646cbf2d195d255ec5dc6798080f5345eb03310 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Tue, 24 Apr 2018 11:56:00 -0700
Subject: [PATCH 09/23] flexbox panels getting static layout going

---
 05 - Flex Panel Gallery/index-START.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index c6509bed02..fd378a11d4 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,14 +24,19 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
       text-align: center;
-      align-items:center;
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
       transition:
@@ -51,9 +56,14 @@
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
     .panel > * {
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      border: 1px solid pink;
     }
 
     .panel p {

From e8bc13b3a52f3e5c632800eb352163192304bd03 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Tue, 24 Apr 2018 15:10:45 -0700
Subject: [PATCH 10/23] open panel when clicked

---
 05 - Flex Panel Gallery/index-START.html | 28 ++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index fd378a11d4..f6e86150c5 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -71,13 +71,31 @@
       font-family: 'Amatic SC', cursive;
       text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
+      transition:transform 0.5s;
+    }
+
+    .panel :first-child {
+      border: aliceblue;
+      transform: translateY(-50%);
+    }
+
+    .panel.open-active :first-child,
+    .panel.open-active :last-child {
+      transform: translateY(0%);
+    }
+
+    .panel :last-child {
+      border: 2px solid darkgreen ;
+      transform: translateY(50%);
     }
+
     .panel p:nth-child(2) {
       font-size: 4em;
     }
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
   </style>
@@ -113,6 +131,16 @@
 
   <script>
 
+    function toggleOpen(el) {
+      console.log( {classlist: el.classList}  );
+      el.classList.toggle('open');
+    }
+
+    document.querySelectorAll('.panel').forEach(el =>
+      el.addEventListener('mousedown', () => toggleOpen(el))
+    );
+
+
   </script>
 
 

From adfaf87ec1ccde651c83b5c425400d39002742ee Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Tue, 24 Apr 2018 15:30:32 -0700
Subject: [PATCH 11/23] animate in other words when active. a little FP

---
 05 - Flex Panel Gallery/index-START.html | 28 +++++++++++++-----------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index f6e86150c5..ff7e66f01b 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -63,7 +63,6 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
-      border: 1px solid pink;
     }
 
     .panel p {
@@ -75,18 +74,16 @@
     }
 
     .panel :first-child {
-      border: aliceblue;
-      transform: translateY(-50%);
+      transform: translateY(-100%);
     }
 
-    .panel.open-active :first-child,
-    .panel.open-active :last-child {
+    .panel.open.active :first-child,
+    .panel.open.active :last-child {
       transform: translateY(0%);
     }
 
     .panel :last-child {
-      border: 2px solid darkgreen ;
-      transform: translateY(50%);
+      transform: translateY(100%);
     }
 
     .panel p:nth-child(2) {
@@ -131,14 +128,19 @@
 
   <script>
 
-    function toggleOpen(el) {
-      console.log( {classlist: el.classList}  );
-      el.classList.toggle('open');
+    function toggleClass (className, el, guard = () => true) {
+      return (e) => {
+        if (guard(e)) {
+          el.classList.toggle(className)
+        }
+      }
     }
 
-    document.querySelectorAll('.panel').forEach(el =>
-      el.addEventListener('mousedown', () => toggleOpen(el))
-    );
+    document.querySelectorAll('.panel').forEach(el => {
+      el.addEventListener('mousedown', toggleClass('open', el));
+      el.addEventListener('transitionend', toggleClass('active', el,
+        evt => evt.propertyName.includes('flex')));
+    });
 
 
   </script>

From f5bd32ccdc81cd1fa6e4bcbb1f5281b07e4449a9 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sat, 28 Apr 2018 12:10:40 -0700
Subject: [PATCH 12/23] add handlers for mousedown and up, draw in context a
 bit

---
 08 - Fun with HTML5 Canvas/index-START.html | 22 +++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..e6639e819a 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,28 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+
+  const canvas = document.getElementById('draw');
+  const ctx = canvas.getContext('2d');
+
+  let isDrawing = false;
+  let penPos = [0,0];
+
+  const handleMouseDown = e => {
+    isDrawing = true;
+    penPos = [e.offsetX, e.offsetY];
+    ctx.fillText('d', ...penPos);
+
+  }
+
+  const stopDrawing = e => {
+    isDrawing = false;
+    penPos = [e.offsetX, e.offsetY];
+    ctx.fillText('u', ...penPos);
+
+  }
+  document.addEventListener('mousedown', handleMouseDown);
+  document.addEventListener('mouseup', stopDrawing);
 </script>
 
 <style>

From 5dbb9d7d544f820cad0f2208ea841a91c74d0fa2 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sat, 28 Apr 2018 12:17:11 -0700
Subject: [PATCH 13/23] actually draw a line on mouse move

---
 08 - Fun with HTML5 Canvas/index-START.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index e6639e819a..a260d899bc 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -13,21 +13,35 @@
 
   let isDrawing = false;
   let penPos = [0,0];
+  let prevPos = [0,0];
 
   const handleMouseDown = e => {
     isDrawing = true;
     penPos = [e.offsetX, e.offsetY];
+    prevPos = penPos;
+    ctx.moveTo(...penPos);
     ctx.fillText('d', ...penPos);
-
   }
 
+
+  const handleMouseMove = e => {
+    if (isDrawing) {
+      prevPos = penPos;
+      penPos = [e.offsetX, e.offsetY];
+      ctx.lineTo(...penPos);
+      ctx.stroke();
+    }
+
+  }
   const stopDrawing = e => {
     isDrawing = false;
+    prevPos = penPos;
     penPos = [e.offsetX, e.offsetY];
     ctx.fillText('u', ...penPos);
 
   }
   document.addEventListener('mousedown', handleMouseDown);
+  document.addEventListener('mousemove', handleMouseMove);
   document.addEventListener('mouseup', stopDrawing);
 </script>
 

From 37b18848f87a72cb3bf4a2c9fec2e847e7de34e4 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sat, 28 Apr 2018 12:35:06 -0700
Subject: [PATCH 14/23] make the line change colors while drawing

---
 08 - Fun with HTML5 Canvas/index-START.html | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index a260d899bc..7d6d7bb29c 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -11,25 +11,36 @@
   const canvas = document.getElementById('draw');
   const ctx = canvas.getContext('2d');
 
+  ctx.lineJoin = 'round';
+  ctx.lineWidth = 20;
+  ctx.lineCap = 'round';
+
   let isDrawing = false;
   let penPos = [0,0];
   let prevPos = [0,0];
+  let hue = 0;
 
   const handleMouseDown = e => {
     isDrawing = true;
     penPos = [e.offsetX, e.offsetY];
     prevPos = penPos;
     ctx.moveTo(...penPos);
-    ctx.fillText('d', ...penPos);
+    ctx.beginPath()
   }
 
+  const updateHue = (origHue) => (origHue + 5) % 360;
 
   const handleMouseMove = e => {
     if (isDrawing) {
       prevPos = penPos;
+      ctx.beginPath();
+      ctx.moveTo(...prevPos);
       penPos = [e.offsetX, e.offsetY];
       ctx.lineTo(...penPos);
+      hue = updateHue(hue);
+      ctx.strokeStyle = `hsl(${hue}deg, 60%,50%)`;
       ctx.stroke();
+      ctx.closePath();
     }
 
   }
@@ -37,8 +48,6 @@
     isDrawing = false;
     prevPos = penPos;
     penPos = [e.offsetX, e.offsetY];
-    ctx.fillText('u', ...penPos);
-
   }
   document.addEventListener('mousedown', handleMouseDown);
   document.addEventListener('mousemove', handleMouseMove);

From 71f820903c298ca1cdc7b7071edbab4cfc6a5982 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sun, 29 Apr 2018 13:29:51 -0700
Subject: [PATCH 15/23] get clicks on items, working on shift-click to extend
 selection

---
 .../index-START.html                          | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index a02071ff00..576180f500 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -99,6 +99,28 @@
   </div>
 
 <script>
+
+  const indexOfFirstCheckedItem = () => {
+    return Array.from( document.querySelectorAll('input')).findIndex((e) => {
+      return e.checked;
+    });
+  }
+
+  const handleClick = (e) => {
+    console.log( `got click`  )
+    console.dir( e  );
+    const nodeIndex = Array.from(e.target.parentNode.children).indexOf(e.target);
+    console.log( nodeIndex  );
+    const firstChecked = indexOfFirstCheckedItem();
+    if (firstChecked >= 0) {
+      console.log( {firstChecked}  );
+    }
+  };
+
+  document.querySelectorAll('.item').forEach((item) => {
+    item.addEventListener('click', handleClick);
+  });
+
 </script>
 </body>
 </html>

From 6c2f6a00798d3aba76412ca00cf6b92b6b10cc25 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sun, 29 Apr 2018 14:15:33 -0700
Subject: [PATCH 16/23] extend selection upward works --using recursion to
 traverese nodes

---
 .../index-START.html                          | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index 576180f500..2d30c07b27 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -106,18 +106,41 @@
     });
   }
 
+  function extendSelectionDownwards (item) {
+    console.log( {item}  );
+    if (!item) {
+      return false;
+    }
+
+    const imp = item.children && item.children[0];
+    if (imp && imp.checked) {
+      return true;
+    }
+
+    const shouldExtend = extendSelectionDownwards(item.nextElementSibling);
+    if (shouldExtend) {
+      console.log( `i should extend!`  );
+      if (imp) {
+        imp.checked = true;
+        console.log( 'yep'  );
+      }
+      return true;
+    }
+
+    return false;
+  }
+
   const handleClick = (e) => {
-    console.log( `got click`  )
-    console.dir( e  );
-    const nodeIndex = Array.from(e.target.parentNode.children).indexOf(e.target);
-    console.log( nodeIndex  );
-    const firstChecked = indexOfFirstCheckedItem();
-    if (firstChecked >= 0) {
-      console.log( {firstChecked}  );
+    const {target, shiftKey} = e;
+    console.log({clickTargetChecked: target.checked, shiftKey});
+
+    if (target.checked && shiftKey) {
+      extendSelectionDownwards(target.parentElement.nextElementSibling);
     }
-  };
 
-  document.querySelectorAll('.item').forEach((item) => {
+  }
+
+  document.querySelectorAll('.item input').forEach((item) => {
     item.addEventListener('click', handleClick);
   });
 

From c3f95a8b1df184ea6ba33f6a58fede17621cb6f5 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sun, 29 Apr 2018 14:21:46 -0700
Subject: [PATCH 17/23] abstracted tree traversal into fn

---
 10 - Hold Shift and Check Checkboxes/index-START.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index 2d30c07b27..561a62cdee 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -106,7 +106,12 @@
     });
   }
 
-  function extendSelectionDownwards (item) {
+
+  const getNextItem = (item) => {
+    return item.nextElementSibling;
+  }
+
+  function extendSelection(item, traversalFn ) {
     console.log( {item}  );
     if (!item) {
       return false;
@@ -117,7 +122,7 @@
       return true;
     }
 
-    const shouldExtend = extendSelectionDownwards(item.nextElementSibling);
+    const shouldExtend = extendSelection(traversalFn(item), traversalFn);
     if (shouldExtend) {
       console.log( `i should extend!`  );
       if (imp) {
@@ -135,7 +140,7 @@
     console.log({clickTargetChecked: target.checked, shiftKey});
 
     if (target.checked && shiftKey) {
-      extendSelectionDownwards(target.parentElement.nextElementSibling);
+      extendSelection(getNextItem(target.parentElement), getNextItem);
     }
 
   }

From c1766cc6469adb53eed4044600441f52a78bfc96 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sun, 29 Apr 2018 14:31:54 -0700
Subject: [PATCH 18/23] cleanup

---
 .../index-START.html                          | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index 561a62cdee..047eb02d5f 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -100,19 +100,13 @@
 
 <script>
 
-  const indexOfFirstCheckedItem = () => {
-    return Array.from( document.querySelectorAll('input')).findIndex((e) => {
-      return e.checked;
-    });
-  }
-
 
-  const getNextItem = (item) => {
-    return item.nextElementSibling;
-  }
+  // tree traversal fn so we can abstract traversal
+  // out of recursive selection-extension logicn
+  const getNextItem = item => item.nextElementSibling;
+  const getPrevItem = item => item.previousElementSibling;
 
   function extendSelection(item, traversalFn ) {
-    console.log( {item}  );
     if (!item) {
       return false;
     }
@@ -124,10 +118,8 @@
 
     const shouldExtend = extendSelection(traversalFn(item), traversalFn);
     if (shouldExtend) {
-      console.log( `i should extend!`  );
       if (imp) {
         imp.checked = true;
-        console.log( 'yep'  );
       }
       return true;
     }
@@ -137,9 +129,10 @@
 
   const handleClick = (e) => {
     const {target, shiftKey} = e;
-    console.log({clickTargetChecked: target.checked, shiftKey});
 
     if (target.checked && shiftKey) {
+      // if u click between two then i extend both up and down
+      extendSelection(getPrevItem(target.parentElement), getPrevItem);
       extendSelection(getNextItem(target.parentElement), getNextItem);
     }
 
@@ -152,3 +145,4 @@
 </script>
 </body>
 </html>
+

From c58e93fc42c3c4e2d04e9f89a2be679f1f5163cf Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Sun, 29 Apr 2018 14:36:46 -0700
Subject: [PATCH 19/23] cleanup and comment

---
 .../index-START.html                            | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index 047eb02d5f..d928875bc4 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -106,18 +106,23 @@
   const getNextItem = item => item.nextElementSibling;
   const getPrevItem = item => item.previousElementSibling;
 
+  // Recursively extend selection
   function extendSelection(item, traversalFn ) {
     if (!item) {
+      // reached end of list so stop traversing
       return false;
     }
 
     const imp = item.children && item.children[0];
     if (imp && imp.checked) {
+      // The next item is checked, so we can
+      // stop traversing
       return true;
     }
 
-    const shouldExtend = extendSelection(traversalFn(item), traversalFn);
-    if (shouldExtend) {
+    // Ask the next sibling if the selection
+    // should be extended
+    if (extendSelection(traversalFn(item), traversalFn)) {
       if (imp) {
         imp.checked = true;
       }
@@ -128,12 +133,12 @@
   }
 
   const handleClick = (e) => {
-    const {target, shiftKey} = e;
+    const {target: {checked, parentElement}, shiftKey} = e;
 
-    if (target.checked && shiftKey) {
+    if (checked && shiftKey) {
       // if u click between two then i extend both up and down
-      extendSelection(getPrevItem(target.parentElement), getPrevItem);
-      extendSelection(getNextItem(target.parentElement), getNextItem);
+      extendSelection(getPrevItem(parentElement), getPrevItem);
+      extendSelection(getNextItem(parentElement), getNextItem);
     }
 
   }

From 3020ef61c75953dc92437332276b3bcd153a7851 Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Mon, 30 Apr 2018 11:02:53 -0700
Subject: [PATCH 20/23] implement Custom play pause button

---
 11 - Custom Video Player/index.html |  8 +++++---
 11 - Custom Video Player/scripts.js | 21 +++++++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 281a15eaa8..82700f4681 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -8,15 +8,17 @@
 <body>
 
    <div class="player">
-     <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
+     <video class="player__video viewer"
+            src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"
+     ></video>
 
      <div class="player__controls">
        <div class="progress">
         <div class="progress__filled"></div>
        </div>
        <button class="player__button toggle" title="Toggle Play">►</button>
-       <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
-       <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
+       <input title="volume" type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
+       <input title="rate" type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
      </div>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..5a00e84337 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,21 @@
+
+function setup() {
+  const video =  document.querySelector('.player__video');
+  const playButton =  document.querySelector('.player__button');
+  const volumeRange =  document.querySelector('.player__slider[name="volume"]');
+  const rateRange =  document.querySelector('.player__slider[name="playbackRate"]');
+  const skipButtons =  document.querySelectorAll('.player__button');
+
+  let isPlaying = false;
+  const togglePlay = (e) => {
+    isPlaying = !isPlaying;
+    if (isPlaying) {
+      video.play();
+    } else {
+      video.pause()
+    }
+  }
+    playButton.addEventListener('click', togglePlay);
+}
+
+setup();

From 68826ca2216dd9357ed475e4e9c3f8d40d76083e Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Mon, 30 Apr 2018 11:19:56 -0700
Subject: [PATCH 21/23] added volume and Playback rate slider functionality

---
 11 - Custom Video Player/index.html | 2 +-
 11 - Custom Video Player/scripts.js | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 82700f4681..13a26e7096 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -18,7 +18,7 @@
        </div>
        <button class="player__button toggle" title="Toggle Play">►</button>
        <input title="volume" type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
-       <input title="rate" type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
+       <input title="rate" type="range" name="playbackRate" class="player__slider" min="0.1" max="8" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
      </div>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index 5a00e84337..47d5319684 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -14,8 +14,13 @@ function setup() {
     } else {
       video.pause()
     }
-  }
-    playButton.addEventListener('click', togglePlay);
+  };
+
+  playButton.addEventListener('click', togglePlay);
+  volumeRange.addEventListener('change',
+    () => video.volume = volumeRange.value)
+  rateRange.addEventListener('change',
+    () => video.playbackRate = rateRange.value);
 }
 
 setup();

From 29874ae1a4213c84d0da69891543edaabde815ce Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Mon, 30 Apr 2018 11:59:26 -0700
Subject: [PATCH 22/23] simplify

---
 11 - Custom Video Player/scripts.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index 47d5319684..b8ac594215 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -5,15 +5,12 @@ function setup() {
   const volumeRange =  document.querySelector('.player__slider[name="volume"]');
   const rateRange =  document.querySelector('.player__slider[name="playbackRate"]');
   const skipButtons =  document.querySelectorAll('.player__button');
+  const progressBar =  document.querySelector('.progress__filled');
 
-  let isPlaying = false;
-  const togglePlay = (e) => {
-    isPlaying = !isPlaying;
-    if (isPlaying) {
-      video.play();
-    } else {
-      video.pause()
-    }
+  const togglePlay = () => {
+    const method = video.paused ? 'play' : 'pause';
+    video[method]();
+    playButton.textContent = video.paused ? '►' : '❚ ❚';
   };
 
   playButton.addEventListener('click', togglePlay);
@@ -21,6 +18,7 @@ function setup() {
     () => video.volume = volumeRange.value)
   rateRange.addEventListener('change',
     () => video.playbackRate = rateRange.value);
+
 }
 
 setup();

From 692ee6e2c819e9c7c127b2fea2636de9333fb3ad Mon Sep 17 00:00:00 2001
From: Benji Shine <git@bshine.net>
Date: Mon, 30 Apr 2018 12:19:24 -0700
Subject: [PATCH 23/23] implemented progress bar, cleanup, remove skip buttons

---
 11 - Custom Video Player/index.html |  3 +--
 11 - Custom Video Player/scripts.js | 30 +++++++++++++++++------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 13a26e7096..4efe61ad95 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -19,8 +19,7 @@
        <button class="player__button toggle" title="Toggle Play">►</button>
        <input title="volume" type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
        <input title="rate" type="range" name="playbackRate" class="player__slider" min="0.1" max="8" step="0.1" value="1">
-       <button data-skip="-10" class="player__button">« 10s</button>
-       <button data-skip="25" class="player__button">25s »</button>
+
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index b8ac594215..f9182d8ba0 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -1,24 +1,30 @@
-
-function setup() {
-  const video =  document.querySelector('.player__video');
-  const playButton =  document.querySelector('.player__button');
-  const volumeRange =  document.querySelector('.player__slider[name="volume"]');
-  const rateRange =  document.querySelector('.player__slider[name="playbackRate"]');
-  const skipButtons =  document.querySelectorAll('.player__button');
-  const progressBar =  document.querySelector('.progress__filled');
+function setup () {
+  const video = document.querySelector('.player__video');
+  const playButton = document.querySelector('.player__button');
+  const volumeRange = document.querySelector('.player__slider[name="volume"]');
+  const rateRange = document.querySelector('.player__slider[name="playbackRate"]');
+  const progressBar = document.querySelector('.progress__filled');
 
   const togglePlay = () => {
-    const method = video.paused ? 'play' : 'pause';
-    video[method]();
-    playButton.textContent = video.paused ? '►' : '❚ ❚';
+    const method = video.paused ? 'play' : 'pause'
+    video[method]()
+    playButton.textContent = video.paused ? '►' : '❚ ❚'
+  };
+
+  const updateProgress = () => {
+    const duration = video.duration || 8000;
+    const fraction = (video.currentTime / duration) * 100;
+    progressBar.style.flexBasis = `${fraction}%`
   };
 
   playButton.addEventListener('click', togglePlay);
+  video.addEventListener('click', togglePlay);
   volumeRange.addEventListener('change',
-    () => video.volume = volumeRange.value)
+    () => video.volume = volumeRange.value);
   rateRange.addEventListener('change',
     () => video.playbackRate = rateRange.value);
 
+  video.addEventListener('timeupdate', updateProgress)
 }
 
 setup();