diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..ecfbb3eafd 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,23 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  function playSound(e) {
+    const { keyCode } = e;
+    const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
+    if (!audio) return;
+    const key = document.querySelector(`.key[data-key="${keyCode}"]`);
+    audio.currentTime = 0;
+    audio.play();
+    key.classList.add('playing');
+  }
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return;
+    this.classList.remove('playing');
+  }
 
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  window.addEventListener('keydown', playSound);
 </script>
 
 
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 2712384201..2f4183797d 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -61,12 +61,48 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100% 50%;
+      transform: rotate(90deg);
+      transition: all 0.05 ease-out 0s;
     }
 
   </style>
 
   <script>
+    function getEl(selector) {
+      return document.querySelector(selector);
+    }
+    function timeToDegrees(time) {
+      return ((time / 60 * 360) + 90);
+    }
+    function rotate(el, degrees) {
+      el.style.transitionDuration = '0';
+      if (degrees) {
+        el.style.transitionDuration = '0.05';
+      }
+      return el.style.transform = `rotate(${degrees}deg)`;
+    }
+
+    const secondHand = getEl('.second-hand');
+    const minHand = getEl('.min-hand');
+    const hourHand = getEl('.hour-hand');
+
+    function setDate() {
+      const now = new Date();
+
+      const seconds = now.getSeconds();
+      const secondsDegrees = timeToDegrees(seconds);
+      const mins = now.getMinutes();
+      const minsDegrees = timeToDegrees(mins);
+      const hours = now.getHours();
+      const hoursDegrees = timeToDegrees(hours);
+
+      rotate(secondHand, secondsDegrees);
+      rotate(minHand, minsDegrees);
+      rotate(hourHand, hoursDegrees);
+    }
 
+    setInterval(setDate, 1000);
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..0cc0ab22c7 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,7 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #ffc600;
+      --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
     */
@@ -48,6 +62,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('input');
+
+    function handleUpdate () {
+      const sizing = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + sizing);
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..d71db39f92 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,28 +31,56 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteens = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+    console.table(fifteens);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const names = inventors.map(({ first, last }) => `${first} ${last}`);
+    console.log(names);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const sorted = inventors.sort((a, b) => a.year > b.year ? 1 : -1)
+    console.table(sorted);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const years = inventors.reduce((memo, item) => (
+      memo + (item.passed - item.year)
+    ), 0);
+    console.log(years);
 
     // 5. Sort the inventors by years lived
+    const oldest = inventors.sort((a, b) => (
+      (a.passed - a.year) < (b.passed - b.year) ? 1 : -1
+    ));
+    console.table(oldest)
 
     // 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 links = Array.from(document.querySelectorAll('.mw-category a'));
+    const de = links
+      .map(link => link.textContent)
+      .filter(name => name.includes('de'));
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const alphabetically = people.sort((a, b) => {
+      const [ aLast, aFirst ] = a.split(', ');
+      const [ bLast, bFirst ] = b.split(', ');
+      return aLast > bLast ? 1 : -1;
+    })
+    console.log(alphabetically);
 
     // 8. Reduce Exercise
     // Sum up the instances of each of these
     const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
+    const sum = data.reduce((memo, item) => {
+      memo[item] ? memo[item]++ : memo[item] = 1;
+      return memo;
+    }, {});
+    console.log(sum);
 
   </script>
 </body>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..7a09521f8a 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -41,6 +42,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
     }
 
 
@@ -54,6 +60,24 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+    .panel.open-active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
     }
 
     .panel p {
@@ -67,6 +91,7 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -107,6 +132,28 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
+
+    function closeOpen(panel) {
+      panel.classList.remove('open');
+    }
+
+    function toggleOpen() {
+      Array.from(panels)
+        .filter(panel => panel !== this)
+        .forEach(closeOpen);
+      this.classList.toggle('open');
+    }
+
+    function toggleActive(e) {
+      if (e.propertyName.includes('flex')) {
+        this.classList.toggle('open-active');
+      }
+    }
+
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+
 
   </script>
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..003d31fda0 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,8 +15,52 @@
     </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';
 
+  const cities = [];
+  fetch(endpoint)
+    .then(res => res.json())
+    .then(json => cities.push(...json));
+
+  function findMatches (wordToMatch, cities) {
+    const regex = new RegExp(wordToMatch, 'gi');
+    return cities.filter(place => (
+      place.city.match(regex) || place.state.match(regex)
+    ));
+  }
+
+  function numberWithCommas(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  }
+
+  function displayMatches () {
+    const matches = findMatches(this.value, cities);
+    if (!this.value) {
+      suggestions.innerHTML = `
+        <li>Filter for a city</li>
+        <li>or a state</li>
+      `;
+      return;
+    }
+    const regex = new RegExp(this.value, 'gi');
+    const html = matches.map(place => {
+      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('');
+    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 969566ff78..040d8f5917 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -27,14 +27,24 @@
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
     // Array.prototype.every() // is everyone 19 or older?
+    const year = (new Date()).getFullYear();
+    const some = people.some(human => ((year - human.year) >= 19));
+    console.log(some);
+    const every = people.every(human => ((year - human.year) >= 19));
+    console.log(every);
 
     // 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 commentByID = comments.find(comment => comment.id === 823423);
+    console.log(commentByID);
 
     // 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);
+    comments.splice(commentIndex, 1);
+    console.log(comments);
 
   </script>
 </body>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..419683b0ac 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,47 @@
 <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;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let hue = 0;
+  let lineWidth = 1;
+  let direction = true;
+
+  function draw (e) {
+    if (!isDrawing) {
+      lastX = e.offsetX;
+      lastY = e.offsetY;
+      return false;
+    }
+    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(e.offsetX, e.offsetY);
+    ctx.stroke();
+    lastX = e.offsetX;
+    lastY = e.offsetY;
+    hue++;
+    hue = (hue >= 360) ? 0 : hue;
+    direction = (lineWidth >= 100) || (lineWidth <= 0) ? !direction : direction;
+    direction ? lineWidth++ : lineWidth--;
+  }
+
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mousedown', (e) => {
+    lastX = e.offsetX;
+    lastY = e.offsetY;
+    isDrawing = true;
+  });
+  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 196fffd719..7f2fee7177 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,63 @@
     }
 
     // Regular
+    console.log('Yo!');
 
     // Interpolated
+    console.log('Yo, %s!', '💩');
 
     // Styled
+    console.log('%cYo, stylish %s!', 'color: green','💩');
 
     // warning!
+    console.warn('Warn!');
 
     // Error :|
+    console.error('Error!');
 
     // Info
+    console.info('Info!');
 
     // Testing
+    // fires only if wrong statement given
+    console.assert(1 === 2, 'Thats wrong!');
 
     // clearing
+    console.clear();
 
     // Viewing DOM Elements
+    const p = document.querySelector('p');
+    console.log(p);
+    console.dir(p);
 
     // Grouping together
+    console.clear();
+    dogs.forEach(dog => {
+      // console.group(dog.name);
+      // this will display group collapsed in console
+      console.groupCollapsed(dog.name);
+      console.log(`This is ${dog.name}`);
+      console.log(`${dog.name} is ${dog.age} old`);
+      console.groupEnd(dog.name);
+    });
 
     // counting
+    console.count('Yo!');
+    console.count('Yo!');
+    console.count('Yo!');
+    console.count('Yo!');
+    console.count('Yo!');
 
     // timing
+    console.time('Fetch to my github');
+    fetch('https://api.github.com/users/reaverart')
+      .then(res => res.json())
+      .then(json => {
+        console.timeEnd('Fetch to my github');
+        console.log(json);
+      });
+
+    console.table(dogs);
 
   </script>
 </body>
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index b6a1cc32ec..d911c62dea 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,25 @@
   </div>
 
 <script>
+  const checkboxes = Array.from(document.querySelectorAll('[type=checkbox]'));
+  let lastChecked;
+
+  function handleClick(e) {
+    if (e.shiftKey && this.checked && lastChecked) {
+      let inBetween = false;
+      checkboxes.forEach(checkbox => {
+        if (checkbox === this || checkbox === lastChecked) {
+          inBetween = !inBetween;
+        }
+        if (inBetween) {
+          checkbox.checked = true;
+        }
+      });
+    }
+    lastChecked = this;
+  }
+
+  checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleClick));
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 281a15eaa8..aed0f04b68 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -19,6 +19,7 @@
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
+       <button class="player__button fullscreen">[ ]</button>
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..988dbf0a18 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,57 @@
+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');
+const fullscreen = player.querySelector('.fullscreen');
+let isDragging = false;
+
+function togglePlay() {
+  return video.paused ? video.play() : video.pause();
+}
+
+function updateToggle() {
+  const icon = this.paused ? '►' : '❚ ❚';
+  return toggle.textContent = icon;
+}
+
+function skip() {
+  video.currentTime += parseFloat(this.dataset.skip, 10);
+}
+
+function handleRangeUpdate(e) {
+  video[this.name] = this.value;
+  console.log(this.name, this.value);
+}
+
+function handleProgress() {
+  const percent = (video.currentTime / video.duration) * 100;
+  return progressBar.style.flexBasis = `${percent}%`;
+}
+
+function scrub(e) {
+  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+  video.currentTime = scrubTime;
+}
+
+function toggleFullscreen() {
+  document.webkitIsFullScreen ? document.webkitExitFullscreen() : player.webkitRequestFullscreen()  
+}
+
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateToggle);
+video.addEventListener('pause', updateToggle);
+video.addEventListener('timeupdate', handleProgress);
+
+toggle.addEventListener('click', togglePlay);
+skipButtons.forEach(button => button.addEventListener('click', skip));
+ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => isDragging && scrub(e));
+progress.addEventListener('mousedown', () => isDragging = true);
+progress.addEventListener('mouseup', () => isDragging = false);
+progress.addEventListener('mouseout', () => isDragging = false);
+fullscreen.addEventListener('click', toggleFullscreen);
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..bbff138c6f 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,18 @@
 </head>
 <body>
 <script>
+  const secret = 'iddqd';
+  const sequence = [];
+  function keySequence(e) {
+    sequence.push(e.key);
+    if (sequence.length > secret.length) {
+      sequence.shift()
+    }
+    if (sequence.join('') === secret) {
+      cornify_add()
+    }
+  }
+  window.addEventListener('keyup', keySequence)
 </script>
 </body>
 </html>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..28a7c3cb0b 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -58,6 +58,25 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      const windowBottom = window.scrollY + window.innerHeight;
+      sliderImages.forEach((sliderImage, i) => {
+        const imageMiddle = sliderImage.offsetTop + sliderImage.height / 2;
+        const imageBottom = sliderImage.offsetTop + sliderImage.height;
+        const showOnHalf = windowBottom > imageMiddle;
+        const notOverScrolled = window.scrollY < imageBottom;
+        if (showOnHalf && notOverScrolled) {
+          sliderImage.classList.add('active');
+        } else {
+          sliderImage.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 4da1bac2ea..e512588baf 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -13,6 +13,13 @@
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+    // thats reference
+    const refPlayers = players;
+    // thats copies
+    const copyPlayers1 = players.slice();
+    const copyPlayers2 = [].concat(players);
+    const copyPlayers3 = [...players];
+    const copyPlayers4 = Array.from(players);
 
     // You might think we can just do something like this:
 
@@ -37,8 +44,17 @@
     // The same thing goes for objects, let's say we have a person object
 
     // with Objects
-
+    const person = {
+      name: 'Artur',
+    };
     // and think we make a copy:
+    // thats reference
+    const refPerson = person;
+    // shallow copy
+    const copyPerson1 = Object.assign({}, person);
+    const copyPerson2 = {...person};
+    // trick to get deep copy
+    const copyPerson3 = JSON.parse(JSON.strinify(person));
 
     // how do we take a copy instead?
 
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..4a00c85325 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -22,17 +22,72 @@ <h2>LOCAL TAPAS</h2>
     <form class="add-items">
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
+      <div>
+        <input type="button" value="Check all" data-check="true">
+        <input type="button" value="Uncheck all" data-check="">
+      </div>
     </form>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const checkButtons = addItems.querySelectorAll('[data-check]');
+
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+
+  function addItem(e) {
+    console.log('yo!');
+    e.preventDefault();
+    const text = (this.querySelector('[name=item]')).value;
+
+    const item = {
+      text,
+      done: false,
+    };
+
+    items.push(item);
+    populateList(items, itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+
+    this.reset();
+  }
+
+  function populateList(plates = [], platesList) {
+    platesList.innerHTML = plates.map((plate, i) => (
+      `
+        <li>
+          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? "checked" : ""}>
+          <label for="item${i}">${plate.text}</label>
+        </li>
+      `
+    )).join('')
+  }
+
+  function toggleDone(e) {
+    if (!e.target.matches('input')) return false;
+    const el = e.target;
+    const index = el.dataset.index;
+    items[index].done = !items[index].done;
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  function toggleDoneAll(e) {
+    const check = Boolean(this.dataset.check);
+    items.forEach(item => item.done = check);
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+  checkButtons.forEach(button => button.addEventListener('click', toggleDoneAll));
+
+  populateList(items, itemsList);
 
 </script>
 
 
 </body>
 </html>
-
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..fdd85d8ae2 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,33 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const walk = 100;
+
+  function shadow(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 = -Math.round((x / width * walk) - (walk / 2));
+    const yWalk = -Math.round((y / height * walk) - (walk / 2));
+
+    text.style.textShadow = `${xWalk}px ${yWalk}px 0 black`;
+  }
+
+  hero.addEventListener('mousemove', shadow);
 </script>
 </body>
 </html>
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..c913761bb1 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -43,8 +43,29 @@
   <ul id="bands"></ul>
 
 <script>
-const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
+  const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
 
+  const articles = ['the', 'a', 'an'];
+
+  const list = document.querySelector('#bands');
+
+  function cleanName(bandName) {
+    // return bandName.replace(/^(a |the |an )/i, '').trim();
+    const [article, ...rest] = bandName.split(' ');
+    let cleanName = rest.join(' ');
+    if (!articles.includes(article.toLowerCase())) {
+      return bandName;
+    }
+    return cleanName;
+  }
+
+  sortedBands = bands.sort((a, b) => {
+    const cleanA = cleanName(a);
+    const cleanB = cleanName(b);
+    return (cleanA > cleanB ? 1 : -1);
+  });
+
+  list.innerHTML = sortedBands.map(band => `<li>${band}</li>`).join('');
 
 </script>
 
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index abdf4c91af..d389805db0 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,24 @@
     </li>
   </ul>
 <script>
+  const videos = Array.from(document.querySelectorAll('[data-time]'));
+
+  const seconds = videos
+    .map(videoNode => videoNode.dataset.time)
+    .map(timeString => {
+      const [mins, secs] = timeString.split(':').map(parseFloat);
+      return mins * 60 + secs;
+    })
+    .reduce((total, seconds) => total + seconds);
+
+  let secondsLeft = seconds;
+  const hours = Math.floor(secondsLeft / 3600);
+  // secondsLeft = secondsLeft - (hours * 3600);
+  secondsLeft = secondsLeft % 3600;
+  const mins = Math.floor(secondsLeft / 60);
+  // const secs = secondsLeft - (mins * 60);
+  const secs = secondsLeft % 60;
+  console.log(hours, mins, secs);
 </script>
 </body>
 </html>