diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..2275b43
Binary files /dev/null and b/.DS_Store differ
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-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 04e974b..261707b 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,38 @@
   </div>
 
   <script>
-
+    const panels = document.querySelector('.panels');    
+    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')
+        
+      } else if (e.target.nodeName === "DIV") {
+        DIV = e.target
+        isOpen = Array.prototype.slice.call(e.target.classList).includes('open')              
+      }
+
+      // 針對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>
 
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886..3c44c21 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,7 +15,99 @@
     </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 = 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>
+          <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>
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>