From f78d3d7c68373077542bb298bf5c4b1288d8b045 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Wed, 5 Aug 2020 17:17:39 -0700
Subject: [PATCH 01/29] Day 1 summary

---
 01 - JavaScript Drum Kit/README.md        | 38 +++++++++++++++++++++++
 01 - JavaScript Drum Kit/index-START.html | 26 ++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 01 - JavaScript Drum Kit/README.md

diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md
new file mode 100644
index 0000000000..9e1ac9cab1
--- /dev/null
+++ b/01 - JavaScript Drum Kit/README.md	
@@ -0,0 +1,38 @@
+#ReadMe
+
+##Knowledge
+
+###1. Document method `Document.querySelector()`
+https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
+> The Document method `querySelector()` returns the first `Element` within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
+
+###2. CSS Attribute selector
+https://www.w3schools.com/cssref/css_selectors.asp
+
+CSS selector works in the same way in JavaScript:
+
+| Selector | Example | Example description |
+|---|---|---|
+| `[attribute=value]` | `[target=_blank]` | Selects all elements with target="_blank"
+
+###3. Audio `play()` Method
+https://www.w3schools.com/jsref/met_audio_play.asp
+
+####3.1 HTML Audio/Video DOM `currentTime` Property
+```JavaScript
+var vid = document.getElementById("myVideo");
+vid.currentTime = 5;
+```
+> The currentTime property sets or returns the current position (in seconds) of the audio/video playback.
+
+###4. `Element.classList`
+https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+>The `Element.classList` is a read-only property that returns a live `DOMTokenList` collection of the class attributes of the element. **This can then be used to manipulate the class list**.
+
+>Using `classList` is a convenient alternative to accessing an element's list of classes as a space-delimited string via `element.className`.
+
+###5. HTMLElement: `transitionend event`
+https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event
+
+>The `transitionen` event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the `transition-property` is removed or `display` is set to none, then the event will not be generated.
+
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..898c714e74 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,32 @@
 
 <script>
 
+  function playAudio(e) {
+    // ES6 template string: ${} 
+    // CSS Attribute selector  
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+
+    if(!audio) return; // Stop the funtion if no audio returns
+    audio.currentTime = 0; // Rewind music to the start
+    audio.play();
+
+    // Key glowing effect
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e) {
+    // Skip if it's not a transform
+    if (e.propertyName !== 'transform') { return; } 
+    // `this` is the key as which this function works on in L79
+    this.classList.remove('playing');
+  }
+  
+  window.addEventListener('keydown', playAudio); 
+
+  // Listen transtionend event 
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition)); 
 </script>
 
 

From b838a18a73b7ea1f2d561a3abc69906fc389ffa9 Mon Sep 17 00:00:00 2001
From: herong <yanghrong@outlook.com>
Date: Wed, 5 Aug 2020 17:22:01 -0700
Subject: [PATCH 02/29] Update README.md

---
 01 - JavaScript Drum Kit/README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md
index 9e1ac9cab1..fcc82f93e8 100644
--- a/01 - JavaScript Drum Kit/README.md	
+++ b/01 - JavaScript Drum Kit/README.md	
@@ -1,12 +1,12 @@
-#ReadMe
+# ReadMe
 
-##Knowledge
+## Knowledge
 
 ###1. Document method `Document.querySelector()`
 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
 > The Document method `querySelector()` returns the first `Element` within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
 
-###2. CSS Attribute selector
+### 2. CSS Attribute selector
 https://www.w3schools.com/cssref/css_selectors.asp
 
 CSS selector works in the same way in JavaScript:
@@ -15,23 +15,23 @@ CSS selector works in the same way in JavaScript:
 |---|---|---|
 | `[attribute=value]` | `[target=_blank]` | Selects all elements with target="_blank"
 
-###3. Audio `play()` Method
+### 3. Audio `play()` Method
 https://www.w3schools.com/jsref/met_audio_play.asp
 
-####3.1 HTML Audio/Video DOM `currentTime` Property
+#### 3.1 HTML Audio/Video DOM `currentTime` Property
 ```JavaScript
 var vid = document.getElementById("myVideo");
 vid.currentTime = 5;
 ```
 > The currentTime property sets or returns the current position (in seconds) of the audio/video playback.
 
-###4. `Element.classList`
+### 4. `Element.classList`
 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
 >The `Element.classList` is a read-only property that returns a live `DOMTokenList` collection of the class attributes of the element. **This can then be used to manipulate the class list**.
 
 >Using `classList` is a convenient alternative to accessing an element's list of classes as a space-delimited string via `element.className`.
 
-###5. HTMLElement: `transitionend event`
+### 5. HTMLElement: `transitionend event`
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event
 
 >The `transitionen` event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the `transition-property` is removed or `display` is set to none, then the event will not be generated.

From 82a39a0e90cf017d08baa2f7a5393d9579074dc1 Mon Sep 17 00:00:00 2001
From: herong <yanghrong@outlook.com>
Date: Wed, 5 Aug 2020 17:22:23 -0700
Subject: [PATCH 03/29] Update README.md

---
 01 - JavaScript Drum Kit/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md
index fcc82f93e8..6f87d67e62 100644
--- a/01 - JavaScript Drum Kit/README.md	
+++ b/01 - JavaScript Drum Kit/README.md	
@@ -2,7 +2,7 @@
 
 ## Knowledge
 
-###1. Document method `Document.querySelector()`
+### 1. Document method `Document.querySelector()`
 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
 > The Document method `querySelector()` returns the first `Element` within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
 

From b522e560b335fa3ba07a1ddf8f8de8add4abc371 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Thu, 6 Aug 2020 15:58:15 -0700
Subject: [PATCH 04/29] Day 2 - CSS + JS Clock

---
 .tern-project                          | 12 +++++
 02 - JS and CSS Clock/README.md        |  9 ++++
 02 - JS and CSS Clock/index-START.html | 27 ++++++++++-
 readme.md                              | 66 +-------------------------
 4 files changed, 49 insertions(+), 65 deletions(-)
 create mode 100644 .tern-project
 create mode 100644 02 - JS and CSS Clock/README.md

diff --git a/.tern-project b/.tern-project
new file mode 100644
index 0000000000..0a2f08812f
--- /dev/null
+++ b/.tern-project
@@ -0,0 +1,12 @@
+{
+  "libs": [
+    "browser"
+  ],
+  "plugins": {
+     "node": {},
+     "modules": {},
+     "requirejs": {},
+     "es_modules": {},
+     "jasmine": {}
+  }
+}
\ No newline at end of file
diff --git a/02 - JS and CSS Clock/README.md b/02 - JS and CSS Clock/README.md
new file mode 100644
index 0000000000..1b90f7b134
--- /dev/null
+++ b/02 - JS and CSS Clock/README.md	
@@ -0,0 +1,9 @@
+# Knowledge
+
+## 1. `transform-origin` CSS property
+
+https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
+
+> The `transform-origin` CSS property sets the origin for an element's transformations.
+
+100% along the x-axis will put that pivot point on the very right-hand side.
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 7a6d27d5bd..5568ee9897 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -62,12 +62,37 @@
       background: black;
       position: absolute;
       top: 50%;
+      /* move pviot to right end */
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      /* how it moves */ 
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+
     }
 
   </style>
-
   <script>
+    const hourHand = document.querySelector('.hour-hand');
+    const minHand = document.querySelector('.min-hand'); 
+    const secondHand = document.querySelector('.second-hand');
+
+    function setDate() {
+      const now = new Date();
+      const hoursDegrees = getDegrees(now.getHours());
+      const minutesDegrees = getDegrees(now.getMinutes());
+      const secondsDegrees = getDegrees(now.getSeconds());
+      
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+      minHand.style.transform = `rotate(${minutesDegrees}deg)`;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+    }
+
+    function getDegrees(time) {
+      return time * 6 + 90;
+    }
 
+    setInterval(setDate, 1000);
 
   </script>
 </body>
diff --git a/readme.md b/readme.md
index 73d2f28303..b346908efe 100644
--- a/readme.md
+++ b/readme.md
@@ -6,69 +6,7 @@ Starter Files + Completed solutions for the JavaScript 30 Day Challenge.
 
 Grab the course at [https://JavaScript30.com](https://JavaScript30.com)
 
-## Community #JavaScript30 Content
+## Note
 
-Feel free to submit a PR adding a link to your own recaps, guides or reviews!
+This's Herong's notebook for JavaScript30 lesson.
 
-* [Arjun Khode’s blog](http://thesagittariusme.blogspot.com/search/label/JS30) about summaries for each day, including fixed glitches, bugs and extra features
-* [Nitish Dayal's Text Guides](https://github.com/nitishdayal/JavaScript30) are great for those who like reading over watching
-* [Meredith Underell's](http://meredithunderell.com/tag/javascript30/) Quick Lessons Learned
-* [Rowan Weismiller's](http://rowanweismiller.com/blog/javascript-30/) Recaps + Lessons Learned
-* [Thorsten Frommen](https://tfrommen.de/tag/javascript-30/) shares how he solved the exercises before viewing the answers
-* [Soyaine 写的中文指南](https://github.com/soyaine/JavaScript30)包含了过程记录和难点解释
-* [Ayo Isaiah's](https://freshman.tech/archive/#javascript30) Recaps and Lessons Learned
-* [Adriana Rios](https://stpcollabr8nlstn.github.io/JavaScript30/) shares her alternative solutions
-* [Michael Einsohn](http://30daysofjs.michaeleinsohn.com) publishes each challenge after watching the video once
-* [Mike Ekkel](https://medium.com/@mike_ekkel/javascript-30-a-30-day-vanilla-js-challenge-6a733fc9f62c#.9frjtaje9)
-* [Yusef Habib](https://github.com/yhabib/JavaScript30) lessons and tricks learned, and a [gh-page](https://yhabib.github.io/JavaScript30/) to see working all the mini-projects.
-* [Amelie Yeh](https://github.com/amelieyeh/JS30) 30 lessons notes with things I've learned, and those important recaps. and directly view my demos [here](https://amelieyeh.github.io/JS30/) 🇹🇼😄
-* [Winar](https://github.com/winar-jin/JavaScript30-Challenge)的JavaScript30天挑战，记录练习过程，重难点和其他的解决方案。🎨
-* [Rayhatron](https://rayhatron.github.io/blog/) - walkthroughs, recaps and lessons learned.
-* [Andrei Dobra](https://github.com/andreidbr/JS30) Full repo with lessons learned and a [gh-page](https://andreidbr.github.io/JS30/) with all the exercises.
-* [从零到壹全栈部落](https://github.com/liyuechun/JavaScript30-liyuechun),春哥发起的从零到壹全栈部落，旨在带领大家一起学习，一起输出，文档化，代码化，中文视频化，全栈部落口号：输出是最好的学习方式。
-* [Usmaan Ali's](https://github.com/usyyy/javascript/blob/master/JavaScript30/analysis.md) summary of the technical skills learned from each project. He's also posting them as separate blog posts [here](https://medium.com/@usyyy)
-* [Axel](https://github.com/afuh/js30)'s lessons learned and a [showcase](https://afuh.github.io/js30/) with the projects.
-* [Chris](https://github.com/dwatow/JavaScript30) 中文實戰，目標描述、過程紀錄。
-* [Muhammad D. Ramadhan's](https://miayam.github.io) blog. He shamlesly mixed his personal life with 30 day JavaScript challenge so as to increase his learning retention. He also summarised the challenge on [one single page](https://miayam.github.io/js30). Do not read his blog!
-* [Lee Keitel's Blog](https://blog.keitel.xyz/categories/javascript30/) includes summaries of each lesson, what I learned from each one, and my thoughts about the topic taught and using them in the future.
-* [Dustin Hsiao](https://github.com/dustinhsiao21/Javascript30-dustin) 包含了各篇介紹、 效果Demo、各篇詳解及記錄過程，附上部分延伸閱讀及[gh-page](https://dustinhsiao21.github.io/Javascript30-dustin/)。
-* [GuaHsu](https://github.com/guahsu/JavaScript30) - 紀錄各篇練習過程與心得，並嘗試擴充部分練習，也做了一個包含全部練習的[介紹站](http://guahsu.io/JavaScript30/)🇹🇼
-* [Daniela](https://github.com/misslild)'s completed challenges on [GitHub Pages](https://misslild.github.io/WesBos-30day-Coding-challenge/) and [Codepen](https://codepen.io/collection/DapZeP/) :raised_hands: :muscle: :+1:
-* [Dmitrii Pashutskii's](https://github.com/guar47) code of all challenges on [GitHub with Pages](https://github.com/guar47/javascript30Summary) and review [blog posts](https://blog.dpashutskii.com/tag/javascript30/)
-* [Abid Hasan's](https://github.com/sabidhasan/javascript-30) completion of all challenges. This was awesome!! Learned so much! :+1:
-* [Yusong Notes](https://sky172839465.github.io/course/js30) Records Yusong JS 30 days note and demo :star2:
-* [Ding's Implementation](https://github.com/Ding-Fan/javascript30) code and online demo
-* [Herminio Torres](https://github.com/herminiotorres/JavaScript30) lessons and tricks learned, and a [gh-page](https://herminiotorres.github.io/JavaScript30/) to see working all the mini-projects.
-* [Dmytro Borysovskyi](https://github.com/dimabory) says many thanks to for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available [here](https://github.com/dimabory/dimabory.github.io/tree/gh-pages/src/components/JavaScript30Days) and demos can be reached by the link to [gh-pages](https://dimabory.github.io/#/js30days) 👍👍👍 
-* [Kizito](https://github.com/akhilome/)'s follow along [repo](https://github.com/akhilome/js30) with [completed challenges](https://akhilome.github.io/js30) and [notes](https://akhilome.github.io/js30/notes).
-* [VannTile](https://github.com/vanntile)'s [repository](https://github.com/vanntile/JavaScript30) and [GitHub Pages showcase](https://vanntile.github.io/JavaScript30/). Thank you for a great ⌨️ experience.
-* [Alex Kim](https://github.com/Alex-K1m/js30-challenge) completed all the challenges. You can check them out at [github pages](https://alex-k1m.github.io/js30-challenge/).
-* [Mikhail Thomas](https://github.com/seckela) created [JS30++](https://github.com/seckela/js30plusplus) to add another level of challenge ontop of this already great course.
-* [Ramon Morcillo](https://github.com/reymon359/JavaScript30) finished this awesome challenge!. You can see the showcase of his implementations on [this link](https://reymon359.github.io/JavaScript30/).
-* [Santiago Escobar](https://github.com/sescobar99)'s [repository](https://github.com/sescobar99/javascript30-challenge) and [GitHub Pages showcase](https://sescobar99.github.io/javascript30-challenge/).
-* [Harry Xie](https://github.com/a90100/JavaScript30) 紀錄 30 天的練習筆記在 [此連結](https://github.com/a90100/JavaScript30).
-* [ Van Ribeiro's ](https://vanribeiro-30daysofjavascript.netlify.app/) about demos and recaps. On [GitHub Repo](https://github.com/vanribeiro/30days-Of-JavaScript) there's a summary about what was learned and researched.
-* [Mugilan](https://github.com/Mugilan-Codes) is currently doing this challenge. Check out his [Repo](https://github.com/Mugilan-Codes/javascript-30) and the [Live Demo](https://mugilan-codes.github.io/javascript-30/).
-* [Eshan Vohra](https://github.com/eshanvohra) is currently doing this challenge. Check out my repo [here](https://github.com/eshanvohra/JavaScript30).
-* [RegusAl](https://github.com/RegusAl) is currently doing this challenge. Check out my repo [here](https://github.com/RegusAl/JavaScript30).
-
-
-## Alternative Implementations
-Here are some links of people who have done the tutorials, but in a different language or framework:
-
-* [Thomas Mattacchione](https://github.com/tkjone/clojurescript-30) JavaScript 30 written in ClojureScript
-* [Dave Follett's](https://github.com/davefollett) blog series, [A New Vue on #JavaScript30](https://davefollett.io/categories/a-new-vue-on-javascript30/), where he explores re-implementing #JavaScript30 projects using [Vue](https://vuejs.org).
-* [Akinjide Bankole](https://github.com/akinjide/JS30days) used Node.js with [Jade](http://jadelang.net) to solve the exercises
-* [Adrien Poly](https://github.com/adrienpoly/javascript30-stimulus) a modest attempt to convert Drum Kit, Video Player, Local Tapas, TypeHead to [Stimulus JS](https://stimulusjs.org/) framework in a Rails App.
-* [Bogdan Lazar](https://github.com/tricinel/TypeScript30) all the JavaScript 30 written in [TypeScript](https://www.typescriptlang.org/)
-* [Will Wager](https://github.com/wwags33/JavaScript30) another [TypeScript](https://www.typescriptlang.org/) implementation!
-* [marcoSven](https://github.com/marcoSven) solution suggestion for [10 - Hold Shift and Check Checkboxes](https://github.com/marcoSven/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-FINISHED.html)
-* [ALMaclaine](https://github.com/almaclaine) Javascript 30 written in [Dart 2.0](https://github.com/ALMaclaine/Dart30).
-
-## A note on Pull Requests
-
-These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.
-
-The starter files + solutions will be updated if/when the videos are updated.
-
-Thanks!

From 69ba9812d121c2a319f9ab262a61487a1357d311 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Thu, 6 Aug 2020 17:02:23 -0700
Subject: [PATCH 05/29] Day 3 - Update Css Variables with JS

---
 03 - CSS Variables/README.md        | 11 +++++++++
 03 - CSS Variables/index-START.html | 38 ++++++++++++++++++++++++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 03 - CSS Variables/README.md

diff --git a/03 - CSS Variables/README.md b/03 - CSS Variables/README.md
new file mode 100644
index 0000000000..f8603ab5bf
--- /dev/null
+++ b/03 - CSS Variables/README.md	
@@ -0,0 +1,11 @@
+# Knowledge 
+
+## 1. Update CSS Variables with JS
+
+When you change a variable in CSS, everywhere on the page that the avriable is refernced will update itself.
+
+## 2. Using CSS custom properties (variables)
+
+https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
+
+> **Custom properties** (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., `--main-color: black;`) and are accessed using the var() function (e.g., color: `var(--main-color);`).
\ No newline at end of file
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 6b9b539c09..5625c0e0c0 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -12,6 +12,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
 
     <label for="blur">Blur:</label>
+    <!-- data-sizing: a made-up data attribute, need to be prefix by data- -->
     <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
     <label for="base">Base Color</label>
@@ -21,8 +22,23 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
 
-    /*
+    .hl {
+      color: var(--base);
+    }
+
+    /* 
       misc styles, nothing to do with CSS variables
     */
 
@@ -45,6 +61,26 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    // Select all input elements,this returns a NodeList
+    const inputs = document.querySelectorAll('.controls input');
+    // const color = 
+
+    function handleUpdate() {
+      // dataset: an objec that contains all data attributes from that element.
+      const suffix = this.dataset.sizing || '';
+      console.log(this.value);
+      console.log(suffix);
+
+      // How to select and update the CSS variable, use setProperty 
+      // Here we select all element(which is root) and setProperty for them
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+
+    // Listen to the change event 
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+
+
   </script>
 
 </body>

From fe5d3a5081bf211c3299f7bbbdb1f2b355af4dcb Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Thu, 6 Aug 2020 18:30:17 -0700
Subject: [PATCH 06/29] Day 4 - Array Cardio Day 2

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index d19181b6b4..060a524772 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,28 +31,82 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteen = inventors.filter(function(inventor) {
+      if (inventor.year >= 1500 && inventor.year < 1600) {
+        return true;
+      }
+    });
+
+    const fifteen2 = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+     
+    console.table(fifteen);
+    console.table(fifteen2);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors first and last names
+    const map = inventors.map(inventor => `${inventor.first}` +` ${inventor.last}`);
+    console.log(map);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const sortArray = inventors.sort((x, y) => x.year - y.year);
+
+    const sortArray2 = inventors.sort((x, y) => x.year > y.year ? 1 : -1);
+    console.table(sortArray); 
+    console.table(sortArray2);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live all together?
+    const totalAge = inventors.reduce(
+      (total, inventor) => (inventor.passed - inventor.year + total), 0) ;
+    console.log(totalAge);
 
     // 5. Sort the inventors by years lived
+    const sortByAgeArray = inventors.sort((x, y) => {
+      const xAge = x.passed - x.year;
+      const yAge = y.passed - y.year;
+      return xAge > yAge ? -1 : 1;
+    });
+    console.table(sortByAgeArray);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    // const list = document.querySelector('.mw-category');
+    // convert to array option 1
+    // const links = Array.from(list.querySelectorAll('a'));
+    // option 2: 
+    // const links = [...list.querySelectorAll('a')];
 
+    // no map() under NodeList so this will not work unless you convert it to array.
+    // const boulevards = links.map(link => link.textContent);
+    // const de = boulevards.filter(blvd => blvd.includes('de'));
+ 
+    // console.log(de);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const sortNameArray = people.sort((x, y) => {
+      const xLast = x.split(',')[0];
+      const yLast = y.split(',')[0];
+
+      return xLast < yLast ? -1 : 1;
+    });
+
+    console.log(sortNameArray);
 
     // 8. Reduce Exercise
     // Sum up the instances of each of these
-    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
+    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; 
+
+    // start with an empty object
+    const result = data.reduce((obj, item) => {
+      if (!obj[item]) { 
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj;
+    }, {}); 
+    console.log(result);
 
   </script>
 </body>

From 2d385dc308329c560195a9b08280189fb5d493b7 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Fri, 7 Aug 2020 16:45:30 -0700
Subject: [PATCH 07/29] Day 5 Flex Panels Image Gallery

---
 05 - Flex Panel Gallery/README.md        | 11 +++++
 05 - Flex Panel Gallery/index-START.html | 61 +++++++++++++++++++++++-
 2 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 05 - Flex Panel Gallery/README.md

diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md
new file mode 100644
index 0000000000..6611b51e1f
--- /dev/null
+++ b/05 - Flex Panel Gallery/README.md	
@@ -0,0 +1,11 @@
+# Knowledge
+
+## 1. CSS flexbox layout
+
+https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+
+## 2. `DOMTokenList.toggle()`
+
+https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle
+
+> The `toggle()` method of the `DOMTokenList` interface removes a given `token` from the list and returns `false`. If token doesn't exist it's added and the function returns `true`.
\ No newline at end of file
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index 71d1c26f00..f3a0dee950 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -26,6 +26,8 @@
     .panels {
       min-height: 100vh;
       overflow: hidden;
+       /* Make it a flex item */
+      display: flex;
     }
 
     .panel {
@@ -43,6 +45,14 @@
       font-size: 20px;
       background-size: cover;
       background-position: center;
+      /* Evenly distribute the extra space among each other*/
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      /* Make it a flex container as well */
+      display: flex;
+      /* Vertically center them in the middle */
+      flex-direction: column;
     }
 
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
@@ -52,10 +62,36 @@
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
     /* Flex Children */
+    /* Children element in each panel */
     .panel > * {
       margin: 0;
       width: 100%;
       transition: transform 0.5s;
+      border: 1px solid red;
+      flex: 1 0 auto;
+      /* Make each children elements a flex container */
+      display: flex;
+      /* Center text */
+      justify-content: center;
+      align-items: center; 
+    }
+
+    /* Take out upper element */
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+
+    .panel.open-active > *:first-child {
+      transform: translateY(0);
+    }
+
+    /* Take out lower element */
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
     }
 
     .panel p {
@@ -71,6 +107,8 @@
 
     .panel.open {
       font-size: 40px;
+      /* This element will expand to 5 times of other item's space (1) when triggered */
+      flex: 5; 
     }
 
   </style>
@@ -96,7 +134,7 @@
       <p>Give</p>
       <p>All</p>
       <p>You can</p>
-    </div>
+    </div> 
     <div class="panel panel5">
       <p>Life</p>
       <p>In</p>
@@ -105,9 +143,28 @@
   </div>
 
   <script>
+    // Select all elements under with .panel class
+    const panels = document.querySelectorAll('.panel');
+    console.log(panels); 
+    // Not toggleOpen() because we just send a refernce there
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
 
-  </script>
+    function toggleOpen() {  
+      // Add open class
+       this.classList.toggle('open');
+    }
 
+    panels.forEach(panel => panel.addEventListener('transitionend', showWords));
+
+    function showWords(e) {
+      // this will be flex-grow and font-size in Chrome, but flex in Safari
+      // console.log(e.propertyName);
+      if (e.propertyName.includes('flex')) {
+        this.classList.toggle('open-active');
+      }
+    }
+  </script>
+ 
 
 
 </body>

From 2175d105e4a56531103545c8f56d40fc27ec1327 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Tue, 11 Aug 2020 16:26:51 -0700
Subject: [PATCH 08/29] Day 6 - Ajax type Ahead

---
 06 - Type Ahead/README.md        | 32 ++++++++++++++++++++
 06 - Type Ahead/index-START.html | 51 ++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 06 - Type Ahead/README.md

diff --git a/06 - Type Ahead/README.md b/06 - Type Ahead/README.md
new file mode 100644
index 0000000000..95bceb7cf8
--- /dev/null
+++ b/06 - Type Ahead/README.md	
@@ -0,0 +1,32 @@
+# Knowledge
+## 1. spread / rest operator `...`
+https://dev.to/sagar/three-dots---in-javascript-26ci
+
+### Spread Operators
+> The spread operator is used to expand elements of an iterable (like an array) into places where multiple elements can fit.
+
+```JavaScript
+const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
+const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];
+
+const pizzas = [...featured, 'veg pizza', ...specialty];
+// 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'
+console.log(pizzas); 
+```
+
+### Rest Parameters
+> With rest parameters, we can gather any number of arguments into an array and do what we want with them. Rest parameters have been introduced to reduce the boilerplate code that was induced by the arguments. 
+
+
+## 2. HTML DOM Events
+https://www.w3schools.com/jsref/dom_obj_event.asp
+> HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.
+> Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).
+
+## 3. HTML DOM innerHTML Property
+https://www.w3schools.com/jsref/prop_html_innerhtml.asp
+> The innerHTML property sets or returns the HTML content (inner HTML) of an element.
+
+```JavaScript
+document.getElementById("demo").innerHTML = "Paragraph changed!";
+```
\ No newline at end of file
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 109c90fb36..0c1d7055b9 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,57 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+// Fetch data back
+const cities = [];
+// fetch() will return a promise and in then)() the data type is unclear
+// it can be image or some HTML, etc
+fetch(endpoint)
+// the blob has a json() function in it, so we take out the json and use another then() to get the data
+.then(blob => blob.json()) 
+// ... will expand elements of an iterable (like an array) into places 
+.then(data => cities.push(...data));
+
+// Find if a data's city or state part matches what was searched 
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    // How to put a variable into a regular expression? Need to have a reg to hold it
+    // g = global, i = case insensitive,
+    const regex = new RegExp(wordToMatch, 'gi'); 
+    return place.city.match(regex) || place.state.match(regex);
+  })
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function displayMatches() {
+  const matchArray = findMatches(this.value, cities);
+  // console.log(this.value);
+    console.log(matchArray);
+    const html = matchArray.map(place => {
+      // highlight the matched part, basically replace the matched part with a <span>
+      const regex = new RegExp(this.value, 'gi');
+      const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+      const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+      return `
+      <li>
+        <span class="name">${cityName}, ${stateName}</span>
+        <span class="populatioin">${numberWithCommas(place.population)}</span>
+      </li>
+      `; 
+    }).join(''); // join() will return a string from html array.
+    suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+// Listen on input change, change only get triggered when you move off the input box
+searchInput.addEventListener('change', displayMatches);
+// So we also listen on keyup event
+searchInput.addEventListener('keyup', displayMatches);
+
 </script>
 </body>
 </html>

From 0670fcfe65d7de7e06dfcf011743d9d0941b948d Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Tue, 11 Aug 2020 16:49:11 -0700
Subject: [PATCH 09/29] Day 7 - Array Cardio 2

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..9064971c92 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,31 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+    const isAdult = people.some(person => {
+      const currentYear = (new Date()).getFullYear();
+      return currentYear - person.year >= 19;
+    });
+    console.log({isAdult});
+
     // Array.prototype.every() // is everyone 19 or older?
+    const allAdult = people.every(person => {
+      const currentYear = (new Date()).getFullYear();
+      return currentYear - person.year >= 19;
+    });
+    console.log({allAdult});
 
     // 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 = comments.find(c => c.id === 823423);
+    console.log(comment.text);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(c => c.id === 823423);
+    comments.splice(index, 1);
+    console.table(comments);
 
   </script>
 </body>

From da01a52f8a2694f735f2e19e8b2a02ada7351794 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Wed, 12 Aug 2020 16:18:45 -0700
Subject: [PATCH 10/29] Day 8 - Canvas

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 9da9b5b3c5..c6fd09a725 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,67 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+	// Get the canvas element
+	const canvas = document.querySelector('#draw');
+	// Context is where you actually draw stuff, we need a 2d canvas here
+	const context = canvas.getContext('2d');
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+
+	// context.strokeStyle = '#4287f5';
+	context.lineJoin = 'round';
+	context.lineCap = 'round';
+	context.lineWidth = 11;
+
+
+	// Only generate stroke when mouse click down
+	let isDrawing = false; 
+	let lastX = 0;
+	let lastY = 0; 
+	let hue = 0;
+	let direction = true;
+
+	function draw(e) {
+		// Do nothing when they are not moused down
+		if (!isDrawing) {
+			return;
+		}
+		context.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+		context.beginPath();  
+		context.moveTo(lastX, lastY);
+		context.lineTo(e.offsetX, e.offsetY);
+		context.stroke();
+		[lastX, lastY] = [e.offsetX, e.offsetY];
+
+		hue++;
+
+		if (hue >= 360) {hue = 0};
+
+		if (context.lineWidth >= 20 || context.lineWidth <= 10) {
+			direction = !direction;
+		}
+		
+		if (direction) {
+			context.lineWidth++;
+		} else {
+			context.lineWidth--;
+		}
+
+
+
+	}
+
+	canvas.addEventListener('mousemove', draw);
+	canvas.addEventListener('mousedown', (e) => {
+		isDrawing = true;
+		// Update startpoint when mouse clicks down
+		[lastX, lastY] = [e.offsetX, e.offsetY];
+	});
+
+	canvas.addEventListener('mouseup', () => isDrawing = false);
+	canvas.addEventListener('mouseout', () => isDrawing = false);
+
+
 </script>
 
 <style>

From 11bc8cb29bf43375a3751e7a02e63df19b2912a9 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Wed, 12 Aug 2020 17:12:53 -0700
Subject: [PATCH 11/29] Day 9 Devtool tricks

---
 09 - Dev Tools Domination/index-START.html | 24 ++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..dddda44b3c 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -22,6 +22,7 @@
     // Interpolated
 
     // Styled
+    console.log('%c I am some great text', 'font-size:50px');
 
     // warning!
 
@@ -30,17 +31,40 @@
     // Info
 
     // Testing
+    console.assert(1 === 2, 'This is wrong');
 
     // clearing
+    console.clear();
 
     // Viewing DOM Elements
+    const p = document.querySelector('p');
+    // Show this element
+    console.log(p);
+    // Show all attributes on it 
+    console.dir(p);
 
     // Grouping together
+    dogs.forEach(dog => {
+      console.group(`${dog.name}`)
+      // Or use groupCollapsed(); the group will be collapsed() by default
+      console.log(`this is ${dog.name},`);
+      console.log(`${dog.name} is ${dog.year} years old`);
+      console.groupEnd(`${dog.name}`);
+    });
 
     // counting
+    console.count('test1');
+    console.count('test1');
+    console.count('test2');
+    console.count('test2');
+    console.count('test2');
+    console.count('test2');
+    console.count('test1');
+    console.count('test1');
 
     // timing
 
+
   </script>
 </body>
 </html>

From 3e4d5932817fcd4024c9bc30683ddf93702bb7d8 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Wed, 12 Aug 2020 18:29:54 -0700
Subject: [PATCH 12/29] Day 10 - Check checkboxes

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

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index 4fd2936ddc..5f7230bf18 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -96,6 +96,36 @@
   </div>
 
 <script>
+  const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
+  const items = document.querySelectorAll('.item');
+  console.log(checkboxes);
+
+  let lastChecked; 
+
+  // This seems a bug to me when I hold shift and check a single box, all box from this to the end will be checked, no matter if there's a 2nd key already checked
+  function handleCheck(e) {
+    // Check if the shift key is down and user checks a checkbox
+    let inBetween = false;
+    if (e.shiftKey && this.checked) {
+
+      checkboxes.forEach(checkbox => {
+        // All elements in between will be marked ture
+        if (checkbox === this || checkbox === lastChecked) {
+          inBetween = !inBetween; 
+        }
+
+        // Mark in-between elements as checked
+        if (inBetween) {
+          checkbox.checked = true; 
+        }
+      });
+
+    } 
+
+    lastChecked = this;
+  }
+
+  checkboxes.forEach(box => box.addEventListener('click', handleCheck)); 
 </script>
 </body>
 </html>

From b4baaec1951ad31502a8d4d8446ff36ba197098b Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Thu, 13 Aug 2020 17:43:22 -0700
Subject: [PATCH 13/29] Day 11 - Custom Video Player

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

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..9cfbd69a50 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,97 @@
+// Get elements 
+const playerButton = document.querySelector('.player__button.toggle');
+// Can reduce to one
+// const playerSliderVolume = document.querySelector('.player__slider[name="volume"]');
+// const playerSliderRate = document.querySelector('.player__slider[name="playbackRate"]');
+const playerSlider= document.querySelectorAll('.player__slider');
+const playerButtonSkip = document.querySelectorAll('.player__button[data-skip]');
+console.log(playerButton);
+console.log(playerButtonSkip);
+
+const vid = document.querySelector('.player__video');
+
+
+const progress = document.querySelector('.progress__filled');
+progress.style['flex-basis'] = "0%";
+
+//progress bar
+const bar = document.querySelector('.progress');
+
+// Build out functions
+
+function play(e) {
+	if (vid.paused) {
+		vid.play();
+	} else {
+		vid.pause();
+	}
+
+	// An alternative way
+	// const method = Video.paused ? 'play' : 'pause';
+	// video[method]();
+}
+
+// This two can combine to one
+// function changeVolume() {
+// 	vid.volume = this.value;
+// 	console.log(this.value);
+
+// }
+ 
+// function changeRate() {
+// 	vid.playbackRate = this.value;
+// 	console.log(this.value);
+// }
+
+function changeRange() {
+	vid[this.name] = this.value;
+}
+
+function skipVideo()  {
+	let currentTime = vid.currentTime + parseFloat(this.dataset.skip);
+	if (currentTime <= 0) {
+		vid.currentTime = 0;
+	} else if (currentTime >= vid.duration) {
+		vid.currentTime = vid.duration;
+	} else {
+		vid.currentTime = currentTime;
+	}
+	console.log(vid.currentTime);
+}
+
+function showProgress() {
+	const filled = (vid.currentTime / vid.duration) * 100;
+	progress.style['flex-basis'] = filled + "%";
+	// Or this way
+	// progress.style.flexBasis = `${filled}%`;
+}
+
+function changeButon() {
+	const icon = this.paused ? '►' : '❚ ❚'; 
+	playerButton.innerText = icon;
+}
+
+function scrub(e) {
+	const scrubTime = (e.offsetX / bar.offsetWidth) * vid.duration;
+	vid.currentTime = scrubTime;
+}
+
+// Hook up the event listeners 
+playerButton.addEventListener('click', play);
+vid.addEventListener('click', play)
+vid.addEventListener('play', changeButon);
+vid.addEventListener('pause', changeButon);
+vid.addEventListener('timeupdate', showProgress);
+playerSlider.forEach(range => range.addEventListener('mousemove', changeRange));
+playerButtonSkip.forEach(button => button.addEventListener('click', skipVideo)); 
+
+// Make sure bar filled part can change with you mousedown move
+let mousedown = false;
+bar.addEventListener('click', scrub); 
+bar.addEventListener('mousemove', (e) => {mousedown && scrub(e)});
+bar.addEventListener('mousedown', () => mousedown = true);
+bar.addEventListener('mouseup', () => mousedown = false);
+
+
+// Audio/Video DOM reference
+// https://www.w3schools.com/tags/ref_av_dom.asp

From 6d9c73c540321d120a50bb7fd708654d9a1baa11 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Fri, 14 Aug 2020 16:56:38 -0700
Subject: [PATCH 14/29] Day 12 - Key Sequence Detection

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

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index dc53c4e9e1..d7bc0282ea 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,53 @@
 </head>
 <body>
 <script>
+	// My solution 1
+	// const konami_code = ["a", "b", "c", "d", "ArrowUp", "ArrowDown", "x", "y"];
+	// let count = 0;
+	// window.addEventListener('keyup', (e) => {
+	// 	if (e.key === konami_code[count]) {
+	// 		count++;
+	// 	} else {
+	// 		count = 0;
+	// 	}
+	// 	if (count === 8) {
+	// 		console.log("You made it!");
+	// 		count = 0;
+	// 	}
+	// 	console.log(count);
+	// });
+
+	// My solution 2
+	// const pressed = [];
+	// window.addEventListener('keyup', (e) => {
+	// 	pressed.push(e.key);
+
+	// 	for (var i = 0; i <= pressed.length - 1; i++) {
+	// 		// One mismatch will reset the pressed string
+	// 		if (pressed[i] != konami_code[i]) {
+	// 			pressed.length = 0;
+	// 			return; 
+	// 		}
+	// 	}
+
+	// 	if (pressed.length === konami_code.length) {
+	// 		console.log("You made it!");
+	// 		pressed.length = 0;
+	// 	}
+	// });
+
+	// Wesbos's solution
+	const pressed = [];
+	const secretCode = 'ohmygod';
+	window.addEventListener('keyup', (e) => {
+		pressed.push(e.key); 
+		// Only keep the last 6 keys
+		pressed.slice(-secretCode.length -1 , pressed.length - secretCode.length);
+		if (pressed.join('').includes(secretCode)) {
+			console.log("You made it!");
+			cornify_add();
+		}
+	});
 </script>
 </body>
 </html>

From d8930855d4d9d4dc468120f556fbcd6b8525ca9d Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Fri, 14 Aug 2020 18:47:15 -0700
Subject: [PATCH 15/29] Day 13 - Slide in on Scroll

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

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index ad2f0e580a..7890bb48c6 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -37,12 +37,10 @@ <h1>Slide in on Scroll</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
 
-
-
-
   </div>
 
   <script>
+    // Run the given function every 20ms
     function debounce(func, wait = 20, immediate = true) {
       var timeout;
       return function() {
@@ -58,6 +56,32 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      sliderImages.forEach(sliderImage => {
+        // How much pixels scroll dowwn, at bottom of current window 
+        const SlideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
+        console.log(SlideInAt); 
+        console.log("image = " + sliderImage.height); 
+
+        // offsetTop, how far from the image top to the the window top
+        const imageBottom = sliderImage.offsetTop + sliderImage.height; // image bottom
+
+        const isHalfShown = SlideInAt > sliderImage.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+
+        if (isHalfShown && isNotScrolledPast) {
+          sliderImage.classList.add('active');
+        } else {
+          sliderImage.classList.remove('active');
+        }  
+
+      }) 
+    }
+    
+    window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>

From 33f643230d000ed7afbdb8e6064f479c8a108007 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Mon, 17 Aug 2020 14:51:08 -0700
Subject: [PATCH 16/29] Day 14 - JS References VS Copying

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

diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index f978b7446f..61ed0fc0e5 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -13,6 +13,18 @@
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+    const team = players; 
+
+    console.log(team);
+
+    // team is a reference to the original array
+    team[3] = 'Lux';
+
+    // ["Wes", "Sarah", "Ryan", "Lux"]
+    console.log(players);
+    // ["Wes", "Sarah", "Ryan", "Lux"] 
+    console.log(team); 
+
 
     // You might think we can just do something like this:
 
@@ -25,12 +37,17 @@
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
 
     // So, how do we fix this? We take a copy instead!
+    const team2 = players.slice();
+    const team3 = [].concat(players);
 
     // one way
 
     // or create a new array and concat the old one in
 
     // or use the new ES6 Spread
+    const team4 = [...players];
+
+    const team5 = Array.from(players);
 
     // now when we update it, the original one isn't changed
 
@@ -45,10 +62,30 @@
     // and think we make a copy:
 
     // how do we take a copy instead?
+    const captain = Object.assign({}, person, {number: 99});
+    // ^ Start with a new empty object, person is the source and add property (number) we want to it
+
 
     // We will hopefully soon see the object ...spread
+    const captain2 = {...person};
 
     // 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 wes = {
+      name: 'wes',
+      age: 12,
+      social : {
+        twitter: '@x',
+        facebook: 'x' 
+      }
+    }
+
+    console.log(wes);
+    const dev = Object.assign({}, wes);
+    console.log(wes); 
+
+    // Now, change social in dev will also change wes.social, that's BAD!
+    // Objec to string then to Object, which will erase the reference, but this is not recommended!
+    const dev2 = JSON.parse(JSON.stringify(wes));
 
   </script>
 

From 5ee6f56193ba50d14f884b3f61a431dcd3a7f2a4 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Mon, 17 Aug 2020 15:07:53 -0700
Subject: [PATCH 17/29] Fix comment

---
 14 - JavaScript References VS Copying/index-START.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index 61ed0fc0e5..b45ed94edf 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -84,6 +84,8 @@
     console.log(wes); 
 
     // Now, change social in dev will also change wes.social, that's BAD!
+
+    // The funtion below will make a copy that wes.social will not be changed by deev2.social
     // Objec to string then to Object, which will erase the reference, but this is not recommended!
     const dev2 = JSON.parse(JSON.stringify(wes));
 

From 10c1fba567e9aa5f0db3e2ade5766b9bff9c5bff Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Mon, 17 Aug 2020 17:29:03 -0700
Subject: [PATCH 18/29] Day 15 - LocalStorage + extra

---
 15 - LocalStorage/README.md        |  5 ++
 15 - LocalStorage/index-START.html | 91 +++++++++++++++++++++++++++++-
 15 - LocalStorage/style.css        |  7 +++
 3 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 15 - LocalStorage/README.md

diff --git a/15 - LocalStorage/README.md b/15 - LocalStorage/README.md
new file mode 100644
index 0000000000..02d7d33b7f
--- /dev/null
+++ b/15 - LocalStorage/README.md	
@@ -0,0 +1,5 @@
+# Knowledge
+
+## JS shorthand coding techniques
+
+https://www.sitepoint.com/shorthand-javascript-techniques/
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..6b42595815 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,15 +23,102 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <form id="c"><input class='check' type="submit" value="Check All"></form>
+    <form id="unc"><input class='check' type="submit" value="Uncheck All"></form>
+    <form id="clear"><input class='check' type="submit" value="Clear Menu"></form>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  // Get data from localStorage or just return an empty string
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+  
+  function addItem(e) {
+    // Prevent page from reloading
+    // e.preventDefault();
+    const text = (this.querySelector('[name=item]')).value;
+
+    // Create a new object
+    const item = {
+      text: text, //Or ES6 shorthand version, just text,
+      done: false
+    }
+    items.push(item);
+    populateList(items, itemsList);
+    // Store String in localStorage, note that you can only put string to it
+    localStorage.setItem('items', JSON.stringify(items));
+
+    // Reset a form element
+    this.reset(); 
+  }
+ 
+  // Two variables make this function more resilient
+  function populateList(plates = [], platesList) {
+    let elements = "";
+    // Show "loading when it's empty"
+    if (!plates.length) {
+        elements = '<li>Loading Tapas...</li>';
+    } else {
+        elements = plates.map((plate, i) => {
+          // Why backtick has to follow return?
+          return `
+           <li>
+          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
+            <label for="item${i}">${plate.text}</label>
+          </li>
+          `;
+        }).join(''); 
+    }
+
+    platesList.innerHTML = elements;
+  }
+
+  function toggleDone(e) {
+    if (!e.target.matches('input')) return; //ship this unless it's an input
+    const el = e.target;
+    const index = el.dataset.index;
+    // Update done's value and store new values to localStorage
+    items[index].done = !items[index].done;
+    localStorage.setItem('items', JSON.stringify(items));
+  }
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+
+  // Extra function
+  const check = document.querySelector('#c');
+  const uncheck = document.querySelector('#unc');
+  const clear = document.querySelector('#clear');
 
-</script>
 
+  function checkAll() {
+    console.log("...msg");
+    items.forEach(item => item.done = true);
+    populateList(items, itemsList);
+    // Update all
+    localStorage.setItem('items', JSON.stringify(items));
+  }
+
+  function uncheckAll() {
+    items.forEach(item => item.done = false);
+    // Update all
+    localStorage.setItem('items', JSON.stringify(items));
+  }
+
+  function clearAll() {
+    localStorage.clear();
+    items.clear();
+  }
+
+  check.addEventListener('submit', checkAll);
+  uncheck.addEventListener('submit', uncheckAll);
+  clear.addEventListener('submit', clearAll);
+
+  // Triggered when page refresh
+  populateList(items, itemsList);
+
+</script>
 
 </body>
 </html>
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
index f6444f4407..0cee3fc2e1 100644
--- a/15 - LocalStorage/style.css	
+++ b/15 - LocalStorage/style.css	
@@ -79,3 +79,10 @@ h2 {
   outline: 0;
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
+
+.check {
+  padding: 10px;
+  margin-top: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  justify-content: space-between;
+}

From 5ecd9806568f15c9b7e9605436c2497995f03df5 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Tue, 18 Aug 2020 15:48:41 -0700
Subject: [PATCH 19/29] Day 16 - Mouse Move Shadow

---
 16 - Mouse Move Shadow/README.MD        | 25 +++++++++++++
 16 - Mouse Move Shadow/index-START.html | 49 ++++++++++++++++++++++++-
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 16 - Mouse Move Shadow/README.MD

diff --git a/16 - Mouse Move Shadow/README.MD b/16 - Mouse Move Shadow/README.MD
new file mode 100644
index 0000000000..43e66824cd
--- /dev/null
+++ b/16 - Mouse Move Shadow/README.MD	
@@ -0,0 +1,25 @@
+# Knowledge
+
+## 1. ES6 Destructuring Assignment Shorthand
+https://www.sitepoint.com/shorthand-javascript-techniques/
+>If you are working with any popular web framework, there are high chances you will be using arrays or data in the form of object literals to pass information between components and APIs. Once the data object reaches a component, you’ll need to unpack it.
+
+Longhand:
+```Javascript
+const observable = require('mobx/observable');
+const action = require('mobx/action');
+const runInAction = require('mobx/runInAction');
+
+const store = this.props.store;
+const form = this.props.form;
+const loading = this.props.loading;
+const errors = this.props.errors;
+const entity = this.props.entity;
+```
+
+Shorthand:
+```Javascript
+import { observable, action, runInAction } from 'mobx';
+
+const { store, form, loading, errors, entity } = this.props;
+```
\ No newline at end of file
diff --git a/16 - Mouse Move Shadow/index-START.html b/16 - Mouse Move Shadow/index-START.html
index 280a4907c2..08a6c988e5 100644
--- a/16 - Mouse Move Shadow/index-START.html	
+++ b/16 - Mouse Move Shadow/index-START.html	
@@ -7,7 +7,7 @@
 <body>
 
   <div class="hero">
-    <h1 contenteditable>🔥WOAH!</h1>
+    <h1 contenteditable>我CP是真的！</h1>
   </div>
 
   <style>
@@ -35,6 +35,53 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector(".hero");
+  const text = document.querySelector("h1");
+  const walk = 100; // 100px, how far the shadow should go when mouse at corner
+  console.log(hero);
+  console.log(text);
+
+  function shadow(e) {
+    // Old way 
+    // const width = hero.offsetWidth;
+    // const height = hero.offsetHeight;
+
+    // Typically, offsetWidth is a measurement in pixels of the element's CSS width, 
+    // including any borders, padding, and vertical scrollbars (if rendered). It does not include // the width of pseudo-elements such as ::before or ::after.
+
+    // ES6 way, Destructuring Assignment Shorthand
+    const { offsetWidth: width, offsetHeight: height } = hero;
+    let { offsetX: x, offsetY: y } = e;
+
+    // If there're chlidren elements instead of hero element, the x and y would be the x and y of that inner element.
+    // FIX: if the event target is not the hero element,modify the value
+    if (this !== e.target) {
+      x = x + e.target.offsetLeft;
+      y = y + e.target.offsetTop;
+    }
+
+    // walk = 100, but the actual range we want is -50 ~ 50, so we add - (walk / 2);
+    const xWalk = Math.round((x / width * walk ) - (walk / 2));
+    const yWalk = Math.round((y / height * walk ) - (walk / 2));
+
+    text.style.textShadow = `
+    ${xWalk}px ${yWalk}px 0 rgba(255,0,255, 0.7),
+    ${xWalk * -1}px ${yWalk}px 0 rgba(255,255,0, 0.7),
+    ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,255, 0.7), 
+    ${yWalk* -1}px ${xWalk}px 0 rgba(0,0,255, 0.7)
+    `;
+ 
+    // console.log(width, height);
+    // console.log(x, y);   
+    // console.log(xWalk, yWalk);   
+
+
+
+
+  }
+
+  hero.addEventListener("mousemove", shadow);
+
 </script>
 </body>
 </html>

From 69c96f750f41ef43ea1c4aed1378520bb7efc0dc Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Tue, 18 Aug 2020 16:37:08 -0700
Subject: [PATCH 20/29] day 17 - Sort without articles

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

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index 2b6c9546e9..1e24c1e326 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -48,6 +48,16 @@
 <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'];
 
+function omit(band) {
+  // console.log(band.replace(/^(The|A|An) /i , ''));
+  return band.replace(/^(The|A|An) /i , '').trim();
+}
+
+const sorted = bands.sort((a, b) => omit(a) > omit(b) ? 1 : -1);
+
+const ul = document.querySelector("#bands");
+ul.innerHTML = sorted.map(band => `<li>${band}</li>`).join('');
+
 
 </script>
 

From 831e1def2f2b195c076b3584688999a8364871f5 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Wed, 19 Aug 2020 13:30:14 -0700
Subject: [PATCH 21/29] Day 18 - Adding up times

---
 .../index-START.html                          | 45 +++++++++++++++++++
 1 file changed, 45 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..e384a56295 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,51 @@
     </li>
   </ul>
 <script>
+
+// My shot
+
+const video = [...document.querySelectorAll("li")];
+
+function convertTime(minute, index) {
+  return Number.parseInt(minute.dataset.time.split(':')[index]);
+}
+// Here, it has to have a inital value ) since the minutes we passed in here is a string.
+let minutes = video.reduce((result, minutes) => (result + convertTime(minutes, 0)), 0);
+const seconds = video.reduce((result, minutes) => (result + convertTime(minutes, 1)), 0);
+
+// Round down minutes
+minutes += Math.floor(seconds / 60);
+const actualSeconds = seconds % 60;
+
+// Hours
+let hours = 0;
+if (minutes > 60) {
+  hours = Math.floor(minutes / 60);
+  minutes = minutes % 60;
+}
+
+console.log(`${hours > 0 ? hours + ":" : ""}` + `${minutes}` + ":" + `${actualSeconds}`);
+
+// Wesbos's solution
+
+const wvideo = [...document.querySelectorAll("[data-time]")];
+
+const wseconds = wvideo
+    .map(node => node.dataset.time)
+    .map(timeCode => {
+      const [mins, secs] = timeCode.split(':').map(parseFloat);
+      return (mins * 60) + secs;
+    })
+    .reduce((total, seconds) => total + seconds);
+
+let secondsLeft = wseconds;
+const whours = Math.floor(secondsLeft / 3600);
+secondsLeft = secondsLeft % 3600;
+const wminutes = Math.floor(secondsLeft / 60);
+secondsLeft = secondsLeft % 60;
+
+console.log(whours, wminutes, secondsLeft);
+
 </script>
 </body>
 </html>

From d3474e91ba50165380d20ca69e6fc0d0613bf093 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Fri, 21 Aug 2020 12:29:44 -0700
Subject: [PATCH 22/29] Day 22 - Follow link highlighter

---
 .../index-START.html                          | 49 ++++++++++++++++++-
 1 file changed, 48 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..ea211065c7 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,7 +26,54 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const links = document.querySelectorAll('a');
+    console.log(links);
+
+    // function addHighlight(e) {
+    //   // My shot
+    //   console.log(this.offsetTop, this.offsetLeft);
+    //   const { offsetTop: top, offsetLeft: left, offsetHeight: height, offsetWidth: width} = this;
+    //   this.classList.add('highlight');
+    //   this.style.top = `${top}px`;
+    //   this.style.left = `${left}px`;
+    //   this.style.position = "initial";
+    //   this.style.width = `${width}px`;
+    //   this.style.height = `${height}px`;
+    //   this.style.display = this.style.display = "block" ? "unset" : this.style.display;
+    // }
+
+    // function removeHighlight() {
+    //   console.log("remove");
+    //   this.classList.remove('highlight');
+
+    // }
+
+    // links.forEach(link => link.addEventListener('mouseenter', addHighlight));
+    // links.forEach(link => link.addEventListener('mouseout', removeHighlight));
+
+
+    // Wesbos's solution
+    const highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+
+    function highlightLink() {
+      const linkCoords = this.getBoundingClientRect();
+
+      const coords = {
+        width: linkCoords.width,
+        height: linkCoords.height,
+        top: linkCoords.top + window.scrollY,
+        left: linkCoords.left + window.scrollX
+      }
+
+      highlight.style.width = `${coords.width}px`;
+      highlight.style.height = `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
+    }
+
+    links.forEach(link => link.addEventListener('mouseenter', highlightLink));
+
   </script>
 </body>
 </html>

From fe96d7f0a43a9ea7bc036f2c999d0a4cf2d3bb2f Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Fri, 21 Aug 2020 13:06:44 -0700
Subject: [PATCH 23/29] Day 24 - Sticky Nav

---
 24 - Sticky Nav/README.md        | 10 ++++++++++
 24 - Sticky Nav/index-START.html | 20 +++++++++++++++++++-
 24 - Sticky Nav/style-START.css  | 16 +++++++++++++++-
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 24 - Sticky Nav/README.md

diff --git a/24 - Sticky Nav/README.md b/24 - Sticky Nav/README.md
new file mode 100644
index 0000000000..0c849ed3f8
--- /dev/null
+++ b/24 - Sticky Nav/README.md	
@@ -0,0 +1,10 @@
+# Knowledge
+
+## CSS Positioning
+https://www.w3schools.com/css/css_positioning.asp
+
+>position: fixed;
+
+>An element with `position: fixed;` is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
+
+>A fixed element does not leave a gap in the page where it would normally have been located.
\ No newline at end of file
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..bdc94c4e8d 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -53,7 +53,25 @@ <h1>A story about getting lost.</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
   </div>
 
-<script>
+<script> 
+  const nav = document.querySelector('#main');
+  const topOfNav = nav.offsetTop;
+  // console.log(topOfNav);
+
+  function fixNav() {
+    console.log(this);
+    if (window.scrollY >= topOfNav) {
+      // Adding back padding since nav no longer takes space
+      document.body.style.paddingTop = nav.offsetHeight + 'px';
+      document.body.classList.add('fixed-nav');
+    } else {
+      document.body.style.paddingTop = 0;
+      document.body.classList.remove('fixed-nav');
+    }
+
+  }
+
+  window.addEventListener('scroll', fixNav);
 
 </script>
 
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index b83b9c01ae..627e67c5d9 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -25,6 +25,10 @@ body {
   transition: transform 0.5s;
 }
 
+.fixed-nav .site-warp {
+  transform: : scale(1);
+}
+
 header {
   text-align: center;
   height: 50vh;
@@ -50,7 +54,13 @@ nav {
   z-index: 1;
 }
 
-nav ul {
+.fixed-nav nav {
+  /*note that a fixed element no longer t akes space, sort like float*/
+  position: fixed; 
+  box-shadow: 0 5px rgba(0,0,0,0.1);
+}
+
+nav ul { 
   margin: 0;
   padding:0;
   list-style: none;
@@ -74,6 +84,10 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  max-width: 500px;
+}
+
 li.logo a {
   color: black;
 }

From 8a22cc267984f3598f5198a759904a0bf41c2d46 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Sat, 22 Aug 2020 15:34:10 -0700
Subject: [PATCH 24/29] Day 25 - Event Bubbling, Capture and Propagation

---
 .../README.MD                                       |  9 +++++++++
 .../index-START.html                                | 13 +++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 25 - Event Capture, Propagation, Bubbling and Once/README.MD

diff --git a/25 - Event Capture, Propagation, Bubbling and Once/README.MD b/25 - Event Capture, Propagation, Bubbling and Once/README.MD
new file mode 100644
index 0000000000..cbb90dd48c
--- /dev/null
+++ b/25 - Event Capture, Propagation, Bubbling and Once/README.MD	
@@ -0,0 +1,9 @@
+# Knowledge
+
+## Event Bubbling and capturing
+
+https://javascript.info/bubbling-and-capturing
+
+>There are two possible values of the `capture` option:  
+If it’s `false` (default), then the handler is set on the bubbling phase.  
+If it’s `true`, then the handler is set on the capturing phase.  
\ No newline at end of file
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..11f73e6700 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -42,6 +42,19 @@
 
 <button></button>
 <script>
+  const divs = document.querySelectorAll('div'); 
+
+  function logText(e) {
+    // Stop bubbling up
+    e.stopPropagation();
+    console.log(this.classList.value);
+  }
+
+  // Set capture: true => we will run the function on the way down rathar than on the way up
+  divs.forEach(div => div.addEventListener('click', logText, {
+    capture: false,
+    once: true  // It will listen for a click once and then unbind itself
+  }));
 
 </script>
 </body>

From 97ebd4b8acfc9332887b378469b4591a780d2448 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Sat, 22 Aug 2020 20:37:08 -0700
Subject: [PATCH 25/29] Day 26 - Stripe follow along nav

---
 26 - Stripe Follow Along Nav/index-START.html | 53 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 608d0a6716..108c7b9f1c 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -124,7 +124,7 @@ <h2>Cool</h2>
   }
 
   .cool > li {
-    position: relative;
+    position: relative; /*important!*/
     display: flex;
     justify-content: center;
   }
@@ -142,6 +142,17 @@ <h2>Cool</h2>
     display: none;
   }
 
+  .trigger-enter {
+    display: block;
+    /*opacity: 1;*/
+  }
+
+  /* We will first change the display to block and wait 150ms before change opcaity*/
+  /* This gives us a better transition*/
+  .trigger-enter-active {
+    opacity: 1;
+  }
+
   .trigger-enter .dropdown {
     display: block;
   }
@@ -220,6 +231,46 @@ <h2>Cool</h2>
 </style>
 
 <script>
+  const triggers = document.querySelectorAll('.cool > li');
+  const background = document.querySelector('.dropdownBackground');
+  const nav = document.querySelector('.top');
+
+
+  function handleEnter() {
+    this.classList.add('trigger-enter');
+    // Enter a new function will make 'this' change, so we use empty() here and this will be inherited from parent.
+    setTimeout(() => this.classList.add('trigger-enter-active'), 150); 
+    background.classList.add('open');
+
+    // Note: use 'this' here
+    const dropdown = this.querySelector('.dropdown');
+    // This is why we first change its display to block and then opacity, since we need to get the w/h first
+    const dropdownCoords = dropdown.getBoundingClientRect();
+
+    // Get outside box coords
+    const navCoords = nav.getBoundingClientRect();
+
+    const coords = {
+      height: dropdownCoords.height,
+      width: dropdownCoords.width,
+      // offset
+      top: dropdownCoords.top - navCoords.top,
+      left: dropdownCoords.left - navCoords.left,
+    };
+
+    background.style.setProperty('width', `${coords.width}px`);
+    background.style.setProperty('height', `${coords.height}px`);
+    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
+  }
+
+  function handleLeave() {
+    this.classList.remove('trigger-enter', 'trigger-enter-active');
+    background.classList.remove('open');
+  }
+
+  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
+  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
+
 </script>
 
 </body>

From 7cb0ecb676a6cd2c2074e60a9cddcb896fa873d4 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Sun, 23 Aug 2020 11:34:06 -0700
Subject: [PATCH 26/29] Day 27 - Click and Drag

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

diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
index b8609315f7..b273927875 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -35,6 +35,39 @@
   </div>
 
 <script>
+    const slider = document.querySelector('.items');
+    let isDown = false;
+    let startX;
+    let scrollLeft;
+
+    slider.addEventListener("mousedown", (e) => {
+        isDown = true;
+        slider.classList.add('active');
+        // We nee to know where a user click inside this slider, so - slider.offsetLeft
+        startX = e.pageX - slider.offsetLeft;
+        scrollLeft = slider.scrollLeft;
+    });
+
+    slider.addEventListener("mouseleave", () => {
+        isDown = false;
+    });
+
+    slider.addEventListener('mouseup', () => {
+        isDown = false;
+        slider.classList.remove('active');
+    });
+
+    slider.addEventListener('mousemove', (e) => {
+        if (!isDown) return; //Stop running this function
+        // The Event interface's preventDefault() method tells the user agent that if the event 
+        // does not get explicitly handled, its default action should not be taken as it normally 
+        // would be. 
+        e.preventDefault(); 
+        const x = e.pageX - slider.offsetLeft;
+        const walk = (x - startX) * 3; // Speed up
+        slider.scrollLeft = scrollLeft - walk;
+    });
+
 </script>
 
   </body>

From 6906c99a84289fccb90a2184d6b4dcb9940cdb9f Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Sun, 23 Aug 2020 12:29:34 -0700
Subject: [PATCH 27/29] Day 28 - Video Speed controller

---
 28 - Video Speed Controller/index-START.html | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
index 8bd536b18b..2f5dc1d78b 100644
--- a/28 - Video Speed Controller/index-START.html	
+++ b/28 - Video Speed Controller/index-START.html	
@@ -15,6 +15,24 @@
   </div>
 
 <script>
+	const video = document.querySelector('.flex');
+	const speed = document.querySelector('.speed');
+	const speedBar = document.querySelector('.speed-bar');
+
+	speed.addEventListener('mousemove', (e) => {
+		// 'this' changed so we cannot use 'this' here
+		const y = e.pageY - speed.offsetTop; 
+		const percent = y / speed.offsetHeight;
+		const min = 0.4;
+		const max = 4;
+		const height = Math.round(percent * 100) + '%';
+		const playbackRate = percent * (max - min) + min;
+		 
+		speedBar.style.height = height;
+		speedBar.textContent = playbackRate.toFixed(2) + 'x';
+		video.playbackRate = playbackRate;
+	});
+
 </script>
 </body>
 </html>

From 7f40a45c3f91b379a45290e11c08f60853cae7ef Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Sun, 23 Aug 2020 16:35:03 -0700
Subject: [PATCH 28/29] Day 29 - Countdown Timer

---
 29 - Countdown Timer/scripts-START.js | 113 ++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)

diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js
index e69de29bb2..9989c8d4c8 100644
--- a/29 - Countdown Timer/scripts-START.js	
+++ b/29 - Countdown Timer/scripts-START.js	
@@ -0,0 +1,113 @@
+const displayLeft = document.querySelector('.display__time-left');
+const displayEnd = document.querySelector('.display__end-time');
+
+const buttons = document.querySelectorAll('.timer__button');
+const customInput = document.querySelector('.custom');
+
+// My shot
+
+let start = false;
+let countDown;
+
+function startCountDown() {
+	start = true;
+	// let time = new Date();
+	// time.setSeconds(time.getSeconds( + this.dateset.time));
+	countDown = this.dataset.time;
+	display();
+	// console.log(countDown);
+}
+
+// buttons.forEach(button => button.addEventListener('click', startCountDown));
+
+function display() {
+	if (!start) return;
+
+	let secondsLeft = countDown;
+	const hours = Math.floor(secondsLeft / 3600);
+	secondsLeft = secondsLeft % 3600;
+	const minutes = Math.floor(secondsLeft / 60);
+	secondsLeft = (secondsLeft % 60);
+
+	let text;
+
+	if (hours > 0 ) {
+		text = hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + 
+		':' + (secondsLeft < 10 ? '0' + secondsLeft : secondsLeft);
+	} else {
+		text = (minutes < 10 ? '0' + minutes : minutes) + 
+		':' + (secondsLeft < 10 ? '0' + secondsLeft : secondsLeft);
+	}
+
+	displayLeft.textContent = text;
+
+	countDown --;
+
+	if (countDown === 0 ) {
+		displayLeft.textContent = "";
+		start = false;
+	}
+
+	console.log(hours, minutes, secondsLeft);
+}
+
+// Not a good use here since interval might stop at some situation
+setInterval(display, 1000);
+
+
+// Wesbos's solution
+
+let countdown;
+
+function timer(seconds) {
+	// Clear any existing timer
+	clearInterval(countdown);
+
+	const now = Date.now();
+	const then = now + seconds * 1000;
+
+	displayTimeLeft(seconds);
+	displayEndTime(then);
+
+	countdown = setInterval(() => {
+		const secondsLeft = Math.round((then - Date.now()) / 1000);
+		if (secondsLeft < 0 ) {
+			clearInterval(countdown);
+			return;
+		}
+		displayTimeLeft(secondsLeft);
+	}, 1000);
+}
+
+
+function displayTimeLeft(seconds) {
+	const minutes = Math.floor(seconds / 60);
+	const secondsLeft = (seconds % 60);
+	const display = `${minutes}:${secondsLeft < 10 ? '0' : ''}${secondsLeft}`;
+
+	displayLeft.textContent = display;
+}
+
+function displayEndTime(timestamp) {
+	const end = new Date(timestamp);
+	const hours = end.getHours();
+	const minutes = end.getMinutes();
+	displayEnd.textContent = `Be back at ${hours > 12 ? hours - 12 : hours}:${minutes}`;
+}
+
+function startTimer() {
+	timer(parseInt(this.dataset.time));
+}
+
+function startCustomizedtimer(e) {
+	e.preventDefault();
+	const mins = this.minutes.value;
+	timer(mins * 60);
+
+	this.reset();
+
+}
+
+buttons.forEach(button => button.addEventListener('click', startTimer));
+// Element with a name can be directly selected
+document.customForm.addEventListener('submit', startCustomizedtimer);

From f4987e693afa1d15ee45120b7130de5e3ba6b9b4 Mon Sep 17 00:00:00 2001
From: herron9 <yanghrong@outlook.com>
Date: Sun, 23 Aug 2020 17:28:30 -0700
Subject: [PATCH 29/29] Day 30 - Whack A Mole

---
 30 - Whack A Mole/index-START.html | 48 ++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
index 2014ff458c..0699c4c719 100644
--- a/30 - Whack A Mole/index-START.html	
+++ b/30 - Whack A Mole/index-START.html	
@@ -36,7 +36,55 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
   const holes = document.querySelectorAll('.hole');
   const scoreBoard = document.querySelector('.score');
   const moles = document.querySelectorAll('.mole');
+  let score; 
 
+  let lastHole;
+  let timeUp = false;
+
+  function randomTime(min, max) {
+    return Math.round(Math.random() * (max - min) + min);
+  }
+
+  function randomHole(holes) {
+    const index = Math.floor(Math.random() * holes.length);
+    const hole = holes[index];
+    if (hole === lastHole) {
+      return randomHole(holes);
+    }
+
+    lastHole = hole;
+    return holes[index];
+  }
+
+  function peep() {
+    const time = randomTime(200, 1000);
+    const hole = randomHole(holes);
+    hole.classList.add('up');
+    setTimeout(() => {
+      hole.classList.remove('up');
+      if (!timeUp) peep();
+    }, time);
+  }
+
+  function startGame() {
+    scoreBoard.textContent = 0;
+    timeUp = false;
+    score = 0;
+    peep();
+    setTimeout(() => timeUp = true, 10000);
+  }
+
+  function bonk(e) {
+    if (!e.isTrusted) return; // Verify this is a real click not cheat
+    score ++;
+
+    this.classList.remove('up');
+    scoreBoard.textContent = score;
+
+  }
+
+  moles.forEach(mole => mole.addEventListener('click', bonk));
+  
 </script>
 </body>
 </html>