diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index c771dea..66f0dc0 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,6 +58,23 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
   <script>
+    function playSound(event) {
+      const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
+      const keyBox = document.querySelector(`div[data-key="${event.keyCode}"]`);
+      if(!audio) return;
+      keyBox.classList.add('playing');
+      audio.currentTime = 0;
+      audio.play();
+    }
+
+    function removeTransition(event) {
+      if (event.propertyName !== 'transform') return; //css里写了过渡transform scale
+      event.target.classList.remove('playing');
+    }
+
+    const keys = Array.from(document.querySelectorAll('.key')); //Array.from - 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
+    keys.forEach(key => key.addEventListener('transitionend',removeTransition)); //transition end
+    window.addEventListener('keydown',playSound);
 
   </script>
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384..15e9c9c 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,13 +61,111 @@
       background:black;
       position: absolute;
       top:50%;
+      right: 50%; /*as the length of each pointer are different, need to set this style to let thier end of the right side in same position*/
+      transform: rotate(90deg); /*pointers start horizontally -> vertically */
+      transform-origin: 100%; /* set rotate center to the right end of pointers */
+      
+      /*for the transform of the first loading*/
+      transition-timing-function: cubic-bezier(0.9, 0.54, 0.26, 1.68); /*specify the speed of the switching effect */
+    }
+
+    .clock-face:after {
+        width: 1em;
+        height: 1em;
+        left: 50%;
+        top: 50%;
+        position: absolute;
+        display: block;
+        content: '';
+        background-color: black;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .hour-hand {
+      width: 40%;
+      border-bottom-left-radius: .5rem;
+      border-top-left-radius: .5rem;
+      transition: all 3s; 
+    }
+
+    .min-hand {
+      width: 45%;
+      height: 4px;
+      transition: all 0.1s;
+    }
+
+    .second-hand {
+      height: 2px;
+      border-bottom-left-radius: 100%;
+      border-top-left-radius: 100%;
+      background-color: red;
+      transition: all .05s cubic-bezier(0.9, 0.54, 0.26, 1.68); /* transition time should be set ahead of timing function */
     }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const minHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
+
+    function setDate() {
+      const now = new Date();
+      const second = now.getSeconds();
+      const secondDegree = ((second / 60)*360)+90; /* as pointer start at rotate(90deg) */
+      
+      const min = now.getMinutes();
+      const minDegree = ((min / 60) * 360) + 90;
+     
+      const hour = now.getHours();
+      const hourDegree = (hour / 12) * 360 + (min / 12 / 60) * 360 + 90; /* make hour hand move slowly over time */
+     
+      // Way1 to solve pointer rotates counterclockwise and then clockwise when it at 90deg
+      if (secondDegree === 90) secondHand.style.transition = 'all 0s';
+      else secondHand.style.transition = 'all 0.05s cubic-bezier(0.9, 0.54, 0.26, 1.68)';
+      
+      if (minDegree === 90) minHand.style.transition = 'all 0s';
+      else minHand.style.transition = 'all 0.1s cubic-bezier(0.9, 0.54, 0.26, 1.68)';
+
+      secondHand.style.transform = `rotate(${secondDegree}deg)`;
+      minHand.style.transform = `rotate(${minDegree}deg)`;
+      hourHand.style.transform = `rotate(${hourDegree}deg)`;
+    }
+
+    setInterval(setDate, 1000);
+  </script>
+
+  <script>
+    // Way2 to solve pointer rotates counterclockwise and then clockwise when it at 90deg
+    // only use Date() at the beginning, and then calculate degree directly
 
+    let secondDegree = 0;
+    let minDegree = 0;
+    let hourDegree = 0;
 
+    function initDate() {
+      const date = new Date();
+      const second = date.getSeconds();
+      secondDegree = 90 + (second / 60) * 360;
+      const min = date.getMinutes();
+      minDegree = 90 + (min / 60) * 360 + ((second / 60) / 60) * 360;
+      const hour = date.getHours();
+      hourDegree = 90 + (hour / 12) * 360 + ((min / 60) / 12) * 360 + (((second / 60) / 60) / 12) * 360;
+    }
+
+    function updateDate() {
+      secondDegree += ( 1 / 60 ) * 360;
+      minDegree += ((1 / 60) / 60) * 360;
+      hourDegree += ((1 / 60) / 60 / 12) * 360;
+
+      secondHand.style.transform = `rotate(${secondDegree}deg)`;
+      minHand.style.transform = `rotate(${minDegree}deg)`;
+      hourHand.style.transform = `rotate(${hourDegree}deg)`;
+
+    }
+    // initDate()
+    // setInterval(updateDate, 1000);
   </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607..406f088 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,10 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --spacing: 10px;
+      --blur: 10px;
+      --base: #ffc600;
+    }
+
+    img {
+      padding: var(--spacing);
+      filter: blur(var(--blur));
+      background: var(--base);
+    }
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
+    .hl {
+      color: var(--base);
+    }
 
     body {
       text-align: center;
@@ -48,6 +59,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+
+    function updateStyle() {
+      const suffix = this.dataset.sizing || ''; // color has no px suffix
+      document.documentElement.style.setProperty(`--${this.name}`,`${this.value}`+suffix); // CSSStyleDeclaration setProperty() 
+    }
+
+    inputs.forEach( input => input.addEventListener('change', updateStyle));
+    inputs.forEach( input => input.addEventListener('mousemove', updateStyle));
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce..19cab10 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,28 +33,67 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
+    console.log("List of inventors who were born in the 1500's: ");
+    console.table(fifteen);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const names = inventors.map(inventor => (inventor.first + ' ' + inventor.last));
+    // const names = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+    console.log("Array of inventors' fullnames: ");
+    console.log(names);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const birthadteSort = inventors.sort((a,b) => (a.year > b.year) ? 1 : -1); // order: -1 front of, 1 back of
+    console.log("List sorted by birthdate, oldest to youngest: ");
+    console.table(birthadteSort);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const totalYear = inventors.reduce((total, inventor) => {
+      return total + (inventor.passed - inventor.year);
+    },0);
+    console.log("Years of all the inventors live: ");
+    console.log(totalYear);
 
     // 5. Sort the inventors by years lived
+    const ageSort = inventors.sort((a,b) => {
+      const last = a.passed - a.year;
+      const next = b.passed - b.year;
+     return (next < last) ? -1 : 1; // next < last, -1 means put a front of b, a is older
+    });
+    console.log("List sorted by years lived, long to short: ");
+    console.table(ageSort);
 
     // 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 category = document.querySelector('.mw-category');
+    // const links = Array.from(category.querySelectorAll('a'));
+    // const de = links.map(link => link.textContent).filter(name => name.includes('de'));
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const sortLastName = people.sort((a,b) => {
+      return (a.split(', ')[1] > b.split(', ')[1] ? 1 : -1);
+    })
+    console.table(sortLastName);
 
     // 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 count = data.reduce((obj, item) => {
+      // console.log('obj:' + obj);
+      // console.log('item:' + item);
+      // console.log('obj-item: '+ obj[item]);
+      if(!obj[item]) {
+        obj[item] = 0;
+      }
+      obj[item]++;  // e.g.: obj{ 'car': 1 }
+      return obj;
+    },{}); // init obj = {}
+    console.log(count);
 
   </script>
 </body>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index 04e974b..b454eb2 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,8 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+
+      display: flex;
     }
 
     .panel {
@@ -41,6 +43,12 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -53,7 +61,41 @@
     .panel > * {
       margin:0;
       width: 100%;
-      transition:transform 0.5s;
+      /*text transform (origin)*/
+      /* transition:transform 0.5s; */
+
+      /* optimise: delay text transition */
+      transition: transform 0.5s 0.7s;
+
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+
+
+    /* .panel.open-actived > *:first-child {
+		  transform: translateY(0);
+	  }
+    .panel.open-actived > *:last-child {
+		  transform: translateY(0);
+	  } */
+
+    /*optimise: .open-actived -> .open, use only one eventListener*/
+    .panel.open > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel.open > *:last-child {
+      transform: translateY(0);
     }
 
     .panel p {
@@ -67,6 +109,8 @@
     }
 
     .panel.open {
+      flex: 5;
+
       font-size:40px;
     }
 
@@ -107,7 +151,24 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
+
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
+
+    // function toggleText(e) {
+    //   // console.log(e.propertyName);
+    //   if (e.propertyName.includes('flex')){
+    //     this.classList.toggle('open-actived');
+    //   }
+    // }
+
+    // panels.forEach(panel => panel.addEventListener('click',toggleOpen));
+    // panels.forEach(panel => panel.addEventListener('transitionend', toggleText)); // text transform progress after box opened
 
+    // optimise: use one eventlinstener
+    panels.forEach(panel => panel.addEventListener('click',toggleOpen,false));
   </script>
 
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886..6f3d688 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,46 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities = [];
+fetch(endpoint)
+  .then(blob => blob.json())
+  .then(data => cities.push(...data)); // Spread syntax
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    const regex = new RegExp(wordToMatch,'gi'); // gi-global, ignore case
+    return place.city.match(regex) || place.state.match(regex);
+  });
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function displayMatches() {
+  console.log(cities);
+  const matchArray = findMatches(this.value, cities);
+  const html = matchArray.map(place => {
+    const regex = new RegExp(this.value,'gi'); 
+    // to make the search word highlighted
+    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="population">${numberWithCommas(place.population)}</span>  
+      </li>
+    `
+  }).join('');  //map return new array, then use join
+  suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches); 
+searchInput.addEventListener('keyup', displayMatches);
+
 </script>
   </body>
 </html>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31..233f7d6 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?
+    const isAdult = people.some(person => {
+      const curYear = new Date().getFullYear();
+      return curYear - person.year >= 19;
+    });
+    console.log(isAdult);
+    //console.log({isAdult});  // => {isAdult: true}
+
     // Array.prototype.every() // is everyone 19?
+    const isAllAdults = people.every(person => {
+      new Date().getFullYear() - person.year >= 19;
+    })
+    console.log(isAllAdults);
 
     // 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( comment => comment.id == 823423 );
+    console.log(comment);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const commentIndex = comments.findIndex(comment => comment.id == 823423);
+    const newComments = [...comments.slice(0,commentIndex), ...comments.slice(commentIndex+1)];
+    console.table(newComments);
 
   </script>
 </body>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148d..f8e65d5 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,57 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+  const canvas = document.querySelector('#draw');
+  const ctx = canvas.getContext('2d');
+
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let hue = 0;
+  let direction = true;
+
+  ctx.lineWidth = 90;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+	ctx.strokeStyle = "#BADA55";
+	// ctx.fillStyle = "#f00";
+
+  function draw(e) {
+    if(!isDrawing) return;
+    console.log(e);
+    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+    ctx.beginPath(); 
+    ctx.moveTo(lastX,lastY); // start from 
+    ctx.lineTo(e.offsetX,e.offsetY); // go to
+    ctx.stroke();
+    [lastX,lastY] = [e.offsetX, e.offsetY]; // update position
+
+    hue++;
+    if(hue >= 360){
+      hue = 0;
+    }
+
+    if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1){
+      direction = !direction;
+    }
+
+    if(direction) {
+      ctx.lineWidth++;
+    } else {
+      ctx.lineWidth--;
+    }
+  }
+  canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true;
+    [lastX,lastY] = [e.offsetX, e.offsetY]; // get the current postion as start point when mousedown to draw
+  })
+
+  canvas.addEventListener('mousemove',draw);
+  canvas.addEventListener('mouseup',() => isDrawing = false);
+  canvas.addEventListener('mouseout',() => isDrawing = false);
 </script>
 
 <style>
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd..7cf1f7f 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,29 +18,70 @@
     }
 
     // Regular
+    console.log('hello world');
 
     // Interpolated
+    console.log('I am string %s', 'log');
+    console.log('I am int %d', '1.23');
+    console.log('I am object %o' ,{apple: '1kg'});
 
     // Styled
+    console.log('%c This text have the styled that set behind',"color: #00fdff; font-size: 2em;");
 
     // warning!
+    console.warn('This is warnning log');
 
     // Error :|
+    console.error('This is error log');
 
     // Info
+    console.info('This is info log');
 
     // Testing
+    console.assert(1===1,'only show this message when return false');
+    console.assert(1===0,'only show this message when return false 2');
+
+    const p = document.querySelector('p');
+    console.assert(p.innerHTML.match('T'),'can not find this alphabet');
 
     // clearing
+    // console.clear();
 
     // Viewing DOM Elements
+    console.log(p); // html tag
+    console.dir(p); // list of attributes
 
     // Grouping together
+    dogs.forEach(dog => {
+      console.group();
+      // console.groupCollapsed(); 
+      console.log(`${dog.name}`);
+      console.log(`${dog.age}`);
+      console.log(`${dog.name} is ${dog.age} years old`);
+      console.groupEnd();
+    });
+
+    console.table(dogs);
+    console.table(dogs, ["age"]);
 
     // counting
+    console.count("sheep");
+    console.count("sheep");
+    console.count("fish");
+    console.count("sheep");
+    console.count("sheep");
+    console.count("fish");
+    console.count("fish");
+    console.count("sheep");
 
     // timing
-
+    console.time('fetch my data');
+    fetch("https://api.github.com/users/lchungy90")
+      .then(data => data.json())
+      .then(data => {
+        console.timeEnd('fetch my data');
+        console.log(data);
+      });
   </script>
 </body>
 </html>
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index eb7ed31..85ef51e 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,33 @@
   </div>
 
 <script>
+  const boxes = document.querySelectorAll('.inbox input[type="checkbox"]');
+  const boxArr = Array.from(boxes);
+
+  let lastChecked;
+  let onOff = false;
+
+  function handleCheck(e){
+    if (!lastChecked) lastChecked = this;
+    onOff = lastChecked.checked ? true : false;
+
+    if(e.shiftKey){
+      let start = boxArr.indexOf(this); // if press shift key and check a box, note this box as start box
+
+      // as the process of selecting boxes at same time is: click a box -> press shift key -> click another box
+      // the lastChecked is the box which will be selected in first step  [lastChecked  -  start]
+      let end = boxArr.indexOf(lastChecked); 
+
+      // slice(start,end(not include))
+      boxArr.slice(Math.min(start,end),Math.max(start,end)+1).forEach(input => input.checked = onOff);
+    }
+    lastChecked = this;
+
+
+  }
+
+  boxes.forEach(box => box.addEventListener('click',handleCheck));
+
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index dee25cd..2bf8789 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -22,6 +22,7 @@
      </div>
    </div>
 
-  <script src="scripts-FINISHED.js"></script>
+  <!-- <script src="scripts-FINISHED.js"></script> -->
+  <script src="scripts.js"></script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29..bb0f8f2 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,52 @@
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+
+function tooglePlay() {
+  const method = video.paused ? 'play' : 'pause';
+  video[method]();
+}
+
+function updateButton() {
+  const icon = this.paused ? '►' : '❚ ❚';
+  toggle.textContent = icon;
+}
+
+function skip() {
+  video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function rangeUpdate() {
+  video[this.name] = this.value;
+}
+
+function handleProgress() {
+  const percent = (video.currentTime / video.duration) * 100;
+  progressBar.style.flexBasis = `${percent}%`;
+}
+
+function scrub(e) {
+  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+  video.currentTime = scrubTime;
+}
+
+
+video.addEventListener('click', tooglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+
+toggle.addEventListener('click', tooglePlay);
+skipButtons.forEach(btn => btn.addEventListener('click',skip));
+ranges.forEach(range => range.addEventListener('change',rangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove',rangeUpdate));
+
+let mousedown = false;
+progress.addEventListener('click',scrub);
+progress.addEventListener('mousemove',(e)=> mousedown && scrub(e));
+progress.addEventListener('mousedown', ()=> mousedown = true);
+progress.addEventListener('mouseup',()=> mousedown = false);
\ No newline at end of file
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786..f92c38e 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -3,10 +3,23 @@
 <head>
   <meta charset="UTF-8">
   <title>Key Detection</title>
+  <p>try to press the secretCode</p>
   <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
 </head>
 <body>
 <script>
+  const pressed = [];
+  const secretCode = 'helloworld';
+  window.addEventListener('keyup', (e)=>{
+    console.log(e.key);
+    pressed.push(e.key);
+    //splice(start-index(included),deletecount); 
+    pressed.splice(-secretCode.length-1, pressed.length - secretCode.length);
+    if(pressed.join('').includes(secretCode)) {
+      cornify_add();
+    }
+    console.log(pressed);
+  })
 </script>
 </body>
 </html>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8f..8e9fb52 100755
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -58,6 +58,26 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const slideImages = document.querySelectorAll('.slide-in');
+    function checkSlide(e) {
+      slideImages.forEach(img => {
+        const slideInAt = (window.scrollY + window.innerHeight) - img.height /2;
+        const imgBottom = img.offsetTop + img.height;
+
+        // scroll halfway through the image
+        const isHalfShow = slideInAt > img.offsetTop;
+        // the image not scroll out of the window yet
+        const isNotScrollPast = window.scrollY < imgBottom;
+        
+        if(isHalfShow && isNotScrollPast) {
+          img.classList.add('active');
+        }else{
+          img.classList.remove('active');
+        }
+      })
+    }
+
+    window.addEventListener('scroll',debounce(checkSlide));
   </script>
 
   <style>
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index dc4eac4..f7995ee 100755
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -8,13 +8,28 @@
 
   <script>
     // 从 String、Number、Boolean 类型的值开始：
+    let age = 100;
+    let age2 = age;
+    console.log(age, age2);
+    age2 = 200;
+    console.log(age, age2);
+
+    let name = 'ruby';
+    let name2 = name;
+    console.log(name, name2);
+    name = 'tom';
+    console.log(name, name2);
 
     // 首先我们有一个数组
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // 现在我们想要复制它
+    const team = players;
+    console.log(players, team);
 
     // 也许你觉得可以直接这样修改复制后的数组:
+    team[2] = 'Lex';
+    console.log(players, team);
 
     // 但我们修改这个数组的时候会发生什么呢？
 
@@ -25,27 +40,70 @@
     // 为什么？因为 team 只是这个数组的引用，并不是它的复制。team 和 players 指向的是同一个数组。
 
     // 所以如何解决这个问题？下面来进行真正的复制吧。
+    const team2 = players.slice();
 
     // one day
 
     // 或者创建一个新数组，然后用 concat 方法来获取它
+    const team3 = [].concat(players);
 
     // 再或者用 ES6 里面的扩展语法
+    const team4 = [...players];
+    const team5 = Array.from(players);
+    team2[2]='hello';
+    team3[3]='hello';
+    team4[4]='hello';
+    team5[4]='hello';
+    console.log(team2, team3, team4, team5);
 
     // 现在再修改 team5，原数组不会变了
 
     // 对 Object 类型的数据来说也是一样的，我们用一个 person 例子来说明
 
-    // 现在又一个 Object 对象
+    // 现在有一个 Object 对象
+    const person = {
+      name: 'Alex',
+      age: '80'
+    };
 
     // 然后以为这样可以复制它:
 
     // 到底要怎样才能真正得到它的复制版呢？
+    const person2 = Object.assign({},person,{age:18, number:10});
+    console.log(person,person2);
 
     // 我们满怀期望的希望扩展语法对它也会生效
+    const person3 = {...person};
+    person3['phone'] = '159x';
+    console.log(person, person3);
+
+    const cop = {
+      name: 'A',
+      time:{
+        workday: '9-11',
+        weekend: '10-12'
+      }
+    };
+    const cop2 = {...cop};
+    console.log(cop,cop2);
+    cop2['time']['workday']='8-10';
+    cop2['name'] = 'B'; //只有第一层有效
+    console.log(cop, cop2);
 
     // 需要注意的是：这里的例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但你使用之前需要多考虑一下。
-
+    const alex = {
+      name: 'Alex',
+      age: 20,
+      social: {
+        twitter: '@alex',
+        facebook: 'alex.fb'
+      }
+    };
+    const alex2 = Object.assign({},alex);
+    const alex3 = JSON.parse(JSON.stringify(alex));
+    alex2['social']['twitter'] = '@new';
+    alex3['social']['facebook'] = 'new.fb';
+    console.log(alex,alex2,alex3);
   </script>
 
 </body>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d..3eb86df 100755
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -22,14 +22,81 @@ <h2>LOCAL TAPAS</h2>
     <form class="add-items">
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
+      <input class="check-all" type="button" value="Check All">
+      <input class="uncheck-all" type="button" value="Uncheck All">
+      <input class="delete-all" type="reset" value="Delete All">
     </form>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  let items = JSON.parse(localStorage.getItem('items')) || [];
 
+  function addItem(e) {
+    e.preventDefault();
+    const text =  this.querySelector('[name=item]').value;
+    const item = {
+      text: text,
+      done: false
+    }
+    items.push(item);
+    this.reset();
+    populateList(items,itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+    console.log('add ' + text);
+  }
+
+  function populateList(dishes=[],dishList) {
+    dishList.innerHTML = dishes.map((dish, i) => {
+      return `
+        <li>
+            <input type="checkbox" data-index=${i} id="item${i}" ${dish.done ? 'checked' : ''}>
+            <label for="item${i}">${dish.text}</label>
+        </li>
+      `;
+    }).join('');
+  }
+
+  function toggleDone(e) {
+    if(!e.target.matches('inputs')) return;
+    const el = e.target;
+    const index = el.dataset.index;
+    items[index].done = !items[index].done;
+    populateList(items,itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+    console.log('toggle ' + index);
+  }
+
+  addItems.addEventListener('submit',addItem);
+  itemsList.addEventListener('click',toggleDone);
+  populateList(items, itemsList);
+
+  const checkAllBtn = document.querySelector('.check-all');
+  const unCheckAllBtn = document.querySelector('.uncheck-all');
+  const deleteAllBtn = document.querySelector('.delete-all');
+  
+  checkAllBtn.addEventListener('click', () => {
+    items.forEach(item => {
+      item.done = true;
+    });
+    populateList(items,itemsList);
+    localStorage.setItem('items',JSON.stringify(items));
+  });
+
+  unCheckAllBtn.addEventListener('click', () => {
+    items.forEach(item => {
+      item.done = false;
+    });
+    populateList(items,itemsList);
+    localStorage.setItem('items',JSON.stringify(items));
+  });
+
+  deleteAllBtn.addEventListener('click', () => {
+    items = []
+    populateList(items,itemsList);
+    localStorage.setItem('items',JSON.stringify(items));
+  });
 </script>
 
 
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 543cb51..d4cf0c3 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -35,6 +35,30 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const factor = 0.4;
+
+  function shadowMove(e) {
+    const { offsetWidth: width, offsetHeight: height } = hero;
+    let { offsetX: x, offsetY: y } = e;
+
+    if (this !== e.target) {
+      x = x + e.target.offsetLeft;
+      y = y + e.target.offsetTop;
+    }
+   
+    const xWalk = parseInt((x-width/2)*factor);
+    const yWalk = parseInt((y-height/2)*factor);
+    text.style.textShadow = `
+      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
+      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
+      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
+      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
+    `;
+  }
+
+  hero.addEventListener('mousemove', shadowMove);
 </script>
 </body>
 </html>
diff --git a/17 - Sort Without Articles/index-start.html b/17 - Sort Without Articles/index-start.html
index 9bbd250..4ae529b 100644
--- a/17 - Sort Without Articles/index-start.html	
+++ b/17 - Sort Without Articles/index-start.html	
@@ -46,7 +46,19 @@
 <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 delPrefix(item){
+  return item.replace(/^(The|A|An)\s{1}/,'');
+}
 
+function displayArray(arr){
+  document.getElementById('bands').innerHTML = '<li>'+arr.join('</li><li>')+'</li>';
+}
+
+bands.sort(function(a,b){
+  return delPrefix(a) > delPrefix(b) ? 1 : -1;
+});
+
+displayArray(bands);
 </script>
 
 </body>
diff --git a/18 - AddingUpTimesWithReduce/index-start.html b/18 - AddingUpTimesWithReduce/index-start.html
index abdf4c9..18f4c55 100644
--- a/18 - AddingUpTimesWithReduce/index-start.html	
+++ b/18 - AddingUpTimesWithReduce/index-start.html	
@@ -5,6 +5,7 @@
   <title>Videos</title>
 </head>
 <body>
+  <p>total time：<span id="totaltime"></span></p>
   <ul class="videos">
     <li data-time="5:43">
       Video 1
@@ -182,6 +183,26 @@
     </li>
   </ul>
 <script>
+function getTime(){
+  let times = [];
+  let lists = document.getElementsByTagName('li');
+  for(let i=0; i<lists.length; i++){
+    let itemTime = lists[i].dataset['time'].split(':');
+    times.push(parseInt(itemTime[0],10)*60 + parseInt(itemTime[1],10));
+  }
+  return times.reduce(function(a,b){return a+b},0);
+}
+
+function formatTime(seconds){
+  let sec = seconds % 60;
+  let hour = Math.floor(seconds/3600);
+  let min = (seconds - 3600*hour - sec)/60;
+  document.getElementById('totaltime').innerHTML = `${hour}:${min}:${sec}`;
+}
+
+let totalTime = getTime();
+formatTime(totalTime);
+
 </script>
 </body>
 </html>
diff --git a/19 - Webcam Fun/index-start.html b/19 - Webcam Fun/index-start.html
index 5909522..6c014a1 100644
--- a/19 - Webcam Fun/index-start.html	
+++ b/19 - Webcam Fun/index-start.html	
@@ -10,7 +10,8 @@
   <div class="photobooth">
     <div class="controls">
       <button onClick="takePhoto()">Take Photo</button>
-<!--       <div class="rgb">
+      <button onClick="savePhoto()">Save Photo</button>
+      <div class="rgb">
         <label for="rmin">Red Min:</label>
         <input type="range" min=0 max=255 name="rmin">
         <label for="rmax">Red Max:</label>
@@ -29,17 +30,21 @@
         <input type="range" min=0 max=255 name="bmin">
         <label for="bmax">Blue Max:</label>
         <input type="range" min=0 max=255 name="bmax">
-      </div> -->
+      </div>
     </div>
 
-    <canvas class="photo"></canvas>
+    <canvas class="photo" height="200" width="300"></canvas>
     <video class="player"></video>
-    <div class="strip"></div>
+    <div class="strip">
+      <a href="">
+        <img alt="unsaveImg" id='myimg'>
+      </a>
+    </div>
   </div>
 
   <audio class="snap" src="http://wesbos.com/demos/photobooth/snap.mp3" hidden></audio>
 
-  <script src="script.js"></script>
+  <script src="index.js"></script>
 
 </body>
 </html>
diff --git a/19 - Webcam Fun/index.js b/19 - Webcam Fun/index.js
new file mode 100644
index 0000000..4400299
--- /dev/null
+++ b/19 - Webcam Fun/index.js	
@@ -0,0 +1,107 @@
+window.onload = function() {
+  canvas = document.querySelector('canvas');
+  video = document.querySelector('video');
+  ctx = canvas.getContext('2d');
+  img = document.querySelector('#myimg');
+  slider = document.querySelector('.rgb');
+  a = document.querySelector('a');
+  
+  filter = {
+      rmin: 0,
+      rmax: 255,
+      gmin: 0,
+      gmax: 255,
+      bmin: 0,
+      bmax: 255
+  }
+
+  
+  askWebcam();
+
+  slider.onchange = function(e) {
+      ctx.putImageData(origindata, 0, 0);
+      const target = e.target;
+      const startPos = {
+          'r': 0,
+          'g': 1,
+          'b': 2
+      }[target.name[0]];
+      var tempFilter = checkFilter(target.name, target.value);
+      const filterMin = tempFilter.min;
+      const filterMax = tempFilter.max;
+      var img = ctx.getImageData(0, 0, 300, 200);
+
+
+      var imgd = img.data;
+      for (var i = startPos, len = imgd.length; i < len; i += 4) {
+          if (imgd[i] < filterMin) {
+              imgd[i] = filterMin;
+          } else if (imgd[i] > filterMax) {
+              imgd[i] = filterMax;
+          }
+      }
+      ctx.putImageData(img, 0, 0);
+      img.src = canvas.toDataURL();
+  }
+
+}
+
+
+function takePhoto() {
+  ctx.drawImage(video, 0, 0, 300, 200);
+  origindata = ctx.getImageData(0, 0, 300, 200);
+}
+
+function savePhoto() {
+  img.src = canvas.toDataURL();
+  a.href = canvas.toDataURL();
+  a.setAttribute('download', 'handsome');
+}
+
+
+function askWebcam() {
+  navigator.getUserMedia = navigator.getUserMedia ||
+      navigator.webkitGetUserMedia ||
+      navigator.mozGetUserMedia;
+  if (navigator.getUserMedia) {
+      navigator.getUserMedia({
+          audio: false,
+          video: {
+              width: 300,
+              height: 200
+          }
+      }, function(stream) {
+          video.srcObject = stream;
+          video.onloadedmetadata = function(e) {
+              video.play();
+          }
+      }, function(err) {
+          console.log('Error occured:' + err.name);
+      });
+  } else {
+      console.log('this navigator doesn\'t support webcam!');
+  }
+}
+
+
+function checkFilter(name, value) {
+  var _min;
+  var _max;
+  var _antiname = {
+      'rmin': 'rmax',
+      'rmax': 'rmin',
+      'gmin': 'gmax',
+      'gmax': 'gmin',
+      'bmin': 'bmax',
+      'bmax': 'bmin'
+  }[name]
+  filter[name] = value;
+  //当下限值超过上限时，将两者对调
+  _min = Math.min(filter[name], filter[_antiname]);
+  _max = Math.max(filter[name], filter[_antiname]);
+  console.log(filter);
+  return {
+      min: _min,
+      max: _max
+  }
+}
\ No newline at end of file