From 9c6b54c8413688cd8eff5cd95100615aebd24d3b Mon Sep 17 00:00:00 2001
From: Tim <tim@timde-iMac.local>
Date: Mon, 1 Apr 2019 18:13:36 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=E7=AC=AC1-4=E9=97=9C=20done?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                                 | Bin 0 -> 10244 bytes
 01 - JavaScript Drum Kit/index-START.html |  19 +++++++
 02 - JS + CSS Clock/index-START.html      |  31 ++++++++++-
 03 - CSS Variables/index-START.html       |  41 ++++++++++++--
 04 - Array Cardio Day 1/index-START.html  |  62 +++++++++++++++++++++-
 05 - Flex Panel Gallery/index-START.html  |   2 +-
 06 - Type Ahead/index-START.html          |   1 -
 7 files changed, 148 insertions(+), 8 deletions(-)
 create mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..44f09bee9fbaff2a82fa2f7d035bd2baf13a9044
GIT binary patch
literal 10244
zcmeHMT~8cU7=8y(7ODZ;Dy8kk#Mq>XXaJ$qm?psPQm~~V9SSjO=zam4?#|%u!WI$3
zjqxuS{RPH<;*FR75aYEz&-tJ;XO}GW!Wc4>%)IZ+&ikBmp7-ONGb<wA;(mEb#21ka
zPRh}@aOraJcb*+bpLsF?>A{{bpG!dwa0VT3rw>vFQU+26QU+26QU?AH3}DXYk-4H}
zdQBNf8Aus8Wq|d;$4NPF<cXH5bl{@40FVQCtPbed2Phlg$ay1Av{a_R)Vl}In0jW5
z;c0XH?(=oXc_UA>)aK%8bMZ{ep4p*zs&&};>UHtvwM?%m11STY3~=v$LndVk`Suac
zSNr#pG^8qf(!$dm^nIyAdxU4Lm0DCP)}kV8nQp)0y!($jpov@q-t;M60PRDZS$q?q
zo|T$JQj!-*6mRVHP>Sv5p6Sc)#l2d!*_xdE)9dRWc;n5%OlCMU{PytI!EV$JT7}kr
zbFt9)l6Px`)^5@0>rqrY)eFUqYNfq3dOaJ3twJ@dG?a0*T)`_}ZC1l_)LxAC!*WyM
z1p0?eW+*eXH9CHDG&MUn;ZNVccRb-kpP8BP=Vs@QkB2g2ccvb!Jg*;qd-UD$_dhG1
z#PhV25hJbm1<E;DJO~<LEedyFLA0yj{u8iFUs}dD@I8jUEJzXDSET7M{{!se{yP`O
zrRDuxqjy*z1M4$}^#yR<0N01g17yAo?jzjg%+o1{|GymmFNk(&J#j%Ey7*+)_+&}N
z{Y%`f!3QC7pa%UR^qTsmA%{ty^cA}J<N|1y+9wy_!STrm^5mZJ$vQG*51#O4L3SYv
zQg(dshvS1D)|Zy^9^-a6X4cFZj(gXl=_Kd<4;;>K0`0y*Tf!P3gx=;F06z0&S=MD$
z9t$HPt1^q<{+;=y|2GG79GIUP%p5#_0DT=5GD0pkq3590(MAZYma3g$vX=wn4&nz`
zzf2m$Wrb75U4TATWm~OanDu;?Rk4QEM?x>c<|TUK^nBn)r=1&U$F7vJV513a_SKgS
zv{VKH>--wV!TMj3hSTrA9lTpWvn!=Xc%O4d0Qn8DE9h|vSMpIoI~Ck@WkWs#>QAxt
z*BDUk8X!PlbkBT9dM{Gf0B8;9sDH^ms?}T^?GDiF+}3?{_!NEH#@WEB`%EuxnAKi{
zEI(9j?<8ANE53M3@1P}HTOOltC9qfn3OVMCx+4__fh(6d!h1ll^<@=S^bi@OexNkQ
z1S$>g+YT0I;W*Y!VA(thR1dfk-o!{4`^4rwGmKs-p{E`3qh^sf=51iwY+67sxH1Sa
zu4mwA9eSM@r)`keGTK2DB>URO${5ET0j|xcO;{BbcZ^Gwvq@`}<8kYE5rZ~+0#%b4
zYs~K+k*6{{jx-7+n;#F+55|}FW7o)4c^tQYANDpMmXtN^+lpsu<jP0AA#2RwWoSF-
zDPx?HS>om#b2#1xNBb%}I0M<y28h#8d6!<Oc2omqZyad^NH#MVrHq0XDu<sS#txFK
zGfTZpEK9G#+D3a`MJL<#g<fa<;8>g)k-3?`xD5;&@9crzu`%M$X0J=%n28D8YrwU!
z&;6PnnU7xSD$4yJ@-aC=580SNxdjv(?eY3(V@%g$dX+s_wFqN&{O2Jr6R6jLYGXYM
zE6zzRozc)ZljuBhaF~k;oGY>gf3fv#SnSBh@Lav48nU*=_eO(=z7@<Od3l1$lut6i
zyiBw)1aIb1BXX!fd9+Y>J<426SPTR88Qxxn)l>PRs}1JUgw3Fe70yLnT40VP-o}8;
z(XXY?@BjI;|NpnIr!r+AW#AGr;0@%0+#&|%oiR9mYxi+J$H{~5ooJ~{a8aM*A=T%2
z-0*Y!U7UP(l9C7Xc_UA>#1kC<`JVyl{{MBqN^*B;S1srGs^aWTd+cO8XH$vKy*;ec
M{l7}gbMF8D1=2Qm&j0`b

literal 0
HcmV?d00001

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index c771dea..81ffe17 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,25 @@
 
   <script>
 
+    let keys = document.querySelectorAll('.key')
+    let audios = document.querySelectorAll('audio') 
+    
+    window.addEventListener('keydown', function (e) {
+      if (!document.querySelector(`audio[data-key="${e.keyCode}"]`)) {
+        return
+      }
+      document.querySelector(`audio[data-key="${e.keyCode}"]`).currentTime = 0  // 為了讓每次按的時候，都可以直接從頭開始播
+      document.querySelector(`audio[data-key="${e.keyCode}"]`).play()
+      document.querySelector(`div[data-key="${e.keyCode}"]`).classList.add('playing')            
+    })
+  
+    // transitionend 事件偵測 css 在 transition 結束之後，會觸發
+    keys.forEach(el => {
+      el.addEventListener('transitionend', function () {
+        this.classList.remove('playing')
+      })
+    })    
+  
   </script>
 
 </body>
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384..6fe3f79 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,41 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100% 50%;
+      transition: all 1s;
     }
 
   </style>
-
+      
   <script>
+    function now () {
+      let hour, min, second      
+
+      setInterval(() => {
+        hour = new Date().getHours()
+        min = new Date().getMinutes()
+        second = new Date().getSeconds()    
+        console.log(hour, min, second)
+        hourDeg = 360 / 12 * hour 
+        minDeg = 360 / 60 * min
+        secondDeg = 360 / 60 * second
+        
+        if(hourDeg || minDeg || secondDeg){
+          document.querySelectorAll('.hand').forEach(el => {
+            el.style.transition = 'all 0s'   // 在要繞一圈的時候，把 css trisition 拿掉
+          })   
+        }else {
+          document.querySelectorAll('.hand').forEach(el => {
+            el.style.transition = 'all 1s'
+          })  
+        } 
+        document.querySelector('.hour-hand').style.transform = `rotate(${hourDeg + 90}deg)`
+        document.querySelector('.min-hand').style.transform = `rotate(${minDeg + 90}deg)`
+        document.querySelector('.second-hand').style.transform = `rotate(${secondDeg + 90}deg)`
+      },1000)      
+    }        
 
+    now();
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607..d31aeaa 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -9,19 +9,23 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
-    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">   <!-- 原來有這種 input range 的 input -->
 
     <label for="blur">Blur:</label>
     <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
     <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
+    <input type="color" name="base" value="#ffc600">    <!-- 原來有這種 color 選擇的 input -->
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
-
+    :root {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -45,9 +49,40 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width:100px;
     }
+
+    img{      
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
   </style>
 
   <script>
+    // document.querySelector('input[name="spacing"]').addEventListener('input', (e) => {
+    //     // 要用 input 才能在拖拉時，也觸發事件          
+    //     console.log('[目前拉霸的值]',e.target.value)  
+    //     document.querySelector('img').style.padding = e.target.value - 10  + 'px'          
+    // })      
+
+    // document.querySelector('input[name="blur"]').addEventListener('input', (e) => {
+    //     // 要用 input 才能在拖拉時，也觸發事件          
+    //     console.log('[目前拉霸的值]',e.target.value)          
+    // }) 
+
+
+    // 透過 JS 改變 css 變數     
+    // 這次的做法不是直接寫 style 上去，而是先將 style 指定給 css 變數，再透過 JS 去改變 css 變數的內容
+    // document.documentElement 就是 <html> 元素
+
+    function handleUpate (){
+      console.log(this.name, this.type, this.value)
+      let suffix = this.dataset.sizing || ''
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
+    }
+    
+    document.querySelectorAll('input[type="range"]').forEach(input => input.addEventListener('input', handleUpate))
+    document.querySelector('input[type="color"]').addEventListener('input', handleUpate)
+    
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce..3e86b19 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,29 +33,87 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    console.table(
+      inventors.filter(el => {
+        return el.year > 1500 && el.year < 1600
+      })
+    )
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    console.table(
+      inventors.map(el => {        
+          return el.first + ' ' + el.last        
+      })
+    )
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    console.table(
+      inventors.sort((a, b) => {
+        return a.year - b.year
+      })
+    )
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+      console.log(
+        inventors.reduce((acum, currentValue) => {
+          let num = currentValue.passed - currentValue.year          
+          return acum += num          
+        }, 0)
+      )
 
     // 5. Sort the inventors by years lived
+      console.table(
+        inventors.sort((fst, secnd) => {
+          let fstYear = fst.passed - fst.year
+          let secndYear = secnd.passed - secnd.year
+          return secndYear > fstYear ? 1 : -1
+        })
+      )
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
-
+        
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+      console.log(
+        people.map(el => { return { first:el.split(' ')[0], last:el.split(' ')[1]} })
+              .sort((a, b) => {
+                if (a.last < b.last) {
+                  return -1;
+                }
+                if (a.last > b.last) {
+                  return 1;
+                }
+                // names must be equal
+                return 0;
+              })
+              .map(el => {return el.first + ' ' + el.last})
+      )
+
+    // const alpha = people.sort((lastOne, nextOne) => {
+    //   const [aFirst, aLast] = lastOne.split(', ');
+    //   const [bFirst, bLast] = nextOne.split(', ');
+    //   return aLast > bLast ? 1 : -1;
+    // });
+    // console.log(alpha);
+    
 
     // 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' ];
-
+    console.log(
+        data.reduce((obj, current) => {
+          if(!obj[current]){
+            obj[current] = 0          
+          }
+          obj[current] = obj[current] + 1
+          return obj
+        }, {})
+      )
   </script>
 </body>
 </html>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index 04e974b..56b1482 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -107,7 +107,7 @@
   </div>
 
   <script>
-
+    
   </script>
 
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886..68419db 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -16,7 +16,6 @@
   </form>
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
-
 </script>
   </body>
 </html>

From 31aa3e9b37d152eaacba6105cf51469da5914fe6 Mon Sep 17 00:00:00 2001
From: wen Tim <wentim@wende-MacBook-Pro.local>
Date: Fri, 2 Aug 2019 07:31:23 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=E7=AC=AC5=E9=97=9C=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 05 - Flex Panel Gallery/index-FINISHED.html |  5 ++-
 05 - Flex Panel Gallery/index-START.html    | 49 ++++++++++++++++++++-
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html
index 243f8a2..6d6fa70 100644
--- a/05 - Flex Panel Gallery/index-FINISHED.html	
+++ b/05 - Flex Panel Gallery/index-FINISHED.html	
@@ -126,12 +126,13 @@
     const panels = document.querySelectorAll('.panel');
 
     function toggleOpen() {
-      console.log('Hello');
+      console.log('老媽，快打開');
       this.classList.toggle('open');
     }
 
     function toggleActive(e) {
-      console.log(e.propertyName);
+      console.log('媽呀！end了')
+      // console.log(e.propertyName);
       if (e.propertyName.includes('flex')) {
         this.classList.toggle('open-active');
       }
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index 56b1482..d0d56ed 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,9 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+
+      display:flex;
+      justify-content: center;
     }
 
     .panel {
@@ -41,6 +44,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+
+      flex-grow: 1;      
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
     }
 
 
@@ -62,12 +70,26 @@
       text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
     }
+
+    .panel p:nth-child(1) {
+      transform: translateY(-100%)
+    }
+
     .panel p:nth-child(2) {
       font-size: 4em;
     }
 
+    .panel p:nth-child(3) {
+      transform: translateY(100%)
+    }    
+
+    .panel.open-active p:nth-child(1), .panel.open-active p:nth-child(3){
+      transform: translateY(0)
+    }
+
     .panel.open {
       font-size:40px;
+      flex: 6;
     }
 
     .cta {
@@ -107,7 +129,32 @@
   </div>
 
   <script>
-    
+    const panels = document.querySelector('.panels');    
+    panels.addEventListener('click', function(e) {         
+      let isOpen
+      let DIV
+      if (e.target.nodeName === 'P') {        
+        DIV = e.target.parentNode
+        isOpen = Array.prototype.slice.call(DIV.classList).includes('open')
+        
+      } else if (e.target.nodeName === "DIV") {
+        DIV = e.target
+        isOpen = Array.prototype.slice.call(e.target.classList).includes('open')              
+      }
+
+      if (!isOpen) {
+        DIV.classList.add('open')
+        setTimeout(() => {
+          DIV.classList.add('open-active')
+        }, 500)
+      }else {
+        DIV.classList.remove('open')
+        setTimeout(() => {
+          DIV.classList.remove('open-active')          
+        }, 500)
+                
+      } 
+    })
   </script>
 
 

From d15ddec34243d363cc5237ffba9fa7d1db08b464 Mon Sep 17 00:00:00 2001
From: wen Tim <wentim@wende-MacBook-Pro.local>
Date: Fri, 9 Aug 2019 10:20:23 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix:=E7=AC=AC5=E9=97=9C=E5=BE=AE=E8=AA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index d0d56ed..261707b 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -133,6 +133,7 @@
     panels.addEventListener('click', function(e) {         
       let isOpen
       let DIV
+      // 先判斷 isOpen 和 DIV
       if (e.target.nodeName === 'P') {        
         DIV = e.target.parentNode
         isOpen = Array.prototype.slice.call(DIV.classList).includes('open')
@@ -142,18 +143,23 @@
         isOpen = Array.prototype.slice.call(e.target.classList).includes('open')              
       }
 
-      if (!isOpen) {
-        DIV.classList.add('open')
-        setTimeout(() => {
-          DIV.classList.add('open-active')
-        }, 500)
-      }else {
-        DIV.classList.remove('open')
-        setTimeout(() => {
-          DIV.classList.remove('open-active')          
-        }, 500)
-                
-      } 
+      // 針對isOpen 是 true 或 false 做開/關的效果
+      // if (!isOpen) {
+      //   DIV.classList.add('open')
+      //   setTimeout(() => {
+      //     DIV.classList.add('open-active')
+      //   }, 500)
+      // }else {
+      //   DIV.classList.remove('open')
+      //   setTimeout(() => {
+      //     DIV.classList.remove('open-active')          
+      //   }, 500)                
+      // } 
+
+      DIV.classList.toggle('open')
+      setTimeout(() => {
+        DIV.classList.toggle('open-active')
+      }, 500)
     })
   </script>
 

From 8287b5423b4251a41fa2372ce9e9cb6acf1597fd Mon Sep 17 00:00:00 2001
From: wen Tim <wentim@wende-MacBook-Pro.local>
Date: Sun, 11 Aug 2019 20:08:44 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E7=AC=AC=E5=85=AD=E9=97=9C?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                        | Bin 10244 -> 12292 bytes
 06 - Type Ahead/index-START.html |  95 ++++++++++++++++++++++++++++++-
 2 files changed, 94 insertions(+), 1 deletion(-)

diff --git a/.DS_Store b/.DS_Store
index 44f09bee9fbaff2a82fa2f7d035bd2baf13a9044..2275b43e08aaf9ea78b0125ba17ec17d8c6e0bc1 100644
GIT binary patch
delta 895
zcmZn(Xh~3DU|?W$DortDV9)?EIe-{M3-ADmb_NCo?uiQOvdlmZBM=(_F_0|)6lc%{
zVn>D|hN6ju%99OLSXe;{SSH^R_n#auptiAyiG4FW2MY(IB2dUkIjOw3ASow538>~|
zQbA5;afyM!bw(y;7FITP4o*%EPF~K*ABB_kLCkmoiRx-Y19Ke(BNL-q9ffL33o{)B
zQzO&bT22meRYP0Pgxt!i>YCcRnUj0O<r!yzY~U#iF3QWv&r1i|z&Ke$B7Cy8gei@!
z)sV12wYEkgbaK6fF(GR?5x(Ul!?!gOW+>KfJ||(xzOliUg;8KLk3b@;1PwyiK-6e*
zmRLD0j9w$IH(5|dM+O*itUwF|8r(p_6*&=ZEPT&AnP0__kzuk8k2DJ~sc}rsP?<T|
RUrc(kh-f4&oJD&d0|07W+Ry+1

delta 207
zcmZokXbF&DU|?W$DortDU{C-uIe-{M3-C-V6q~3gIoUvmMH0wo&;epbpg2g{iy@Jr
z42Xj_3o?FVo2<aNb~8H%3kRdlW*&t^*2y=OFHJUA)t;QGRt{vJo4i(Cd*THD$;$-I
zCwB_UPxclzo~$D*zj=m;8M`1e$ZVjQ+(5z=WG&Fh@640=bqra7wlOqJcGQvPV1l?y
RV{(Gd%*l+ZIoNH`0sw-7F=qe(

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 68419db..7f27d2c 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,7 +15,100 @@
     </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 cityList = []
+  fetch(endpoint)
+    .then((res) => res.json())
+    .then((data) => {cityList.push(...data)})
+
+  function findMatch (wordToMatch, cityList) {
+    let regex = new RegExp(wordToMatch, 'gi')
+    return cityList.filter((place) => {
+      return place.city.match(regex) || place.state.match(regex)
+    })
+  } 
+
+  function numberWithComma (x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')    
+  } 
+
+  function showMatch () {    
+    let matchData = findMatch(this.value, cityList) 
+    let regex = new RegExp(this.value, 'gi')    
+    let html = matchData.map(place => {      
+    let matchCity = place.city.match(regex)
+    let matchState = place.state.match(regex)                  
+    let cityName = place.city.replace(regex, `<span class="hl">${this.value ? matchCity : this.value}</span>`)      
+    let stateName = place.state.replace(regex, `<span class="hl">${this.value ? matchState: this.value}</span>`)      
+      return  `
+        <li>
+          <span class="name">${cityName}, ${stateName}</span>
+          <span class="population">${numberWithComma(place.population)}</span>
+        </li>
+      `
+    }).join('')
+
+    document.querySelector('.suggestions').innerHTML = html
+  }
+
+  document.querySelector('.search').addEventListener('keyup', showMatch)
+
+//   let cityList
+
+//   function getData () {
+//     return fetch(endpoint).then((response) => {
+//       console.log(response)
+//       return response.json()
+//     }).then((data) => {      
+//       return data
+//     })
+//   }
+// cityList = getData();
+
+// cityList.then((list) => {    
+//   function keyup (e) {
+//     const filterTxt = document.querySelector('.search').value.toUpperCase()
+//     let filterTxtLength = filterTxt.length  
+//     let filterList = list.filter(el => {
+//         return el.city.toUpperCase().includes(filterTxt) || el.state.toUpperCase().includes(filterTxt)      
+//       }).map((el) => {
+//         let population = `<span class="population">${el.population}</span>`
+//         return [el.city + ',', ' ' + el.state, population]
+//     })
+//     let arr = filterList.map((arr) => {
+//       let newTxt 
+//       let cityArr
+//       let population
+//       let itemArr = []                     
+//       arr.forEach((el) => {        
+//         let upperEl = el.toUpperCase()
+//         let upperFilter = filterTxt.toUpperCase()
+//         let strArr = []
+//         if (upperEl.includes(upperFilter)) {                          
+//           let startIndex = upperEl.indexOf(upperFilter)          
+//           let endIndex = filterTxtLength + startIndex + 1          
+//           strArr = el.split('')
+//           strArr.splice(startIndex, 0, '<span class="hl">')
+//           strArr.splice(endIndex, 0, '</span>')                                   
+//           el = strArr.join('')
+//           itemArr.push(el)
+//         }else {
+//           itemArr.push(el)
+//         }             
+//       })   
+//       cityArr = itemArr.slice(0, 2)
+//       newTxt = `<li><span class="name">${cityArr.join('')}</span>${itemArr[2]}</li>`
+      
+//       return newTxt
+//     })    
+
+//     document.querySelector('.suggestions').innerHTML = arr.join('')
+//   }  
+
+//   document.querySelector('.search').addEventListener('keyup', keyup)
+// })
+
 </script>
   </body>
 </html>

From 6a5a9dd717fead595ede9a4699ea19d61b190bcd Mon Sep 17 00:00:00 2001
From: wen Tim <wentim@wende-MacBook-Pro.local>
Date: Sun, 15 Sep 2019 11:32:31 +0800
Subject: [PATCH 5/5] feat: finish to 8

---
 06 - Type Ahead/index-START.html            |   4 +-
 07 - Array Cardio Day 2/index-START.html    |  22 +++-
 08 - Fun with HTML5 Canvas/index-START.html | 109 +++++++++++++++++++-
 3 files changed, 131 insertions(+), 4 deletions(-)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 7f27d2c..3c44c21 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -39,8 +39,8 @@
     let html = matchData.map(place => {      
     let matchCity = place.city.match(regex)
     let matchState = place.state.match(regex)                  
-    let cityName = place.city.replace(regex, `<span class="hl">${this.value ? matchCity : this.value}</span>`)      
-    let stateName = place.state.replace(regex, `<span class="hl">${this.value ? matchState: this.value}</span>`)      
+    let cityName = this.value ? place.city.replace(regex, `<span class="hl">${matchCity}</span>`) : place.city
+    let stateName = this.value ? place.state.replace(regex, `<span class="hl">${matchState}</span>`) : place.state
       return  `
         <li>
           <span class="name">${cityName}, ${stateName}</span>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31..a2ecfe3 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -27,15 +27,35 @@
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
     // Array.prototype.every() // is everyone 19?
-
+    let someData = people.some((currentValue, index, array) => {
+      return new Date().getFullYear() - currentValue.year > 19
+    })
+    console.log({isAdult: someData})    
+    let everydata = people.every((currentValue, index, array) => {
+      return new Date().getFullYear() - currentValue.year > 19
+    })
+    console.log({isAllAdult: everydata})
     // 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
+    let item = comments.find((el) => {
+      return el.id === 823423
+    })
+    console.log(item)
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
 
+    // comments.splice(comments.findIndex((el) => el.id === 823423), 1)
+    
+    let index = comments.findIndex(el => el.id === 823423)
+    const newComments = [
+      ...comments.slice(0, index),
+      ...comments.slice(index+1)
+    ]
+    console.log(newComments)
+
   </script>
 </body>
 </html>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148d..fa7ad56 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -5,14 +5,121 @@
   <title>HTML5 Canvas</title>
 </head>
 <body>
-<canvas id="draw" width="800" height="800"></canvas>
+<canvas id="draw"></canvas>
+
 <script>
+  const canvas = document.getElementById('draw')  
+  let ctx
+  let isDown = false 
+  let win_w = window.innerWidth
+  let win_h = window.innerHeight
+  let radius = 3 // 起始半徑大小
+  let radiusPlus = 0.5  // 半徑變化 range
+  let bigest = 55 // 最大半徑
+  let colorChange = 4  // 顏色變化 range
+
+  let defaultColor = [255, 0, 0] // 預設起始顏色
+  let colorIdx = 0 // 當下變動中的顏色 idx
+
+  function init() {        
+    ctx = canvas.getContext('2d') 
+    if (!canvas.getContext) {
+      return
+    } 
+    canvas.width = win_w
+    canvas.height = win_h
+  }
+
+  init();
+
+  function color (defaultColor, colorChange) {    
+    /** 使用 rgb() 做顏色的變化
+     rgb 要像彩虹般由紅橙黃...到紫，的規則變化如下：
+     (255,0,0) => (255,255,0) => 
+     (0,255,0) => (0,255,255) => 
+     (0,0,255) => (255,0,255) => 
+     (255,0,0) 
+     用陣列將rgb顏色帶入，外層 colorIdx 記住目前改變的 id
+     step 1 : 將目前的下一個 id(nextIdx) 由 0 => 255
+     step 2 : 將目前 id 由 255 => 0
+     此為一個循環
+    */
+    let idx = colorIdx 
+    let len = defaultColor.length   
+    let nextIdx = idx === len - 1 ? 0 : idx + 1
+    
+    // 處理 nextId 0 => 255 的變化    
+    defaultColor[nextIdx] = defaultColor[nextIdx] >= 255 - colorChange 
+                            ? 255
+                            : defaultColor[nextIdx] + colorChange
+
+    // 處理 目前 id 255 => 0 的變化
+    if (defaultColor[nextIdx] === 255) {
+      if (defaultColor[idx] <= colorChange) {
+        defaultColor[idx] = 0        
+        
+        // 此為一個循環的結束，所以 colorIdx 要加 1 或回到初始的 0
+        colorIdx = colorIdx === len - 1 ? 0 : colorIdx + 1      
+      } else {
+        defaultColor[idx] -= colorChange
+      }
+    }    
+
+    return `rgb(${defaultColor[0]},${defaultColor[1]},${defaultColor[2]})`
+  }
+
+  canvas.addEventListener('mousemove', function(e) {
+    if (isDown) {      
+      console.log('down and move')            
+      let x = e.clientX
+      let y = e.clientY      
+      radius += radiusPlus   
+
+      if (radius >= bigest) {
+        radiusPlus = radiusPlus * -1
+      } else if (radius < 2) {
+        radiusPlus = radiusPlus * -1
+      }
+
+      let rgb = color(defaultColor, colorChange)
+      console.log(rgb)
+      ctx.beginPath()
+      ctx.arc(x, y, radius, 0, 2*Math.PI)
+      ctx.fillStyle = rgb
+      ctx.fill()
+    }
+  })
+
+  canvas.addEventListener('mousedown', function(e) {
+    isDown = true
+  })
+
+  canvas.addEventListener('click', function(e) {
+    isDown = false
+  })
 </script>
 
+<!-- mousedown 時，就會觸發事件。
+     click 則是滑鼠放開之後，才會觸發 -->
+
+<!--
+ctx.fillRect(25, 25, 100, 100)  // 畫出一個填滿的矩形
+ctx.clearRect(45, 45, 60, 60)   // 清除指定矩形區域的內容，使其變為全透明
+ctx.strokeRect(50, 50, 50, 50)  // 畫出一個矩形邊框
+
+ctx.beginPath()
+ctx.moveTo(175, 150)
+ctx.lineTo(200, 175)
+ctx.lineTo(200, 125)
+ctx.fill() // 呼叫 fill 時，任何開放式的圖形都會自動閉合，而 stroke 並非如此
+-->
 <style>
   html, body {
     margin:0;
   }
+  #draw {
+    position: absolute;   
+  }
 </style>
 
 </body>