From e15ea709a7b9e84653a5e5ba2110a107ef2f0914 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Tue, 30 Jun 2020 01:15:54 -0400
Subject: [PATCH 01/27] day 1

---
 01 - JavaScript Drum Kit/index-START.html | 68 ++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..d97cb740ff 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -7,7 +7,8 @@
 </head>
 <body>
 
-
+  <!-- data key here is a user defined attribute storing custom data on any HTML element. -->
+  <!-- data key here correspond to a keyCode in the keydown event. -->
   <div class="keys">
     <div data-key="65" class="key">
       <kbd>A</kbd>
@@ -58,9 +59,72 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+  
+  function transitionAndPlaySound (e) {
+	// add the audio
+	const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+	
+	// add the transition
+	const keyBox = document.querySelector(`div[data-key="${e.keyCode}"]`);
+	
+	// if either audio or key does not exist: return
+	if (!audio || !keyBox) {
+	  return;
+	}
+	
+	// otherwise play audio
+	// clear out the audio first, so consecutive key press will not wait for the previous one to finish
+	// see here: https://www.w3schools.com/tags/ref_av_dom.asp
+	audio.currentTime = 0;
+	audio.play();
+	
+	// transition by adding css class: playing (this works because of .key class's transition)
+	keyBox.classList.add('playing');
+	
+	// this transition effect will not disappear since we did not remove the playing class. 
+	// do not use a setTimeout here, since we have to modify it both in the css file and the script
+  };
+  
+  function transitionRemove (e) {
+	// remove the transition effect
+	// since there are more than one transition event per key press, take the longest taking event
+	// so that when we remove the whole transition will be completed
+	if (e.propertyName === 'transform') {
+	
+	  // here this is whatever the method is attached to before the dot (so key b/c key.addEventListener)
+	  this.classList.remove('playing');
+	  // e.srcElement.classList.remove('playing');
+	}
+	
+	return;
+  };
+  
+  // get all keys and add a listener for each
+  const allKeys = document.querySelectorAll('.key');
+  allKeys.forEach(function (key) {
+	key.addEventListener('transitionend', transitionRemove)
+  });
+  
+  window.addEventListener('keydown', transitionAndPlaySound);
+  
+  
 </script>
 
 
 </body>
 </html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

From 0842f41152f7bee0787e27551e41e7ba51f4840a Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Tue, 30 Jun 2020 12:27:37 -0400
Subject: [PATCH 02/27] refactor day 1, wrap with IIFE

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index d97cb740ff..63692877c3 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,55 +59,55 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  
-  function transitionAndPlaySound (e) {
-	// add the audio
-	const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-	
-	// add the transition
-	const keyBox = document.querySelector(`div[data-key="${e.keyCode}"]`);
-	
-	// if either audio or key does not exist: return
-	if (!audio || !keyBox) {
-	  return;
-	}
-	
-	// otherwise play audio
-	// clear out the audio first, so consecutive key press will not wait for the previous one to finish
-	// see here: https://www.w3schools.com/tags/ref_av_dom.asp
-	audio.currentTime = 0;
-	audio.play();
-	
-	// transition by adding css class: playing (this works because of .key class's transition)
-	keyBox.classList.add('playing');
-	
-	// this transition effect will not disappear since we did not remove the playing class. 
-	// do not use a setTimeout here, since we have to modify it both in the css file and the script
-  };
-  
-  function transitionRemove (e) {
-	// remove the transition effect
-	// since there are more than one transition event per key press, take the longest taking event
-	// so that when we remove the whole transition will be completed
-	if (e.propertyName === 'transform') {
-	
-	  // here this is whatever the method is attached to before the dot (so key b/c key.addEventListener)
-	  this.classList.remove('playing');
-	  // e.srcElement.classList.remove('playing');
-	}
-	
-	return;
-  };
-  
-  // get all keys and add a listener for each
-  const allKeys = document.querySelectorAll('.key');
-  allKeys.forEach(function (key) {
-	key.addEventListener('transitionend', transitionRemove)
-  });
-  
-  window.addEventListener('keydown', transitionAndPlaySound);
-  
-  
+  (function(){
+    function transitionAndPlaySound (e) {
+      // add the audio
+      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+
+      // add the transition
+      const keyBox = document.querySelector(`div[data-key="${e.keyCode}"]`);
+
+      // if either audio or key does not exist: return
+      if (!audio || !keyBox) {
+        return;
+      }
+
+      // otherwise play audio
+      // clear out the audio first, so consecutive key press will not wait for the previous one to finish
+      // see here: https://www.w3schools.com/tags/ref_av_dom.asp
+      audio.currentTime = 0;
+      audio.play();
+
+      // transition by adding css class: playing (this works because of .key class's transition)
+      keyBox.classList.add('playing');
+
+      // this transition effect will not disappear since we did not remove the playing class.
+      // do not use a setTimeout here, since we have to modify it both in the css file and the script
+    }
+
+    function transitionRemove (e) {
+      // remove the transition effect
+      // since there are more than one transition event per key press, take the longest taking event
+      // so that when we remove the whole transition will be completed
+      if (e.propertyName === 'transform') {
+
+        // here this is whatever the method is attached to before the dot (so key b/c key.addEventListener)
+        this.classList.remove('playing');
+        // e.srcElement.classList.remove('playing');
+      }
+
+      // ignore other properties
+    }
+
+    // get all keys and add a listener for each
+    const allKeys = document.querySelectorAll('.key');
+    allKeys.forEach(function (key) {
+      key.addEventListener('transitionend', transitionRemove)
+    });
+
+    window.addEventListener('keydown', transitionAndPlaySound);
+  })();
+
 </script>
 
 

From c73d13fffe639d7a57a4ceba33b7d12276c7d87c Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Tue, 30 Jun 2020 14:42:27 -0400
Subject: [PATCH 03/27] day 2 try 1

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

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 7a6d27d5bd..588c0c6565 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -62,12 +62,75 @@
       background: black;
       position: absolute;
       top: 50%;
+      transform: rotate(90deg);
+      transform-origin: 100%;
+      transition-timing-function: cubic-bezier(0.35, 2.12, 0.58, 1);
+      transition: all 0.05s;
     }
 
   </style>
 
   <script>
+    (function() {
+      const secHand = document.querySelector('.second-hand');
+      const minHand = document.querySelector('.min-hand');
+      const hourHand = document.querySelector('.hour-hand');
 
+      function initHands() {
+        const date = new Date;
+        const sec = date.getSeconds();
+        const min = date.getMinutes();
+        const h = date.getHours();
+
+        const secDeg = ((sec / 60) * 360) + 90;
+        const minDeg = ((min / 60) * 360) + 90;
+        const hDeg = ((h / 12) * 360) + 90;
+
+        secHand.style.transform = `rotate(${secDeg}deg)`;
+        minHand.style.transform = `rotate(${minDeg}deg)`;
+        hourHand.style.transform = `rotate(${hDeg}deg)`;
+      }
+
+      function moveSec() {
+        // the date must be in the function since Date is a single moment in time
+        const date = new Date;
+        const sec = date.getSeconds();
+
+        // change the sec into degree of rotation, with an initial rotation of 90deg (to start at 12:00)
+        const secDeg = ((sec / 60) * 360) + 90;
+
+        // make the rotation into html
+        secHand.style.transform = `rotate(${secDeg}deg)`;
+      }
+
+      function moveMin() {
+        const date = new Date;
+        const min = date.getMinutes();
+
+        // change minute into degree of rotation
+        const minDeg = ((min / 60) * 360) + 90;
+
+        // make rotation into html
+        minHand.style.transform = `rotate(${minDeg}deg)`;
+      }
+
+      function moveH() {
+        const date = new Date;
+        const h = date.getHours();
+
+        // change minute into degree of rotation
+        const hDeg = ((h / 12) * 360) + 90;
+
+        // make rotation into html
+        hourHand.style.transform = `rotate(${hDeg}deg)`;
+      }
+
+      initHands();
+      setInterval(moveSec, 1000);
+      setInterval(moveMin, 60000);
+      setInterval(moveH, 60 * 60000);
+
+    })();
 
   </script>
 </body>

From 691d6de53a7ad46357f7267056c685d3aabbea7a Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Tue, 30 Jun 2020 21:20:19 -0400
Subject: [PATCH 04/27] day 2 refactor

---
 02 - JS and CSS Clock/index-START.html | 152 +++++++------------------
 02 - JS and CSS Clock/style.css        |  58 ++++++++++
 2 files changed, 96 insertions(+), 114 deletions(-)
 create mode 100644 02 - JS and CSS Clock/style.css

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 588c0c6565..145fef9cd1 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -3,10 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <title>JS + CSS Clock</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
-
     <div class="clock">
       <div class="clock-face">
         <div class="hand hour-hand"></div>
@@ -15,123 +15,47 @@
       </div>
     </div>
 
-
-  <style>
-    html {
-      background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
-      background-size: cover;
-      font-family: 'helvetica neue';
-      text-align: center;
-      font-size: 10px;
-    }
-
-    body {
-      margin: 0;
-      font-size: 2rem;
-      display: flex;
-      flex: 1;
-      min-height: 100vh;
-      align-items: center;
-    }
-
-    .clock {
-      width: 30rem;
-      height: 30rem;
-      border: 20px solid white;
-      border-radius: 50%;
-      margin: 50px auto;
-      position: relative;
-      padding: 2rem;
-      box-shadow:
-        0 0 0 4px rgba(0,0,0,0.1),
-        inset 0 0 0 3px #EFEFEF,
-        inset 0 0 10px black,
-        0 0 10px rgba(0,0,0,0.2);
+<script>
+  (function() {
+    const secHand = document.querySelector('.second-hand');
+    const minHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
+
+    function moveHand() {
+      // the date must be in the function since Date is a single moment in time
+      const date = new Date;
+      const sec = date.getSeconds();
+      const min = date.getMinutes();
+      const h = date.getHours();
+
+      // change the sec into degree of rotation, with an initial rotation of 90deg (to start at 12:00)
+      const secDeg = timeToDeg(sec, 60);
+      const minDeg = timeToDeg(min, 60);
+      const hDeg = timeToDeg(h, 12);
+
+      // make rotation into html
+      secHand.style.transform = `rotate(${secDeg}deg)`;
+      minHand.style.transform = `rotate(${minDeg}deg)`;
+      hourHand.style.transform = `rotate(${hDeg}deg)`;
+
+      /*
+      note that the transition-timing-function: cubic-bezier(0.35, 2.12, 0.58, 1); in the .hands class
+      will make a shake-ish motion when the hand reaches 0deg
+      this is because at 450deg it goes forward (for the jerk motion) to 0deg (backward)
+      we can temporarily remove the transition-timing-function, but it is not done here.
+       */
     }
 
-    .clock-face {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
+    function timeToDeg (time, max) {
+      return ((time / max) * 360) + 90;
     }
 
-    .hand {
-      width: 50%;
-      height: 6px;
-      background: black;
-      position: absolute;
-      top: 50%;
-      transform: rotate(90deg);
-      transform-origin: 100%;
-      transition-timing-function: cubic-bezier(0.35, 2.12, 0.58, 1);
-      transition: all 0.05s;
-    }
-
-  </style>
-
-  <script>
-    (function() {
-      const secHand = document.querySelector('.second-hand');
-      const minHand = document.querySelector('.min-hand');
-      const hourHand = document.querySelector('.hour-hand');
-
-      function initHands() {
-        const date = new Date;
-        const sec = date.getSeconds();
-        const min = date.getMinutes();
-        const h = date.getHours();
-
-        const secDeg = ((sec / 60) * 360) + 90;
-        const minDeg = ((min / 60) * 360) + 90;
-        const hDeg = ((h / 12) * 360) + 90;
-
-        secHand.style.transform = `rotate(${secDeg}deg)`;
-        minHand.style.transform = `rotate(${minDeg}deg)`;
-        hourHand.style.transform = `rotate(${hDeg}deg)`;
-      }
-
-      function moveSec() {
-        // the date must be in the function since Date is a single moment in time
-        const date = new Date;
-        const sec = date.getSeconds();
-
-        // change the sec into degree of rotation, with an initial rotation of 90deg (to start at 12:00)
-        const secDeg = ((sec / 60) * 360) + 90;
-
-        // make the rotation into html
-        secHand.style.transform = `rotate(${secDeg}deg)`;
-      }
-
-      function moveMin() {
-        const date = new Date;
-        const min = date.getMinutes();
-
-        // change minute into degree of rotation
-        const minDeg = ((min / 60) * 360) + 90;
-
-        // make rotation into html
-        minHand.style.transform = `rotate(${minDeg}deg)`;
-      }
-
-      function moveH() {
-        const date = new Date;
-        const h = date.getHours();
-
-        // change minute into degree of rotation
-        const hDeg = ((h / 12) * 360) + 90;
-
-        // make rotation into html
-        hourHand.style.transform = `rotate(${hDeg}deg)`;
-      }
-
-      initHands();
-      setInterval(moveSec, 1000);
-      setInterval(moveMin, 60000);
-      setInterval(moveH, 60 * 60000);
-
-    })();
+    // initialize hands placement
+    moveHand();
+    // update hands placement
+    setInterval(moveHand, 1000);
+  })();
 
-  </script>
+</script>
 </body>
 </html>
diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css
new file mode 100644
index 0000000000..c396b7bd7c
--- /dev/null
+++ b/02 - JS and CSS Clock/style.css	
@@ -0,0 +1,58 @@
+html {
+    background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
+    background-size: cover;
+    font-family: 'helvetica neue';
+    text-align: center;
+    font-size: 10px;
+}
+
+body {
+    margin: 0;
+    font-size: 2rem;
+    display: flex;
+    flex: 1;
+    min-height: 100vh;
+    align-items: center;
+}
+
+.clock {
+    width: 30rem;
+    height: 30rem;
+    border: 20px solid white;
+    border-radius: 50%;
+    margin: 50px auto;
+    position: relative;
+    padding: 2rem;
+    box-shadow:
+            0 0 0 4px rgba(0,0,0,0.1),
+            inset 0 0 0 3px #EFEFEF,
+            inset 0 0 10px black,
+            0 0 10px rgba(0,0,0,0.2);
+}
+
+.clock-face {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transform: translateY(-3px); /* account for the height of the clock hands */
+}
+
+.hand {
+    width: 50%;
+    height: 6px;
+    background: black;
+    position: absolute;
+    top: 50%;
+    transform: rotate(90deg);
+    transform-origin: 100%;
+    transition-timing-function: cubic-bezier(0.35, 2.12, 0.58, 1);
+    transition: all 0.05s;
+}
+
+.min-hand {
+    background: dimgray;
+}
+
+.second-hand {
+    background: gray;
+}
\ No newline at end of file

From 91d3749756fc91b4e16956e7a3881021e24082ec Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Tue, 30 Jun 2020 23:52:18 -0400
Subject: [PATCH 05/27] day 3

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 6b9b539c09..c2b46b4757 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,6 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #ffc600;
+      --blur: 0px;
+      --spacing: 10px;
+    }
+
+    img {
+      filter: blur(var(--blur));
+      background: var(--base);
+      padding: var(--spacing);
+    }
+
+    .hl {
+      color: var(--base);
+    }
 
     /*
       misc styles, nothing to do with CSS variables
@@ -45,6 +60,51 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    /*
+    - css variables must have the prefix --
+    - they are called in css by adding var()
+    - the css variables in this file are stored in the root scope (:root)
+    - css variables also have scope and do overwrite each other's effect
+     */
+
+    (() => {
+      // we want inputs in the control class only (it doesn't make a difference here)
+      const inputs = document.querySelectorAll('.controls input');
+
+      function handleChange() {
+        console.log(this)
+        // dataset contains all custom data with data- as prefix attached to the html element
+        // this is to find the unit for blur and padding, e.g. px or rem
+        const unit = this.dataset.sizing || '';
+
+        // documentElement lets us get the root of the document
+        // the variable names are set up to match the input elements' name
+        document.documentElement.style.setProperty(`--${this.name}`, this.value + unit);
+      }
+
+      function handleMouseDown() {
+        // when the input is pressed upon, listen for mouse move event
+        this.addEventListener('mousemove', handleChange);
+      }
+
+      function handleMouseUp() {
+        // when the input is released, stop listening for mouse move event
+        this.removeEventListener('mousemove', handleChange);
+      }
+
+      inputs.forEach(function(key) {
+        // change event is triggered only when the value change on the input element
+        key.addEventListener('change', handleChange);
+
+        // only change does not suffice for the range input, we listen to every mouse move on the element
+        // the following is to not have too many mouse move event
+        // we do not have to deal with those mousemove event when the input is not even clicked on
+        key.addEventListener('mousedown', handleMouseDown);
+        key.addEventListener('mouseup', handleMouseUp);
+      });
+
+    })();
+
   </script>
 
 </body>

From 0b36e583050876ff9b12e689451e446ac9b0ddec Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Tue, 30 Jun 2020 23:57:07 -0400
Subject: [PATCH 06/27] update html min value to match css variable, initialize
 variables to init value in html

---
 03 - CSS Variables/index-START.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index c2b46b4757..eb427438d8 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -9,7 +9,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
-    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <input id="spacing" type="range" name="spacing" min="0" max="200" value="10" data-sizing="px">
 
     <label for="blur">Blur:</label>
     <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
@@ -23,7 +23,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <style>
     :root {
       --base: #ffc600;
-      --blur: 0px;
+      --blur: 10px;
       --spacing: 10px;
     }
 
@@ -72,7 +72,6 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       const inputs = document.querySelectorAll('.controls input');
 
       function handleChange() {
-        console.log(this)
         // dataset contains all custom data with data- as prefix attached to the html element
         // this is to find the unit for blur and padding, e.g. px or rem
         const unit = this.dataset.sizing || '';

From 7b24d3282338e2a6660aad7203f5fff1d1eab14b Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Thu, 2 Jul 2020 12:40:12 -0400
Subject: [PATCH 07/27] day 4

---
 04 - Array Cardio Day 1/index-START.html | 147 ++++++++++++++++++++---
 1 file changed, 132 insertions(+), 15 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index d19181b6b4..ecfdb58503 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -27,33 +27,150 @@
       { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
     ];
 
+    // last name, first name list
     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'];
 
-    // Array.prototype.filter()
-    // 1. Filter the list of inventors for those who were born in the 1500's
+    /******************
+     * Array.prototype.filter()
+     * 1. Filter the list of inventors for those who were born in the 1500's
+     * ****************/
 
-    // Array.prototype.map()
-    // 2. Give us an array of the inventors first and last names
+    // filter gives back an array with smaller length than the original array
+    const born_1500 = inventors.filter((inventor) => inventor.year >= 1500 && inventor.year < 1600);
 
-    // Array.prototype.sort()
-    // 3. Sort the inventors by birthdate, oldest to youngest
+    // give back a table
+    console.table(born_1500);
 
-    // Array.prototype.reduce()
-    // 4. How many years did all the inventors live all together?
+    /******************
+     * Array.prototype.map()
+     * 2. Give us an array of the inventors first and last names
+     * ****************/
 
-    // 5. Sort the inventors by years lived
+    /*
+    map gives back an array of the same length as the original array
+    think of map as a factory, that only stamp qualified items
+     */
+    const first_last_names = inventors.map((inventor) => `${inventor.first} ${inventor.last}`);
 
-    // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
-    // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    console.table(first_last_names);
 
+    /******************
+     * Array.prototype.sort()
+     * 3. Sort the inventors by birth date, oldest to youngest
+     * ****************/
 
-    // 7. sort Exercise
-    // Sort the people alphabetically by last name
+    /*
+    sort need a callback function to determine the order of the two elements.
+    the 1st argument starts with the 2nd element, the 2nd argument starts with the 1st element
+    they are compared a bit like bubble sort
+    returning a -ve number means smaller (1st argument comes first), +ve means bigger (2nd argument comes first)
+     */
+    const oldest_to_youngest = inventors.sort((a, b) => a.year > b.year? 1: -1);
+
+    /*
+    Can also do:
+    const inventors_by_date = inventors.sort(({year: a}, {year: b}) => a - b);
+    since it will calculate the returning number for us
+    */
+
+    console.table(oldest_to_youngest);
+
+    /******************
+     * Array.prototype.reduce()
+     * 4. How many years did all the inventors live all together?
+     * ****************/
+
+    /*
+    reduce takes a callback with 2 arguments:
+      1. accumulator (previous value gets stored here)
+      2. current value (the object to calculate the value to add)
+    the callback performs the action of combining the accumulator and the current value, and returns the result
+    (in this case it's just adding)
+
+    and optionally takes the initial value of the accumulator
+     */
+
+    // the reduce can be written as the for loop:
+    let living_years_for_loop = 0;
+
+    for (let i = 0; i < inventors.length; i++){
+      living_years_for_loop += inventors[i].passed - inventors[i].year;
+    }
+    console.log("total living years using for loop:", living_years_for_loop);
+
+    // using reduce:
+    const living_years = inventors.reduce((year, inventor) => year + (inventor.passed - inventor.year), 0);
+
+    console.log("total living years using reduce", living_years);
+
+    /******************
+     * 5. Sort the inventors by years lived (longest first)
+     * ****************/
+
+    const years_lived_sort = inventors.sort((a, b) => {
+      const a_age = a.passed - a.year;
+      const b_age = b.passed - b.year;
+
+      return a_age > b_age ? -1: 1;
+    })
+
+    console.table(years_lived_sort);
+
+    /******************
+     * 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
+     * https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+     * on browser only
+     * ****************/
+
+    /*
+    can also do
+
+    let boulevards = document.querySelector('.mw-category');
+    let boulevards_link = boulevards.querySelectorAll('a');
+
+    since querySelector can be used on any elements, not only documents
+     */
+
+
+    // let boulevards_nodes = document.querySelectorAll('.mw-category a');
+    // let boulevards_array = Array.from(boulevards_nodes);  // creates an array from a nodeList in order to use functions
+    //
+    // // chaining, simply use filter here will only return array of a (link) elements, not the text itself
+    // const de = boulevards_array
+    //         .map(boulevard => boulevard.textContent)
+    //         .filter(boulevard_name => boulevard_name.includes('de'));
+
+    /******************
+     * 7. sort Exercise
+     * Sort the people alphabetically by last name
+     * ****************/
+
+    const alpha_last_name = people.sort((a, b) => {
+      const [a_last, a_first] = a.split(', ');
+      const [b_last, b_first] = b.split(', ');
+
+      return a_last < b_last ? -1: 1;
+    })
+
+    console.log(alpha_last_name);
+
+    /******************
+     * 8. Reduce Exercise
+     * Sum up the instances of each of these
+     * ****************/
 
-    // 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 sum = data.reduce((prev_val_obj, instance) => {
+      if (!prev_val_obj.hasOwnProperty(instance)) {
+        prev_val_obj[instance] = 0;
+      }
+      prev_val_obj[instance] ++;
+      return prev_val_obj;
+    }, {});
+
+    console.log(sum);
+
   </script>
 </body>
 </html>

From 8ec497c9d935048a9b793d22a3aa0b8b7d5fe382 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Thu, 2 Jul 2020 23:35:12 -0400
Subject: [PATCH 08/27] day 5, exercise 7, skipped 5 and 6

---
 07 - Array Cardio Day 2/index-START.html | 31 ++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..2df8d2b30d 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,46 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+    const is_older_than_19 = people.some(person => {
+      const currentYear = (new Date()).getFullYear();
+
+      return currentYear - person.year >= 19;
+    });
+
+    console.log(is_older_than_19);
+
     // Array.prototype.every() // is everyone 19 or older?
+    const every_older_than_19 = people.every(person => {
+      const currentYear = (new Date()).getFullYear();
+
+      return currentYear - person.year >= 19;
+    });
+
+    console.log(every_older_than_19);
 
     // Array.prototype.find()
     // Find is like filter, but instead returns just the one you are looking for
     // find the comment with the ID of 823423
 
+    const comment_823423 = comments.find(c => c.id === 823423);
+
+    console.log(comment_823423);
+
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const ind = comments.findIndex(c => c.id === 823423)
+
+    // modify original array
+    // comments.splice(ind, 1);
+
+    // create a new array, do not modify original array
+    const new_comments = [
+            ...comments.slice(0, ind),
+            ...comments.slice(ind+1)
+    ]
+    console.log(new_comments);
+
 
   </script>
 </body>

From 70f40eb8c3ca5a89b8e86fc33f69fb8864809637 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Fri, 3 Jul 2020 23:46:08 -0400
Subject: [PATCH 09/27] day 6

---
 06 - Type Ahead/index-START.html | 64 +++++++++++++++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 109c90fb36..417683e906 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,8 +15,70 @@
     </ul>
   </form>
 <script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+  (() => {
+    const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+    let cities = [];
+    const inputSearch = document.querySelector('.search');
+    const suggestions = document.querySelector('.suggestions');
+
+    function findMatches(searchString, cities) {
+      // using RegExp here because we are searching for a variable
+      // gi <=> search globally and insensitive
+      const regex = new RegExp(searchString, 'gi');
+
+      return cities.filter(location => location.city.match(regex) || location.state.match(regex));
+    }
+
+    function numberWithCommas(x) {
+      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    function displayMatches() {
+      const searchString = this.value;
+      console.log(searchString);
+
+      const regex = new RegExp(searchString, 'gi');
+
+      // find matched locations and sort ascending by population
+      const matchedLocations = findMatches(searchString, cities)
+              .sort((a, b) => a.population > b.population ? -1: 1);
+
+      // add html to display
+      const matchedLocationsHtmlArray = matchedLocations.map(location => {
+        // add comma to the number of population
+        const population = numberWithCommas(location.population);
+
+        // highlight the searched part
+        // i.e. replace every found part with a highlighted span
+        const cityName = location.city.replace(
+                regex,
+                `<span class="hl">${searchString}</span>`);
+
+        const stateName = location.state.replace(
+                regex,
+                `<span class="hl">${searchString}</span>`);
+
+        return `
+            <li>
+                <span>${cityName}, ${stateName}</span>
+                <span class="population">${population}</span>
+            </li>`
+      });
+
+      // replace the real list
+      suggestions.innerHTML = matchedLocationsHtmlArray.join("");
+    }
+
+    // get data from endpoint link
+    fetch(endpoint)
+    .then(data => data.json())
+    .then(jsonData => cities = jsonData);
+
+    // event listener
+    inputSearch.addEventListener('keyup', displayMatches);
+
+  })();
 </script>
 </body>
 </html>

From e2042e0b99ea25bd904c49965c7f615d551719ed Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Mon, 6 Jul 2020 02:06:09 -0400
Subject: [PATCH 10/27] day 7 exercise 8

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 9da9b5b3c5..65c97e9207 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -15,5 +15,82 @@
   }
 </style>
 
+<script>
+  (() => {
+    const canvas = document.getElementById('draw');
+    const canvasContext = canvas.getContext('2d');
+
+    // set canvas the size of the screen
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    // set initial parameters
+    const maxLineWidth = 200;
+    const minLineWidth = 1;
+    let lineWidthDirection = true;  // true => grow bigger, false => smaller
+    let startX = 0;
+    let startY = 0;
+    let hue = 0;
+    let isDrawing = false;
+
+    // set brush's initial parameters
+    canvasContext.lineWidth = 10;
+    canvasContext.lineCap = "round"; // "butt" | "round" | "square"
+    canvasContext.lineJoin = "round"; // "bevel" | "miter" | "round"
+    canvasContext.strokeStyle = "red"; // define the color, gradient, or pattern used for strokes.
+    canvasContext.globalCompositeOperation = 'difference';    // determine how the colors overlap each other
+
+    // the function to draw
+    function drawing(e) {
+      if (!isDrawing) return;   // only draw if the mouse is clicked down
+
+      // set the new color with hsl (hue, saturation, lightness):
+      canvasContext.strokeStyle = `hsl(${hue}, 90%, 50%)`;
+      canvasContext.beginPath();
+      // start the stroke from:
+      canvasContext.moveTo(startX, startY);
+      // finish the stroke at: (event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas)
+      canvasContext.lineTo(e.offsetX, e.offsetY);
+      // do the stroke:
+      canvasContext.stroke();
+
+      // update the next starting positions (to make a continuous line)
+      [startX, startY] = [e.offsetX, e.offsetY];
+
+      // update the hue (the range is 0 to 360, there is no problem going over, but just to be clear)
+      if (hue >= 360) hue = 0;
+      hue ++;
+
+      // update the size of the stroke
+      if (canvasContext.lineWidth >= maxLineWidth || canvasContext.lineWidth <= minLineWidth) {
+        lineWidthDirection = !lineWidthDirection;   // flip the direction
+      }
+
+      if (lineWidthDirection) {
+        canvasContext.lineWidth ++;
+      } else {
+        canvasContext.lineWidth --;
+      }
+    }
+
+    function startDraw(e) {
+      isDrawing = true;
+
+      // event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas
+      startX = e.offsetX;
+      startY = e.offsetY;
+    }
+
+    function endDraw() {
+      isDrawing = false;
+    }
+
+    // add event listener
+    canvas.addEventListener('mousemove', drawing);
+    canvas.addEventListener('mousedown', startDraw);
+    canvas.addEventListener('mouseup', endDraw);
+    canvas.addEventListener('mouseout', endDraw);
+  })();
+</script>
 </body>
 </html>

From 788b72ca3391c3bea78b3d0dd7999c93d5723aca Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Mon, 6 Jul 2020 20:43:00 -0400
Subject: [PATCH 11/27] day 8 exercise 9 and 12

---
 09 - Dev Tools Domination/index-START.html   | 38 ++++++++++++++++++++
 12 - Key Sequence Detection/index-START.html | 23 ++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..371237047a 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -11,6 +11,8 @@
   <script>
     const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
 
+    // to find out where the javascript execute:
+    // inspect -> right click -> break on -> attributes modifications
     function makeGreen() {
       const p = document.querySelector('p');
       p.style.color = '#BADA55';
@@ -18,28 +20,64 @@
     }
 
     // Regular
+    console.log('regular');
 
     // Interpolated
+    const interpolated = true;
+    console.log(`interpolated? ${interpolated}`);
 
     // Styled
+    // a console.log can be styled when there is a %c in front of the string
+    console.log("%c this one is styled", "font-size: 100px; background: red");
 
     // warning!
+    console.warn('warning in console...');
 
     // Error :|
+    console.error('error in console...');
 
     // Info
+    console.info('info in console...');
 
     // Testing
+    // assert will only run the 2nd argument when the 1st evaluated to false
+    console.assert(interpolated, "interpolated");
+    console.assert(!interpolated, "not interpolated");
 
     // clearing
+    // lol do this at the end of the document... and you won't see another day
+    console.clear();
 
     // Viewing DOM Elements
+    // console.log will not expand, but console.dir will so you can see all methods
+    console.dir(document.querySelector('p'));
 
     // Grouping together
+    dogs.forEach(dog => {
+      // group the logs together
+      // use console.groupCollapsed() for a condensed log
+      console.group(`${dog.name}`);
+      console.log("name is:", dog.name);
+      console.log("age is:", dog.age);
+      console.groupEnd();
+    })
 
     // counting
+    console.count('here');
+    console.count('here');
 
     // timing
+    // calculate how long a function runs
+    console.time('timing fetch');
+    fetch('https://api.github.com/users/wesbos')
+      .then(data => data.json())
+      .then(data => {
+        console.timeEnd('timing fetch');
+      });
+
+    // table
+    // use when an array contains objects with same property
+    console.table(dogs);
 
   </script>
 </body>
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index dc53c4e9e1..132ee01cf7 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,29 @@
 </head>
 <body>
 <script>
+  (() => {
+    const secretKey = '12';
+    let pastKeyPress = [];
+
+    function detectSecretKey(e) {
+      // e.key stores what you just pressed
+      pastKeyPress.push(e.key);
+
+      // only store the number of key press equal to the secretKey length
+      // delete from the end => -ve index (can also use splice)
+      pastKeyPress = pastKeyPress.slice(-(secretKey.length));
+
+      // console.log(pastKeyPress);
+
+      // search if the secret key is pressed
+      if (pastKeyPress.join("").includes(secretKey)) {
+        cornify_add();  // this uses the script at https://www.cornify.com/js/cornify.js
+      }
+    }
+
+    document.addEventListener('keydown', detectSecretKey);
+  })();
+
 </script>
 </body>
 </html>

From 691a03bd99e305030834931aa8858894d211584f Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Wed, 8 Jul 2020 01:53:53 -0400
Subject: [PATCH 12/27] day 9 exercise 10

---
 .../index-START.html                          | 58 ++++++++++++++++++-
 1 file changed, 56 insertions(+), 2 deletions(-)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index 4fd2936ddc..7db98612c7 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -53,8 +53,9 @@
    <!--
    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 few rows down, all the checkboxes inbetween those two checkboxes should be checked.
-
+   When a user clicks a checkbox, holds Shift,
+   and then clicks another checkbox a few rows down,
+   all the checkboxes in between those two checkboxes should be checked.
   -->
   <div class="inbox">
     <div class="item">
@@ -96,6 +97,59 @@
   </div>
 
 <script>
+  // wrap everything in an IIFE to avoid polluting the global namespace
+  (() => {
+    const checkboxes = document.querySelectorAll('.inbox input[type=checkbox]');
+
+    // this variable records the last checkbox checked
+    let lastCheckedCheckbox;
+
+    /*
+    Note that this does not handle the shift + uncheck case
+    */
+    function handleCheck(e) {
+      let inBetween = false;  // flag checkboxes that are in between the two selected
+
+      // only trigger the effect when the user has pressed shift
+      // AND checking the current (the user might be unchecking it)
+      // AND the last checked checkbox exists (the first time the user checks something)
+      // AND the last checked checkbox is checked (the user might try to uncheck)
+      if (e.shiftKey && this.checked &&
+              lastCheckedCheckbox && lastCheckedCheckbox.checked) {
+        /*
+        scan through the all the checkboxes
+        if the checkbox selected using shift is below the initial one:
+         the checkboxes in between last checked checkbox (initial)
+         and the current checkbox (shift) should be checked, i.e. inBetween = true
+         when the loop reaches after the current checkbox (shift)
+         the rest of the checkboxes should not be checked, i.e. inBetween = false
+         which leads to the flip of flag
+        if the checkbox selected using shift is above the initial one:
+         the checkboxes in between the current checkbox (shift)
+         and the last checked checkbox (initial) should be checked
+         (i.e. reverse order compared to the previous case)
+        */
+
+        checkboxes.forEach(checkbox => {
+          if (checkbox === this || checkbox === lastCheckedCheckbox) {
+            inBetween = !inBetween;
+          }
+
+          if (inBetween) {
+            // check the checkbox
+            checkbox.checked = true;
+          }
+        });
+      }
+
+      lastCheckedCheckbox = this;
+    }
+
+    checkboxes.forEach(checkbox => {
+      checkbox.addEventListener('click', handleCheck);
+    });
+
+  })();
 </script>
 </body>
 </html>

From adb5b78b07a1ffe2925e21215e6399805aea5588 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Fri, 10 Jul 2020 01:06:07 -0400
Subject: [PATCH 13/27] day 10 exercise 13

---
 13 - Slide in on Scroll/index-START.html | 69 +++++++++++++++++++-----
 1 file changed, 56 insertions(+), 13 deletions(-)

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index ad2f0e580a..2656c31e5d 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -43,21 +43,64 @@ <h1>Slide in on Scroll</h1>
   </div>
 
   <script>
-    function debounce(func, wait = 20, immediate = true) {
-      var timeout;
-      return function() {
-        var context = this, args = arguments;
-        var later = function() {
-          timeout = null;
-          if (!immediate) func.apply(context, args);
+    (() => {
+      /*
+      A debounce function is used to optimize the performance.
+      It ensures that the function is not triggered by an event (resize window, scroll, etc.) continuously
+      by limiting the rate the function can fire.
+      The function will only be called after it stops being called for N=wait milliseconds
+      (note that if it is called non stopped it will not be triggered)
+      https://davidwalsh.name/javascript-debounce-function
+       */
+      function debounce(func, wait = 20, immediate = true) {
+        var timeout;
+        return function() {
+          var context = this, args = arguments;
+          var later = function() {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+          };
+          var callNow = immediate && !timeout;
+          clearTimeout(timeout);
+          timeout = setTimeout(later, wait);
+          if (callNow) func.apply(context, args);
         };
-        var callNow = immediate && !timeout;
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-        if (callNow) func.apply(context, args);
-      };
-    }
+      }
+
+      const images = document.querySelectorAll('.slide-in');
+
+      function slideInImageOnScroll() {
+        /*
+        We want the images to slide in when the user scrolls to half the image, and slide out when they reach the bottom
+         */
+
+        // window.scrollY is where the top of the screen is
+        const bottomOfScreen = window.innerHeight + window.scrollY;
+
+        images.forEach(image => {
+          // where the image should start to slide in (/2 because half height) in terms of height in page
+          const slideInAt = bottomOfScreen - image.height / 2;
+
+          // bottom of the image in terms of height in page
+          // image.offsetTop = number of pixels from the top of the closest relatively positioned parent element
+          const imgBottom = image.height + image.offsetTop;
+
+          // flag denoting whether the user scrolled past the half of the image
+          const isHalfShown = slideInAt > image.offsetTop;
+
+          // flag denoting whether the user scrolled past the image entirely
+          const shouldSlideOut = window.scrollY > imgBottom;
+
+          if (isHalfShown && !shouldSlideOut) {
+            image.classList.add("active");
+          } else {
+            image.classList.remove("active");
+          }
+        });
+      }
 
+      window.addEventListener('scroll', debounce(slideInImageOnScroll));
+    })();
   </script>
 
   <style>

From f6820ed094ac5cfd8b1e61700b5404b946007a3c Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Fri, 10 Jul 2020 18:02:30 -0400
Subject: [PATCH 14/27] day 11 exercise 11

---
 11 - Custom Video Player/scripts.js | 88 +++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..1a54847b75 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,88 @@
+/* get elements */
+const player = document.querySelector('.player');
+const playerViewer = player.querySelector('.viewer');
+const playButton = player.querySelector('.toggle');
+// selecting attributes need []
+const skipButtons = player.querySelectorAll('[data-skip]');
+const sliders = player.querySelectorAll('.player__slider');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+
+/* functions and flags */
+let modifyingSlider = false;
+let movingProgress = false;
+
+// https://www.w3schools.com/tags/ref_av_dom.asp for html video properties
+
+function togglePlayPause() {
+    // paused returns whether the audio/video is paused or not
+    // (there is no flag for playing)
+    if (playerViewer.paused) {
+        playerViewer.play();
+    } else {
+        playerViewer.pause();
+    }
+}
+
+/*
+This function togglePlayButton is not inside togglePlayPause
+since there may be other ways to make the video play or pause
+other than the ones listened (like using console directly)
+ */
+function togglePlayButton() {
+    playButton.textContent = playerViewer.paused ? '►' : '❚❚';
+}
+
+function skipButtonClicked() {
+    // dataset contains all custom data with data- as prefix attached to the html element
+    // use .to access attributes (like playButton.title)
+    const skipAmount = this.dataset.skip;
+
+    playerViewer.currentTime += parseFloat(skipAmount);
+}
+
+function sliding() {
+    const propertyToBeChanged = this.name;
+    playerViewer[propertyToBeChanged] = this.value;
+}
+
+function updateProgressBar() {
+    const progressPercent = playerViewer.currentTime / playerViewer.duration * 100;
+    progressBar.style.flexBasis = `${progressPercent}%`;
+}
+
+function updateVideo(e) {
+    // offsetX = offset from left for that event,
+    // offsetWidth = total offset for the progress bar
+    playerViewer.currentTime = e.offsetX / progress.offsetWidth * playerViewer.duration;
+}
+
+/* Hook up event listeners */
+
+// play and pause
+playerViewer.addEventListener('click', togglePlayPause);
+playButton.addEventListener('click', togglePlayPause);
+playerViewer.addEventListener('pause', togglePlayButton);
+playerViewer.addEventListener('play', togglePlayButton);
+
+// update the progress bar whenever the video change (not when paused)
+playerViewer.addEventListener('timeupdate', updateProgressBar);
+progress.addEventListener('mousemove', (e) => movingProgress && updateVideo(e));
+progress.addEventListener('mousedown', () => movingProgress = true);
+progress.addEventListener('mouseup', () => movingProgress = false);
+progress.addEventListener('click', updateVideo);
+
+// skipping
+skipButtons.forEach(skipButton => {
+    skipButton.addEventListener('click', skipButtonClicked);
+});
+
+// volume and playback speed
+sliders.forEach(slide => {
+    slide.addEventListener('click', sliding);
+    // if modifying slider is true, run sliding(), otherwise return false
+    // (takes advantage of lazy evaluation)
+    slide.addEventListener('mousemove', () => modifyingSlider && sliding());
+    slide.addEventListener('mousedown', () => modifyingSlider = true);
+    slide.addEventListener('mouseup', () => modifyingSlider = false);
+});
\ No newline at end of file

From fbd39f029d788d23e51e86187492fc2d5819898a Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Mon, 13 Jul 2020 17:50:15 -0400
Subject: [PATCH 15/27] day 12 exercise 14

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

diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index f978b7446f..0278258200 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -7,6 +7,11 @@
 <body>
 
   <script>
+    /**************
+     * Strings, Numbers and Booleans (or any primitive types including NULL and undefined): copy by value
+     * Array and Object: copy by reference
+     **************/
+
     // start with strings, numbers and booleans
 
     // Let's say we have an array
@@ -27,12 +32,22 @@
     // So, how do we fix this? We take a copy instead!
 
     // one way
+    let players_copy1 = players.slice();
 
     // or create a new array and concat the old one in
+    let players_copy2 = [].concat(players);
 
     // or use the new ES6 Spread
+    let players_copy3 = [...players];
 
     // now when we update it, the original one isn't changed
+    players_copy1[0] = 'Bob';
+    players_copy2[0] = 'Alex';
+    players_copy3[0] = 'Mary';
+    console.log(players);
+    console.log(players_copy1);
+    console.log(players_copy2);
+    console.log(players_copy3);
 
     // The same thing goes for objects, let's say we have a person object
 
@@ -45,10 +60,42 @@
     // and think we make a copy:
 
     // how do we take a copy instead?
+    let person_copy1 = Object.assign({}, person, {age: 82});
+    console.log(person);
+    console.log(person_copy1);
 
     // We will hopefully soon see the object ...spread
 
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
+    const original_obj = {
+      name: 'original',
+      lvl: {
+        lvl1: 'lvl1',
+        lvl2: 2
+      }
+    };
+
+    let obj_cp1 = Object.assign({}, original_obj);
+    obj_cp1.lvl.lvl3 = 3;
+
+    console.log(obj_cp1);
+    console.log(original_obj);
+
+    // deep clone using JSON: unknown performance (make the obj into a string then back to an obj)
+
+    const original_obj2 = {
+      name: 'original2',
+      lvl: {
+        lvl1: 'lvl1',
+        lvl2: 2
+      }
+    };
+
+    let obj_cp2 = JSON.parse(JSON.stringify(original_obj2));
+    obj_cp2.lvl.lvl3 = '3';
+
+    console.log(obj_cp2);
+    console.log(original_obj2);
 
   </script>
 

From 5c50d116359cd5939610f487caa899803013624e Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Mon, 13 Jul 2020 17:59:01 -0400
Subject: [PATCH 16/27] day 12 exercise 17

---
 17 - Sort Without Articles/index-START.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index 2b6c9546e9..0dc3281971 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -46,9 +46,22 @@
   <ul id="bands"></ul>
 
 <script>
-const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
+  (() => {
+    const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
 
+    function filterArticle(str) {
+      // in the regex: ^ = start with, space to avoid "anywhere", i = case insensitive
+      return str.replace(/^(a |an |the )/i, '').trim();
+    }
+
+    const sortedBands = bands.sort((a, b) => filterArticle(a) > filterArticle(b) ? 1: -1);
+
+    const bandsEl = document.getElementById("bands");
+
+    // join at the end because map returns an array, but we need a string
+    bandsEl.innerHTML = sortedBands.map(band => `<li>${band}</li>`).join("");
 
+  })();
 </script>
 
 </body>

From 31fc9784622de134c93eaa1faab03c03f86313e9 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Tue, 14 Jul 2020 17:45:26 -0400
Subject: [PATCH 17/27] day 13, exercise 16

---
 16 - Mouse Move Shadow/index-START.html | 42 +++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/16 - Mouse Move Shadow/index-START.html b/16 - Mouse Move Shadow/index-START.html
index 280a4907c2..ec278a6fd9 100644
--- a/16 - Mouse Move Shadow/index-START.html	
+++ b/16 - Mouse Move Shadow/index-START.html	
@@ -35,6 +35,48 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  (() => {
+    const hero = document.querySelector('.hero');
+    const text = hero.querySelector('h1');
+    const walk = 100; // 100 px (walk is the max length of shadow)
+
+    function moveShadow(e) {
+
+      const width = hero.offsetWidth;
+      const height = hero.offsetHeight;
+
+      // this is the offset of the element that dispatched the event.
+      let x = e.offsetX;
+      let y = e.offsetY;
+
+      /*
+      Note that even though the event listener is attached to hero (this),
+      the target is the element / object that dispatch the event (e.g. h1)
+
+      This may cause offsetX=0 when the element (h1 here) is within this (hero)
+      even though we do not want offsetX=0 (i.e. w.r.t. h1) but offsetX w.r.t. window
+       */
+      if (this !== e.target) {
+        // The HTMLElement.offsetLeft read-only property returns
+        // the number of pixels that the upper left corner of the current element
+        // is offset to the left within the HTMLElement.offsetParent node.
+        x += e.target.offsetLeft;
+        y += e.target.offsetTop;
+      }
+
+      /*
+      Calculate the stretch distance of the shadow on the x, y axis
+      Here the walk is from -50 to 50 (not 0 to 100) to get an all direction shadow
+       */
+      const x_shadow = Math.round((x / width) * walk - walk / 2);
+      const y_shadow = Math.round((y / height) * walk - walk / 2);
+
+      // text shadow => x, y, blur, color
+      text.style.textShadow = `${x_shadow}px ${y_shadow}px 0 red`;
+    }
+
+    hero.addEventListener('mousemove', moveShadow);
+  })();
 </script>
 </body>
 </html>

From 392efe532711e388244e990b1648b06352b01902 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Wed, 15 Jul 2020 23:21:26 -0400
Subject: [PATCH 18/27] day 14 exercise 18

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

diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index abdf4c91af..9558071b81 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,29 @@
     </li>
   </ul>
 <script>
+  (() => {
+    const timeArr = Array.from(document.querySelectorAll('[data-time'));
+
+    let totalSec = timeArr.reduce((accTime, currElement) => {
+      // get the time attribute
+      const currTimeStr = currElement.dataset.time;
+
+      // transform a time in string format to minutes and secs
+      const [min, sec] = currTimeStr.split(":").map(parseFloat);
+
+      return accTime + min * 60 + sec;
+    }, 0);
+
+    // deconstruct into hours, minutes, seconds
+    const hours = Math.floor(totalSec / 3600);
+    totalSec = totalSec % 3600;
+
+    const minutes = Math.floor(totalSec / 60);
+    totalSec = totalSec % 60;
+
+    console.log(hours, minutes, totalSec);
+  })();
+
 </script>
 </body>
 </html>

From 0f9cc817126c2ae0b23961ff91a3442c47e5f858 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Thu, 16 Jul 2020 17:42:18 -0400
Subject: [PATCH 19/27] day 15 exercise 15

---
 15 - LocalStorage/index-START.html | 83 ++++++++++++++++++++++++++++--
 1 file changed, 80 insertions(+), 3 deletions(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..2fef1b2d10 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -26,9 +26,86 @@ <h2>LOCAL TAPAS</h2>
   </div>
 
 <script>
-  const addItems = document.querySelector('.add-items');
-  const itemsList = document.querySelector('.plates');
-  const items = [];
+
+  (() => {
+    const addItemForm = document.querySelector('.add-items');
+    const itemsList = document.querySelector('.plates');
+    const items = JSON.parse(localStorage.getItem("items")) || [];
+
+    function addItem(e) {
+      // forms auto-reloads when submitted (to send to the server side)
+      // as the default action
+      // we need to prevent this auto-reload by canceling the operation
+      e.preventDefault();
+
+      // get the value from the input
+      // here this is addItemForm
+      const newItemVal = (this.querySelector("[name=item]")).value;
+
+      const newItemObj = {
+        text: newItemVal,
+        done: false
+      };
+
+      items.push(newItemObj);
+
+      // store the list into local storage
+      // we need JSON.stringify since local storage is just pairs of key value pair
+      // and the object would be converted to a string if we did not stringify it
+      localStorage.setItem('items', JSON.stringify(items));
+
+      populateList(items);
+
+      // reset the form (not necessary) resets the values of all elements in a form
+      e.target.reset();
+    }
+
+    function populateList(items = []) {
+      // update the list displayed
+      itemsList.innerHTML = items.map((item, i) => {
+        // there is no checked="false" in html (it would still count as checked)
+        const checked = item.done ? 'checked' : '';
+
+        // data-index here is to facilitate retrieval, id is to link with label
+        return `
+        <li>
+            <input type="checkbox" data-index=${i} id="item${i}" ${checked} />
+            <label for="item${i}">${item.text}</label>
+        </li>
+      `;
+      }).join('');
+    }
+
+    function listChange(e) {
+      // do not need changes other than on the input (or its corresponding label)
+      if (!e.target.matches("input")) return;
+
+      const index = e.target.dataset.index;
+      items[index].done = !items[index].done;
+
+      // propagate changes into local storage
+      localStorage.setItem('items', JSON.stringify(items));
+
+      // propagate changes to the front-end
+      populateList(items);
+    }
+
+    // use submit event instead of click event on button to cover
+    // keypress of enter or other input form
+    addItemForm.addEventListener('submit', addItem);
+
+    /*
+    Event delegation
+    Do not listen directly to the individual li elements
+    since the elements are re-created every time a new one comes in.
+    In event delegation choose an unchanging parent to be responsible of listening
+    and this parent should tell the irresponsible children to adapt to the changes
+     */
+    itemsList.addEventListener('click', listChange);
+
+    // populate list with data from local storage as soon as the document loads
+    document.onload = populateList(items);
+  })();
 
 </script>
 

From 84e9e435f58f81e692a97901f22356a8962d4b9c Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Mon, 20 Jul 2020 12:29:11 -0400
Subject: [PATCH 20/27] day 18 (skip 3 days), exercise 20

---
 20 - Speech Detection/index-START.html | 66 +++++++++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index 31b4042563..70ef59deed 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -10,8 +10,72 @@
   </div>
 
 <script>
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+  /*
+  ATTENTION:
+  1) to use this be careful that you do not have another window / tab of your browser using the microphone!
+  2) "On some browsers, like Chrome, using Speech Recognition on a web page involves a server-based recognition engine.
+    Your audio is sent to a web service for recognition processing, so it won't work offline."
+    (https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
+    Use localhost!
+    (if do not have a server... do: `npm install` then `npm start`)
+   */
 
+  (() => {
+    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+    const speechRecognition = new SpeechRecognition();
+
+    // Interim results are results that are not yet final (e.g. the SpeechRecognitionResult.isFinal property is false.)
+    speechRecognition.interimResults = true;
+    speechRecognition.lang = 'zh';
+
+    const words = document.querySelector('.words');
+
+    let p = document.createElement('p');
+    words.appendChild(p);
+
+    function toText(e) {
+      /*
+      e.results looks like:
+      {SpeechRecognitionResult:
+        {
+         SpeechRecognitionAlternative: {
+          confidence: 0.8999999,
+          transcript: "word1"
+          },
+         isFinal: false,
+         length: 1
+        },
+       SpeechRecognitionResult:
+        {
+         SpeechRecognitionAlternative: {
+          confidence: 0.00000999999,
+          transcript: "word2"
+          },
+         isFinal: false,
+         length: 1
+        },
+        ...
+       }
+       */
+      p.innerText = Array.from(e.results)
+              .map(speechRecogRes => speechRecogRes[0].transcript)
+              .join("");
+
+      // create a new paragraph when the user stops talking
+      if (e.results[0].isFinal) {
+        p = document.createElement('p');
+        words.appendChild(p);
+      }
+    }
+
+    speechRecognition.addEventListener('result', toText);
+
+    // restart the speechRecognition when it ends
+    speechRecognition.addEventListener('end', speechRecognition.start);
+
+    document.onload = speechRecognition.start();
+  })();
 
 </script>
 

From b9837e69e931cf2d4a58fb478e57a9a4d7e84e5a Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Fri, 31 Jul 2020 18:23:34 -0400
Subject: [PATCH 21/27] day 29 skip 11 days, exercise 22

---
 .../index-START.html                          | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..05463c5df4 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,7 +26,45 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    (() => {
+      const links = document.querySelectorAll('a');
+
+      const highlightSpan = document.createElement('span');
+      highlightSpan.classList.add('highlight');
+      document.body.append(highlightSpan);
+
+      function highlightLink() {
+        const domRect = this.getBoundingClientRect();
+
+        /*
+        https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
+
+        The amount of scrolling that has been done of the viewport area (or any other scrollable element)
+        is taken into account when computing the bounding rectangle.
+        This means that the rectangle's boundary edges (top, right, bottom, left)
+        change their values every time the scrolling position changes
+        (because their values are relative to the viewport and not absolute).
+
+        If you need the bounding rectangle relative to the top-left corner of the document,
+        just add the current scrolling position to the top and left properties
+        (these can be obtained using window.scrollX and window.scrollY) to get
+        a bounding rectangle which is independent from the current scrolling position.
+         */
+        const customStyle = {
+          width: domRect.width,
+          height: domRect.height,
+          top: domRect.top + window.scrollY,
+          left: domRect.left + window.scrollX
+        };
+
+        highlightSpan.style.width = `${customStyle.width}px`;
+        highlightSpan.style.height = `${customStyle.height}px`;
+        // use translate here to get the smooth transition working
+        highlightSpan.style.transform = `translate(${customStyle.left}px, ${customStyle.top}px)`;
+      }
+
+      links.forEach(a => a.addEventListener('mouseenter', highlightLink));
+    })();
   </script>
 </body>
 </html>

From 9fdce1fcdf78a573484c2f6ee6be08b92fc7da26 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Fri, 7 Aug 2020 00:01:49 -0400
Subject: [PATCH 22/27] day 35 skipped 6 days, exercise 23

---
 23 - Speech Synthesis/index-START.html | 57 ++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..c1822ebda1 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -22,19 +22,62 @@ <h1>The Voiceinator 5000</h1>
       <label for="pitch">Pitch:</label>
 
       <input name="pitch" type="range" min="0" max="2" step="0.1">
-      <textarea name="text">Hello! I love JavaScript 👍</textarea>
+      <textarea name="text">Hello! 👍</textarea>
       <button id="stop">Stop!</button>
       <button id="speak">Speak</button>
 
     </div>
 
 <script>
-  const msg = new SpeechSynthesisUtterance();
-  let voices = [];
-  const voicesDropdown = document.querySelector('[name="voice"]');
-  const options = document.querySelectorAll('[type="range"], [name="text"]');
-  const speakButton = document.querySelector('#speak');
-  const stopButton = document.querySelector('#stop');
+  (() => {
+    const msg = new SpeechSynthesisUtterance();
+    let voices = [];
+    const voicesDropdown = document.querySelector('[name="voice"]');
+    const options = document.querySelectorAll('[type="range"], [name="text"]');
+    const speakButton = document.querySelector('#speak');
+    const stopButton = document.querySelector('#stop');
+
+    // initialize
+    msg.text = document.querySelector('[name="text"]').value;
+
+    function populateVoiceList() {
+      voices = this.getVoices();
+
+      voicesDropdown.innerHTML = voices
+              .map((voice, index) => `<option value="${index}">${voice.name} - ${voice.lang}</option>`)
+              .join("");
+    }
+
+    function speakStopToggle(isSpeaking = true) {
+      speechSynthesis.cancel();
+
+      if (isSpeaking) {
+        speechSynthesis.speak(msg);
+      }
+    }
+
+    function changeUtteranceProperty() {
+      msg[this.name] = this.value;
+      speakStopToggle();
+    }
+
+    function changeVoice() {
+      msg.voice = voices[parseInt(this.value)];
+      speakStopToggle();
+    }
+
+    // this is needed since it takes a few seconds for the speechSynthesis to load
+    speechSynthesis.addEventListener('voiceschanged', populateVoiceList);
+
+    voicesDropdown.addEventListener('change', changeVoice);
+    options.forEach(opt => opt.addEventListener('change', changeUtteranceProperty));
+    speakButton.addEventListener('click', speakStopToggle);
+
+    // because if we do speakStopToggle(false) it will be called on page load
+    // we can also do"
+    // stopButton.addEventListener('click', () => speakStopToggle(false));
+    stopButton.addEventListener('click', speakStopToggle.bind(null, false));
+  })();
 </script>
 
 </body>

From 1c7fe73800ae68ec312d87136b6384e3f7f996e0 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Wed, 12 Aug 2020 18:10:22 -0400
Subject: [PATCH 23/27] day 38, exercise 21 (note: require mobile device)

---
 21 - Geolocation/index-START.html | 41 +++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
index 6d48c7a6d1..9e8ff90606 100644
--- a/21 - Geolocation/index-START.html	
+++ b/21 - Geolocation/index-START.html	
@@ -14,6 +14,15 @@ <h1 class="speed">
     <span class="units">KM/H</span>
   </h1>
 
+  <h2>
+      <span>Latitude: </span>
+      <span id="lat">0</span>
+  </h2>
+  <h2>
+    <span>Longitude: </span>
+    <span id="long">0</span>
+  </h2>
+
   <style>
     html {
       font-size: 100px;
@@ -53,12 +62,44 @@ <h1 class="speed">
       align-items: center;
     }
 
+    h2 {
+      color: white;
+      font-weight: 100;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+      margin: 10px;
+    }
+
     .units {
       font-size: 15px;
     }
     /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
   </style>
   <script>
+    const speedMeter = document.querySelector('.speed-value');
+    const compass = document.querySelector('.arrow');
+    const long = document.getElementById('long');
+    const lat = document.getElementById('lat');
+
+    function changePos(position) {
+      const latitude = position.coords.latitude;
+      const longitude = position.coords.longitude;
+      const heading = position.coords.heading ?　position.coords.heading : 0;  // degree to north
+      const speed = position.coords.speed ? position.coords.speed : 0;  // km/h
+
+      speedMeter.innerHTML = speed;
+      compass.style.transform = `rotate(${heading}deg)`;
+      long.innerHTML = longitude.toString();
+      lat.innerHTML = latitude.toString();
+    }
+
+    function handleErr(err) {
+      window.alert('Please allow the location!');
+    }
+
+    navigator.geolocation.watchPosition(changePos, handleErr);
+
   </script>
 </body>
 </html>

From 8539237b6445af32df92f9e2fbd8e18630a16d8c Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Thu, 20 Aug 2020 17:52:22 -0400
Subject: [PATCH 24/27] day ?? exercise 24

---
 24 - Sticky Nav/index-START.html | 43 ++++++++++++++++++++++++++++++++
 24 - Sticky Nav/style-START.css  | 13 ++++++++++
 2 files changed, 56 insertions(+)

diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..6d88fe96d3 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,6 +54,49 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
+  (() => {
+    // Note: you can use
+    // position: sticky;
+    // position: -webkit-sticky; /* Safari */
+    // for this as well, but there are several drawbacks such as:
+    //  1) it adds extra space at the top or around the element on some browsers:
+    //         see https://stackoverflow.com/questions/56200160/remove-unwanted-space-with-position-sticky
+    //         and https://stackoverflow.com/questions/42804714/position-sticky-adds-some-space-around-element-in-chrome
+    //  2) it is not supported on all browsers: https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46
+    //
+    // This implementation imitates the functionality of position sticky (turn an element's position from relative to fixed)
+
+    const nav = document.getElementById('main');
+    const navTop = nav.offsetTop;
+
+    function fixNav() {
+      console.log("navTop", navTop);
+      console.log(window.scrollY);
+
+      if (window.scrollY >= navTop) {
+
+        // this is because the position will go from relative (height in dom) to fixed (floating)
+        // so there will be a jerking motion if the height is not modified
+        // can hardcode this in the css but offset height may change
+        document.body.style.paddingTop = `${nav.offsetHeight}px`;
+
+        // can also use:
+        // nav.classList.add() ...
+        // but we would like for the effect to cascade across the whole body
+        // (so in style.css it can define what happens with 2 classes)
+        document.body.classList.add("sticky-nav");
+
+      } else {
+        document.body.style.paddingTop = '0px';
+
+        document.body.classList.remove("sticky-nav");
+      }
+    }
+
+    document.addEventListener('scroll', fixNav);
+
+    window.addEventListener('resize', () => window.location.reload());
+  })();
 
 </script>
 
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index b83b9c01ae..19d5c50db6 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -25,6 +25,10 @@ body {
   transition: transform 0.5s;
 }
 
+.sticky-nav .site-wrap {
+  transform: scale(1);
+}
+
 header {
   text-align: center;
   height: 50vh;
@@ -50,6 +54,11 @@ nav {
   z-index: 1;
 }
 
+body.sticky-nav nav {
+  position: fixed;
+  box-shadow: 0 5px 0 rgba(0,0,0,0.1);  /* add shadow for beauty */
+}
+
 nav ul {
   margin: 0;
   padding:0;
@@ -74,6 +83,10 @@ li.logo {
   font-size: 30px;
 }
 
+.sticky-nav li.logo {
+  max-width: 500px;
+}
+
 li.logo a {
   color: black;
 }

From 5c465eb1408ec9000a2897e57558a31903b5947c Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Sun, 30 Aug 2020 22:36:12 -0400
Subject: [PATCH 25/27] day ? exercise 19

---
 19 - Webcam Fun/index.html |  65 ++++++++++------
 19 - Webcam Fun/scripts.js | 147 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 188 insertions(+), 24 deletions(-)

diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html
index d6cc360cad..6701f2bb18 100755
--- a/19 - Webcam Fun/index.html	
+++ b/19 - Webcam Fun/index.html	
@@ -1,45 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Get User Media Code Along!</title>
-  <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <title>Get User Media Code Along!</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
-  <div class="photobooth">
+<div class="photobooth">
     <div class="controls">
-      <button onClick="takePhoto()">Take Photo</button>
-<!--       <div class="rgb">
-        <label for="rmin">Red Min:</label>
-        <input type="range" min=0 max=255 name="rmin">
-        <label for="rmax">Red Max:</label>
-        <input type="range" min=0 max=255 name="rmax">
+        <button onClick="takePhoto()">Take Photo</button>
+        <div id="manipulatePixel">
+            <input type="radio" id="coloringSwitch" name="manipulatePixel" value="coloring">
+            <label for="coloringSwitch">coloring:</label>
 
-        <br>
+            <input type="radio" id="greenscreenSwitch" name="manipulatePixel" value="greenscreen">
+            <label for="greenscreenSwitch">greenscreen:</label>
+
+            <input type="radio" id="splitSwitch" name="manipulatePixel" value="split">
+            <label for="splitSwitch">split:</label>
 
-        <label for="gmin">Green Min:</label>
-        <input type="range" min=0 max=255 name="gmin">
-        <label for="gmax">Green Max:</label>
-        <input type="range" min=0 max=255 name="gmax">
+        </div>
 
         <br>
 
-        <label for="bmin">Blue Min:</label>
-        <input type="range" min=0 max=255 name="bmin">
-        <label for="bmax">Blue Max:</label>
-        <input type="range" min=0 max=255 name="bmax">
-      </div> -->
+        <div class="rgb">
+            Greenscreen
+            <br>
+
+            <label for="rmin">Red Min:</label>
+            <input type="range" min=0 max=255 name="rmin">
+            <label for="rmax">Red Max:</label>
+            <input type="range" min=0 max=255 name="rmax">
+
+            <br>
+
+            <label for="gmin">Green Min:</label>
+            <input type="range" min=0 max=255 name="gmin">
+            <label for="gmax">Green Max:</label>
+            <input type="range" min=0 max=255 name="gmax">
+
+            <br>
+
+            <label for="bmin">Blue Min:</label>
+            <input type="range" min=0 max=255 name="bmin">
+            <label for="bmax">Blue Max:</label>
+            <input type="range" min=0 max=255 name="bmax">
+        </div>
     </div>
 
+    <br>
+
     <canvas class="photo"></canvas>
     <video class="player"></video>
     <div class="strip"></div>
-  </div>
+</div>
 
-  <audio class="snap" src="./snap.mp3" hidden></audio>
+<audio class="snap" src="./snap.mp3" hidden></audio>
 
-  <script src="scripts.js"></script>
+<script src="scripts.js"></script>
 
 </body>
 </html>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
index 00355f5a9c..a31168fc9d 100644
--- a/19 - Webcam Fun/scripts.js	
+++ b/19 - Webcam Fun/scripts.js	
@@ -2,4 +2,149 @@ const video = document.querySelector('.player');
 const canvas = document.querySelector('.photo');
 const ctx = canvas.getContext('2d');
 const strip = document.querySelector('.strip');
-const snap = document.querySelector('.snap');
+const snapSound = document.querySelector('.snap');
+
+const greenScreenInput = document.querySelectorAll('.rgb input');
+const coloringInput = document.querySelectorAll('#coloring input');
+const coloringSwitch = document.querySelector('#coloringSwitch');
+const greenscreenSwitch = document.querySelector('#greenscreenSwitch');
+const splitSwitch = document.querySelector('#splitSwitch');
+
+function takeVideo() {
+    // ask the user for permission for video use
+    // returns a promise containing a MediaStream
+    navigator.mediaDevices.getUserMedia({audio: false, video: true})
+        .then(mediaStream => {
+            // note that before a <video> element required a src with a url
+            // thus we need to create an object URL for the MediaStream using window.URL.createObjectURL
+            // this has been deprecated. Now just set srcObject to the MediaStream directly.
+            video.srcObject = mediaStream;
+            video.play();
+        })
+        .catch(err => {
+            console.error(`unable to initialize video: ${err}`);
+            window.alert('Allow the video!');
+        });
+}
+
+function paintToCanvas() {
+    const width = video.videoWidth;
+    const height = video.videoHeight;
+
+    // set canvas dimensions to match the video stream
+    // otherwise a part of the video would be cut off
+    canvas.width = width;
+    canvas.height = height;
+
+    // setInterval is needed because we want the canvas to follow the video
+    // a small timeout is placed to have a smoother effect
+    setInterval(() => {
+        // draw the video onto canvas
+        // put the video at coordinate (0, 0). The image should have its original dimensions
+        ctx.drawImage(video, 0, 0, width, height);
+
+        manipulateCanvas(width, height);
+    }, 100);
+}
+
+function manipulateCanvas(width, height) {
+    const addGreenScreen = greenscreenSwitch.checked;
+    const addColoring = coloringSwitch.checked;
+    const addSplit = splitSwitch.checked;
+
+    console.log(addGreenScreen, addColoring, addSplit);
+
+    // gets pixel from (0, 0) to (width, height) part of the canvas, returns a ImageData object
+    // https://www.w3schools.com/tags/canvas_getimagedata.asp
+    // ImageData.data is an array of the 4 pixels data (all pixels inside of the rectangle of the canvas specified)
+    // 4 pixel data: each pixel has 4 values, RGBA (A = The alpha channel (from 0-255; 0 is transparent and 255 is fully visible))
+    // so the 1st value in that array is the R of the 1st pixel, 2nd value is the G of the 2nd pixel, etc.
+    let imagePixel = ctx.getImageData(0, 0, width, height);
+
+    if (addGreenScreen) {
+        imagePixel = greenscreen(imagePixel);
+    } else if (addColoring) {
+        imagePixel = color(imagePixel);
+    } else if (addSplit) {
+        imagePixel = split(imagePixel);
+    }
+
+    ctx.putImageData(imagePixel, 0, 0);
+}
+
+function split(imagePixel) {
+    /*
+    Split works by shifting the pixel for a certain position
+     */
+
+    for (let i = 0; i < imagePixel.data.length; i += 4) {
+        imagePixel.data[i - 150] = imagePixel.data[i + 0]; // RED
+        imagePixel.data[i + 500] = imagePixel.data[i + 1]; // GREEN
+        imagePixel.data[i - 550] = imagePixel.data[i + 2]; // Blue
+    }
+
+    return imagePixel;
+}
+
+function color(imagePixel) {
+
+
+    for (let i = 0; i < imagePixel.data.length; i += 4) {
+        imagePixel.data[i + 0] = imagePixel.data[i + 0] + 100; // RED
+        imagePixel.data[i + 1] = imagePixel.data[i + 1] - 50; // GREEN
+        imagePixel.data[i + 2] = imagePixel.data[i + 2] * 0.25; // Blue
+    }
+
+    return imagePixel;
+}
+
+function greenscreen(imagePixel) {
+    /*
+    Greenscreen works by withdrawing certain colors between a chosen color range,
+    making them transparent to show whatever is behind them
+     */
+
+    let greenScreenInputLevel = {};
+
+    greenScreenInput.forEach(range => {
+        greenScreenInputLevel[range.name] = range.value;
+    });
+
+    for (let i = 0; i < imagePixel.data.length; i += 4) {
+        const red = imagePixel.data[i]
+        const green = imagePixel.data[i + 1]
+        const blue = imagePixel.data[i + 2]
+
+        if (red >= greenScreenInputLevel.rmin && red <= greenScreenInputLevel.rmax &&
+            green >= greenScreenInputLevel.gmin && green <= greenScreenInputLevel.gmax &&
+            blue >= greenScreenInputLevel.bmin && blue <= greenScreenInputLevel.bmax) {
+            // make it transparent (for greenscreen)
+            imagePixel.data[i + 3] = 0;
+        }
+    }
+
+    return imagePixel;
+}
+
+function takePhoto() {
+    snapSound.currentTime = 0;
+    snapSound.play();
+
+    // take the data out of canvas, the image is in base64
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
+    // the default quality for image is used (0.92) instead of 1.0
+    const imageData = canvas.toDataURL('image/jpeg');
+
+    // display the image taken
+    const imageLink = document.createElement('a');
+    imageLink.href = imageData;
+    imageLink.download = 'drawnPicture';    // set it to be downloaded when a user clicks on the link, with a name
+    imageLink.innerHTML = `<img src="${imageData}" alt="The Canvas Picture"/>`;
+    strip.insertBefore(imageLink, strip.firstChild);   // display them in reverse order
+}
+
+// get the video stream on page load
+takeVideo();
+
+// add to canvas when the video is ready
+video.addEventListener('canplay', paintToCanvas);
\ No newline at end of file

From 71348f3b2363764ae8fa72cb0a067b6f39194143 Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Sun, 30 Aug 2020 22:44:14 -0400
Subject: [PATCH 26/27] exercise 19 add IIFE and comments

---
 19 - Webcam Fun/index.html |   2 +-
 19 - Webcam Fun/scripts.js | 260 +++++++++++++++++++------------------
 2 files changed, 134 insertions(+), 128 deletions(-)

diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html
index 6701f2bb18..65716ecf3d 100755
--- a/19 - Webcam Fun/index.html	
+++ b/19 - Webcam Fun/index.html	
@@ -9,7 +9,7 @@
 
 <div class="photobooth">
     <div class="controls">
-        <button onClick="takePhoto()">Take Photo</button>
+        <button class="takePhoto">Take Photo</button>
         <div id="manipulatePixel">
             <input type="radio" id="coloringSwitch" name="manipulatePixel" value="coloring">
             <label for="coloringSwitch">coloring:</label>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
index a31168fc9d..f60001ff2b 100644
--- a/19 - Webcam Fun/scripts.js	
+++ b/19 - Webcam Fun/scripts.js	
@@ -1,150 +1,156 @@
-const video = document.querySelector('.player');
-const canvas = document.querySelector('.photo');
-const ctx = canvas.getContext('2d');
-const strip = document.querySelector('.strip');
-const snapSound = document.querySelector('.snap');
-
-const greenScreenInput = document.querySelectorAll('.rgb input');
-const coloringInput = document.querySelectorAll('#coloring input');
-const coloringSwitch = document.querySelector('#coloringSwitch');
-const greenscreenSwitch = document.querySelector('#greenscreenSwitch');
-const splitSwitch = document.querySelector('#splitSwitch');
-
-function takeVideo() {
-    // ask the user for permission for video use
-    // returns a promise containing a MediaStream
-    navigator.mediaDevices.getUserMedia({audio: false, video: true})
-        .then(mediaStream => {
-            // note that before a <video> element required a src with a url
-            // thus we need to create an object URL for the MediaStream using window.URL.createObjectURL
-            // this has been deprecated. Now just set srcObject to the MediaStream directly.
-            video.srcObject = mediaStream;
-            video.play();
-        })
-        .catch(err => {
-            console.error(`unable to initialize video: ${err}`);
-            window.alert('Allow the video!');
-        });
-}
-
-function paintToCanvas() {
-    const width = video.videoWidth;
-    const height = video.videoHeight;
-
-    // set canvas dimensions to match the video stream
-    // otherwise a part of the video would be cut off
-    canvas.width = width;
-    canvas.height = height;
-
-    // setInterval is needed because we want the canvas to follow the video
-    // a small timeout is placed to have a smoother effect
-    setInterval(() => {
-        // draw the video onto canvas
-        // put the video at coordinate (0, 0). The image should have its original dimensions
-        ctx.drawImage(video, 0, 0, width, height);
-
-        manipulateCanvas(width, height);
-    }, 100);
-}
-
-function manipulateCanvas(width, height) {
-    const addGreenScreen = greenscreenSwitch.checked;
-    const addColoring = coloringSwitch.checked;
-    const addSplit = splitSwitch.checked;
-
-    console.log(addGreenScreen, addColoring, addSplit);
-
-    // gets pixel from (0, 0) to (width, height) part of the canvas, returns a ImageData object
-    // https://www.w3schools.com/tags/canvas_getimagedata.asp
-    // ImageData.data is an array of the 4 pixels data (all pixels inside of the rectangle of the canvas specified)
-    // 4 pixel data: each pixel has 4 values, RGBA (A = The alpha channel (from 0-255; 0 is transparent and 255 is fully visible))
-    // so the 1st value in that array is the R of the 1st pixel, 2nd value is the G of the 2nd pixel, etc.
-    let imagePixel = ctx.getImageData(0, 0, width, height);
-
-    if (addGreenScreen) {
-        imagePixel = greenscreen(imagePixel);
-    } else if (addColoring) {
-        imagePixel = color(imagePixel);
-    } else if (addSplit) {
-        imagePixel = split(imagePixel);
+(() => {
+    const video = document.querySelector('.player');
+    const canvas = document.querySelector('.photo');
+    const ctx = canvas.getContext('2d');
+    const strip = document.querySelector('.strip');
+    const snapSound = document.querySelector('.snap');
+
+    const greenScreenInput = document.querySelectorAll('.rgb input');
+    const coloringSwitch = document.querySelector('#coloringSwitch');
+    const greenscreenSwitch = document.querySelector('#greenscreenSwitch');
+    const splitSwitch = document.querySelector('#splitSwitch');
+
+    function takeVideo() {
+        // ask the user for permission for video use
+        // returns a promise containing a MediaStream
+        // note: navigator interface is a representation of the application
+        // in which the JavaScript code is running (in most cases, the browser)
+        navigator.mediaDevices.getUserMedia({audio: false, video: true})
+            .then(mediaStream => {
+                // note that before a <video> element required a src with a url
+                // thus we need to create an object URL for the MediaStream using window.URL.createObjectURL
+                // this has been deprecated. Now just set srcObject to the MediaStream directly.
+                video.srcObject = mediaStream;
+                video.play();
+            })
+            .catch(err => {
+                console.error(`unable to initialize video: ${err}`);
+                window.alert('Allow the video!');
+            });
     }
 
-    ctx.putImageData(imagePixel, 0, 0);
-}
+    function paintToCanvas() {
+        const width = video.videoWidth;
+        const height = video.videoHeight;
+
+        // set canvas dimensions to match the video stream
+        // otherwise a part of the video would be cut off
+        canvas.width = width;
+        canvas.height = height;
 
-function split(imagePixel) {
-    /*
-    Split works by shifting the pixel for a certain position
-     */
+        // setInterval is needed because we want the canvas to follow the video
+        // a small timeout is placed to have a smoother effect
+        setInterval(() => {
+            // draw the video onto canvas
+            // put the video at coordinate (0, 0). The image should have its original dimensions
+            ctx.drawImage(video, 0, 0, width, height);
 
-    for (let i = 0; i < imagePixel.data.length; i += 4) {
-        imagePixel.data[i - 150] = imagePixel.data[i + 0]; // RED
-        imagePixel.data[i + 500] = imagePixel.data[i + 1]; // GREEN
-        imagePixel.data[i - 550] = imagePixel.data[i + 2]; // Blue
+            manipulateCanvas(width, height);
+        }, 100);
     }
 
-    return imagePixel;
-}
+    function manipulateCanvas(width, height) {
+        const addGreenScreen = greenscreenSwitch.checked;
+        const addColoring = coloringSwitch.checked;
+        const addSplit = splitSwitch.checked;
+
+        console.log(addGreenScreen, addColoring, addSplit);
+
+        // gets pixel from (0, 0) to (width, height) part of the canvas, returns a ImageData object
+        // https://www.w3schools.com/tags/canvas_getimagedata.asp
+        // ImageData.data is an array of the 4 pixels data (all pixels inside of the rectangle of the canvas specified)
+        // 4 pixel data: each pixel has 4 values, RGBA (A = The alpha channel (from 0-255; 0 is transparent and 255 is fully visible))
+        // so the 1st value in that array is the R of the 1st pixel, 2nd value is the G of the 2nd pixel, etc.
+        let imagePixel = ctx.getImageData(0, 0, width, height);
+
+        if (addGreenScreen) {
+            imagePixel = greenscreen(imagePixel);
+        } else if (addColoring) {
+            imagePixel = color(imagePixel);
+        } else if (addSplit) {
+            imagePixel = split(imagePixel);
+        }
 
-function color(imagePixel) {
+        ctx.putImageData(imagePixel, 0, 0);
+    }
 
+    function split(imagePixel) {
+        /*
+        Split works by shifting the pixel for a certain position
+         */
 
-    for (let i = 0; i < imagePixel.data.length; i += 4) {
-        imagePixel.data[i + 0] = imagePixel.data[i + 0] + 100; // RED
-        imagePixel.data[i + 1] = imagePixel.data[i + 1] - 50; // GREEN
-        imagePixel.data[i + 2] = imagePixel.data[i + 2] * 0.25; // Blue
+        for (let i = 0; i < imagePixel.data.length; i += 4) {
+            imagePixel.data[i - 150] = imagePixel.data[i + 0]; // RED
+            imagePixel.data[i + 500] = imagePixel.data[i + 1]; // GREEN
+            imagePixel.data[i - 550] = imagePixel.data[i + 2]; // Blue
+        }
+
+        return imagePixel;
     }
 
-    return imagePixel;
-}
+    function color(imagePixel) {
+
 
-function greenscreen(imagePixel) {
-    /*
-    Greenscreen works by withdrawing certain colors between a chosen color range,
-    making them transparent to show whatever is behind them
-     */
+        for (let i = 0; i < imagePixel.data.length; i += 4) {
+            imagePixel.data[i + 0] = imagePixel.data[i + 0] + 100; // RED
+            imagePixel.data[i + 1] = imagePixel.data[i + 1] - 50; // GREEN
+            imagePixel.data[i + 2] = imagePixel.data[i + 2] * 0.25; // Blue
+        }
+
+        return imagePixel;
+    }
 
-    let greenScreenInputLevel = {};
+    function greenscreen(imagePixel) {
+        /*
+        Greenscreen works by withdrawing certain colors between a chosen color range,
+        making them transparent to show whatever is behind them
+         */
 
-    greenScreenInput.forEach(range => {
-        greenScreenInputLevel[range.name] = range.value;
-    });
+        let greenScreenInputLevel = {};
 
-    for (let i = 0; i < imagePixel.data.length; i += 4) {
-        const red = imagePixel.data[i]
-        const green = imagePixel.data[i + 1]
-        const blue = imagePixel.data[i + 2]
+        greenScreenInput.forEach(range => {
+            greenScreenInputLevel[range.name] = range.value;
+        });
 
-        if (red >= greenScreenInputLevel.rmin && red <= greenScreenInputLevel.rmax &&
-            green >= greenScreenInputLevel.gmin && green <= greenScreenInputLevel.gmax &&
-            blue >= greenScreenInputLevel.bmin && blue <= greenScreenInputLevel.bmax) {
-            // make it transparent (for greenscreen)
-            imagePixel.data[i + 3] = 0;
+        for (let i = 0; i < imagePixel.data.length; i += 4) {
+            const red = imagePixel.data[i]
+            const green = imagePixel.data[i + 1]
+            const blue = imagePixel.data[i + 2]
+
+            if (red >= greenScreenInputLevel.rmin && red <= greenScreenInputLevel.rmax &&
+                green >= greenScreenInputLevel.gmin && green <= greenScreenInputLevel.gmax &&
+                blue >= greenScreenInputLevel.bmin && blue <= greenScreenInputLevel.bmax) {
+                // make it transparent (for greenscreen)
+                imagePixel.data[i + 3] = 0;
+            }
         }
-    }
 
-    return imagePixel;
-}
+        return imagePixel;
+    }
 
-function takePhoto() {
-    snapSound.currentTime = 0;
-    snapSound.play();
+    function takePhoto() {
+        snapSound.currentTime = 0;
+        snapSound.play();
+
+        // take the data out of canvas, the image is in base64
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
+        // the default quality for image is used (0.92) instead of 1.0
+        const imageData = canvas.toDataURL('image/jpeg');
+
+        // display the image taken
+        const imageLink = document.createElement('a');
+        imageLink.href = imageData;
+        imageLink.download = 'drawnPicture';    // set it to be downloaded when a user clicks on the link, with a name
+        imageLink.innerHTML = `<img src="${imageData}" alt="The Canvas Picture"/>`;
+        strip.insertBefore(imageLink, strip.firstChild);   // display them in reverse order
+    }
 
-    // take the data out of canvas, the image is in base64
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
-    // the default quality for image is used (0.92) instead of 1.0
-    const imageData = canvas.toDataURL('image/jpeg');
+    // get the video stream on page load
+    takeVideo();
 
-    // display the image taken
-    const imageLink = document.createElement('a');
-    imageLink.href = imageData;
-    imageLink.download = 'drawnPicture';    // set it to be downloaded when a user clicks on the link, with a name
-    imageLink.innerHTML = `<img src="${imageData}" alt="The Canvas Picture"/>`;
-    strip.insertBefore(imageLink, strip.firstChild);   // display them in reverse order
-}
+    // add to canvas when the video is ready
+    video.addEventListener('canplay', paintToCanvas);
 
-// get the video stream on page load
-takeVideo();
+    document.querySelector(".takePhoto").addEventListener("click", takePhoto);
 
-// add to canvas when the video is ready
-video.addEventListener('canplay', paintToCanvas);
\ No newline at end of file
+})();

From c9ff9679d69bfd90f504b5342fd6eb3ce3ce5e5b Mon Sep 17 00:00:00 2001
From: YC000 <yuanchen0124@gmail.com>
Date: Sun, 30 Aug 2020 22:56:32 -0400
Subject: [PATCH 27/27] day ? exercise 25

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

diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
index 7bd5931e01..416eec6c5d 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -42,7 +42,40 @@
 
 <button></button>
 <script>
+  (() => {
+    /*
+    Capture:
+      capture where you click and store them, from top down.
 
+    Bubbling:
+      ripple the click all the way up the parent elements to the
+      top of the document.
+
+    In modern browsers, it does a capture (capture where you click and store them,
+    from top down) of all the event, then starts at the bottom to do bubbling
+    (triggering events to the top)
+     */
+
+    const divs = document.querySelectorAll('body div');
+
+    function logText(e) {
+      console.log(this.classList.value);
+
+      // stop bubbling the event to the way up (or down if capture: true)
+      // e.stopPropagation();
+    }
+
+    // capture: true runs the function logText on the way down
+
+    // once means removeEventListener once it got one (unbinds itself),
+    // i.e. run logText once and never run it again
+    // useful for, for example, form submission, store checkouts,
+    // where you only want the user to submit once
+    divs.forEach(div => div.addEventListener('click', logText, {
+      capture: true,
+      once: true
+    }));
+  })();
 </script>
 </body>
 </html>
