diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..c2de015606 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,24 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  function playSound(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
+    if (!audio) return;
 
+    key.classList.add('playing');
+    audio.currentTime = 0;
+    audio.play();
+  }
+
+  function removeTransition() {
+    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 + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..94c1eee67b 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -53,6 +53,7 @@
       width: 100%;
       height: 100%;
       transform: translateY(-3px); /* account for the height of the clock hands */
+
     }
 
     .hand {
@@ -61,13 +62,36 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.56, 2.74, 0.58, 1);
     }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const minuteHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
+
+    function setDate() {
+      const now = new Date();
+
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
 
+      const minutes = now.getMinutes();
+      const minutesDegrees = ((minutes / 60) * 360) + 90;
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+      const hours = now.getHours();
+      const hoursDegrees = (((hours % 12)/ 12) * 360) + 90;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+    }
 
+    setInterval(setDate, 1000);
+    setDate();
   </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..6e6fa931f0 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 {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
+    .hl {
+      color: var(--base);
+    }
 
     body {
       text-align: center;
@@ -48,6 +59,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+      const suffix = this.dataset.sizing || '';
+      console.log(`--${this.name}${suffix}`);
+      document.documentElement.style.setProperty(`--${this.name}`, `${this.value}${suffix}`);
+    }
+
+    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 4162bce339..db44d8459a 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,29 +33,50 @@
 
     // 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.log(fifteens);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const names = inventors.map(inventor => `${inventor.first} ${inventor.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);
+    console.table(sorted);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const total = inventors.reduce((acc, current) => acc + (current.passed - current.year), 0);
+    console.log(total);
 
     // 5. Sort the inventors by years lived
+    const sortedTotal = inventors.sort((a, b) => (a.passed - a.year) - (b.passed - b.year));
+    console.table(sortedTotal);
 
     // 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 paris = ["Boulevards of Paris", "City walls of Paris", "Thiers wall", "Wall of Charles V", "Wall of Philip II Augustus", "City gates of Paris", "Haussmann's renovation of Paris", "Boulevards of the Marshals", "Boulevard Auguste-Blanqui", "Boulevard Barbès", "Boulevard Beaumarchais", "Boulevard de l'Amiral-Bruix", "Boulevard de Strasbourg", "Boulevard des Capucines", "Boulevard de la Chapelle", "Boulevard de Clichy", "Boulevard du Crime", "Boulevard Haussmann", "Boulevard de l'Hopital", "Boulevard des Italiens", "Boulevard de la Madeleine", "Boulevard de Magenta", "Boulevard Montmartre", "Boulevard du Montparnasse", "Boulevard Raspail", "Boulevard Richard-Lenoir", "Boulevard de Rochechouart", "Boulevard Saint-Germain", "Boulevard Saint-Michel", "Boulevard de Sébastopol", "Boulevard du Temple", "Boulevard Voltaire", "Boulevard de la Zone"];
+    // console.log(paris.filter(q => q.includes("de")));
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const pplSorted = people
+      .map(person => person.split(', '))
+      .sort(([aLast, _a], [bLast, _b]) => aLast > bLast ? 1 : -1)
+      .map(([last, first]) => `${first} ${last}`);
+
+    console.log(pplSorted);
 
     // 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 counts = data.reduce((output, current) => {
+      output[current] = (output[current] || 0) + 1;
+      return output;
+    }, {});
+    console.log(counts);
   </script>
 </body>
 </html>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..6122c806a9 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,9 +24,11 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
+      flex: 1;
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
@@ -41,6 +43,10 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -54,6 +60,27 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      flex-direction: 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 {
@@ -68,6 +95,7 @@
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -107,7 +135,19 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
+
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
+
+    function transitionText(e) {
+      if (!e.propertyName.includes('flex')) return;
+      this.classList.toggle('open-active');
+    }
 
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', transitionText));
   </script>
 
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..5334fb9165 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,48 @@
 <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));
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    const regex = new RegExp(wordToMatch, 'gi');
+    return place.city.match(regex) || place.state.match(regex);
+  });
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function displayMatches(e) {
+  const html = findMatches(this.value, cities)
+    .map(place => {
+      const regex = new RegExp(this.value, 'gi');
+      const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+      const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+      return `
+        <li>
+          <span class="name">${cityName}, ${stateName}</span>
+          <span class="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 206ec31aa0..c3aba7c046 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -25,17 +25,32 @@
     ];
 
     // Some and Every Checks
+    const year = (new Date()).getFullYear();
+    function isNineteen(person) {
+      return person.year < (year - 19);
+    }
+
     // Array.prototype.some() // is at least one person 19?
+    const isSomeoneNineteen = people.some(isNineteen);
+    console.log(isSomeoneNineteen);
+
     // Array.prototype.every() // is everyone 19?
+    const isEveryoneNineteen = people.every(isNineteen);
+    console.log(isEveryoneNineteen);
 
     // 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);
 
+    // delete the comment with the ID of 823423
+    comments.splice(commentIndex, 1);
+    console.log(comments);
   </script>
 </body>
 </html>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..0b4830b673 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,45 @@
 <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.strokeStyle = '#BADA55';
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let angle = 0;
+  let lineWidth = 10;
+
+  function draw(e) {
+    if(!isDrawing) return;
+
+    angle = (angle + 1) % 360;
+    lineWidth = 5 + 20 * (1 + Math.cos(angle / 180 * Math.PI));
+
+    ctx.strokeStyle = `hsl(${angle}, 100%, 50%)`;
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(e.offsetX, e.offsetY);
+    ctx.stroke();
+    ctx.lineWidth = lineWidth;
+
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  }
+
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  });
+  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..c94e3fb048 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,57 @@
     }
 
     // Regular
+    console.log('hello');
 
     // Interpolated
+    console.log('I am a %s', "salamander");
 
     // Styled
+    console.log('%c Hello, I am some great text', 'font-size: 50px;')
 
     // warning!
+    console.warn("Oh no!");
 
     // Error :|
+    console.error("GOING DOWN");
 
     // Info
+    console.info("This is great!");
 
     // Testing
+    console.assert(0 === 1, "0 is not 1");
 
     // clearing
+    console.clear();
 
     // Viewing DOM Elements
+    const p = document.querySelector('p');
+    console.log(p);
+    console.dir(p);
 
     // Grouping together
+    dogs.forEach(dog => {
+      console.groupCollapsed(`${dog.name}`);
+      console.log(`This is ${dog.name}`);
+      console.log(`They are ${dog.age} years old`);
+      console.groupEnd(`${dog.name}`);
+    });
 
     // counting
+    console.count("Brian");
+    console.count("Brian");
+    console.count("Brian");
+    console.count("Brian");
+    console.count("Brian");
+    console.count("Brian");
+    console.count("Brian");
 
     // timing
+    console.time('A timeout');
+    setTimeout(() => console.timeEnd('A timeout'), 2000);
+
+    // table
+    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 eb7ed310bb..5a1adc7c02 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,34 @@
   </div>
 
 <script>
+  const checkboxes = document.querySelectorAll('input[type=checkbox]');
+  let lastChecked = null;
+  let shiftPressed = false;
+
+  function setShift(ev, value) {
+    if(ev.key == "Shift") shiftPressed = value;
+  }
+
+  var onkeyup = (ev) => setShift(ev, false);
+  var onkeydown = (ev) => setShift(ev, true);
+
+  function checkBoxSelect() {
+    const checkedStatus = this.checked;
+    const _lastChecked = lastChecked;
+    let inSelection = false;
+    lastChecked = this;
+
+    if (_lastChecked === null || !shiftPressed) return;
+
+    checkboxes.forEach(box => {
+      const inBounds = box === this || box === _lastChecked;
+      if (inBounds) inSelection = !inSelection;
+      if (inSelection || inBounds) box.checked = checkedStatus;
+    });
+  }
+
+  checkboxes.forEach(box => box.addEventListener('change', checkBoxSelect));
+
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..ec7359ba09 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,46 @@
+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 togglePlay() {
+  if (video.paused) {
+    video.play();
+    toggle.textContent = '❚ ❚';
+  } else {
+    video.pause();
+    toggle.textContent = '►';
+  }
+}
+
+function skipTime() {
+  video.currentTime += parseInt(this.dataset.skip);
+}
+
+function changeRange() {
+  video[this.name] = parseFloat(this.value);
+}
+
+function resizeProgress() {
+  progressBar.style.flexBasis = `${video.currentTime / video.duration * 100}%`;
+}
+
+function scrub(e) {
+  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+  video.currentTime = scrubTime;
+}
+
+video.addEventListener('click', togglePlay);
+video.addEventListener('timeupdate', resizeProgress);
+toggle.addEventListener('click', togglePlay);
+skipButtons.forEach(button => button.addEventListener('click', skipTime));
+ranges.forEach(range => range.addEventListener('change', changeRange));
+
+let mousedown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
index c07581c1c0..b92af4a175 100644
--- a/11 - Custom Video Player/style.css	
+++ b/11 - Custom Video Player/style.css	
@@ -86,10 +86,10 @@ body {
 }
 
 .progress__filled {
-  width:50%;
+  width:0%;
   background:#ffc600;
   flex:0;
-  flex-basis:50%;
+  flex-basis:0%;
 }
 
 /* unholy css to style input type="range" */
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..38dd0fcee4 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,20 @@
 </head>
 <body>
 <script>
+
+const pressed = [];
+const secretCode = 'carrigan';
+
+window.addEventListener('keyup', (e) => {
+  pressed.push(e.key);
+  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
+
+  if (pressed.join('') === secretCode) {
+    console.log("HERE");
+    cornify_add();
+  }
+});
+
 </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..c5b8623a7d 100644
--- 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 sliderImages = document.querySelectorAll('img.slide-in');
+
+    function checkSlide(e) {
+      sliderImages.forEach(slider => {
+        const slideInAt = window.scrollY + window.innerHeight - slider.height / 2;
+        const sliderBottom = slider.offsetTop + slider.height;
+        const isHalfShown = slideInAt > slider.offsetTop;
+        const isNotScrolledPast = window.scrollY < sliderBottom;
+
+        if(isHalfShown && isNotScrolledPast) {
+          slider.classList.add('active');
+        } else {
+          slider.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..811f016ae2 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -7,45 +7,100 @@
 <body>
 
   <script>
+    function group(name, f) {
+      console.group(name);
+      f();
+      console.groupEnd(name);
+    }
+
+    function assertArraySameness(a1, a2, shouldMatch) {
+      const val = a1[0];
+      a1[0] = 'hope this isnt a match';
+      const isSame = a1[0] == a2[0];
+      a1[0] = val;
+
+      if ((isSame && shouldMatch) || (!isSame && !shouldMatch)) {
+        console.log('Sameness is correct.');
+      } else {
+        console.error('Sameness is incorrect! Expected: %s', shouldMatch);
+      }
+    }
+
     // start with strings, numbers and booleans
+    group('Number Tests', () => {
+      let age = 10;
+      let age2 = age;
+      console.log(age, age2);
 
-    // Let's say we have an array
-    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
+      age = 20;
+      console.log(age, age2);
+    });
+
+    group('String Tests', () => {
+      let name = 'bri';
+      let name2 = name;
+      console.log(name, name2);
 
-    // and we want to make a copy of it.
+      name = 'brian';
+      console.log(name, name2);
+    });
 
-    // You might think we can just do something like this:
+    // Let's say we have an array
+    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
+    let team = players;
 
-    // however what happens when we update that array?
 
-    // now here is the problem!
+    group('Arrays are passed by reference', () => {
+      assertArraySameness(team, players, true);
+    });
 
-    // oh no - we have edited the original array too!
+    group('Copy the array to modify it', () => {
+      const team2 = team.slice();
+      assertArraySameness(team, team2, false);
+    });
 
-    // Why? It's because that is an array reference, not an array copy. They both point to the same array!
+    group('Spread to copy', () => {
+      const team3 = [...team];
+      assertArraySameness(team, team3, false);
+    });
 
-    // So, how do we fix this? We take a copy instead!
+    group('Array class to copy', () => {
+      const team4 = Array.from(team);
+      assertArraySameness(team, team4, false);
+    });
 
-    // one day
 
-    // or create a new array and concat the old one in
+    // The same thing goes for objects, let's say we have a person object
 
-    // or use the new ES6 Spread
 
-    // now when we update it, the original one isn't changed
 
-    // The same thing goes for objects, let's say we have a person object
+    const person = {
+      name: 'wes',
+      age: 80
+    }
 
-    // with Objects
+    group('A reference of that object', () => {
+      const person2 = person;
+      person2['test'] = 10;
+      console.log('Testing that person 1 got it: %s', person['test'] !== null);
+      person['test'] = null;
+    });
 
-    // and think we make a copy:
+    group('A copy of that object', () => {
+      const person2 = Object.assign({}, person, { test: 10 });
+      console.log('Testing that person 1 got it: %s', person['test'] !== null);
 
-    // how do we take a copy instead?
+    });
 
-    // We will hopefully soon see the object ...spread
+    group('With deeply nested objects', () => {
+      const obj = { a: [1, 2, 3] };
 
-    // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
+      const obj2 = Object.assign({}, obj);
+      assertArraySameness(obj.a, obj2.a, true);
 
+      const obj3 = JSON.parse(JSON.stringify(obj));
+      assertArraySameness(obj.a, obj3.a, false);
+    });
   </script>
 
 </body>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..2c64dc1b33 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,16 +23,65 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <button id="clear">Clear All</button>
+    <button id="check">Check All</button>
+    <button id="uncheck">Uncheck All</button>
   </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 newItem = {
+      done: false,
+      text
+    };
+
+    items.push(newItem);
+    populateList(items, itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+    this.reset();
+  };
+
+  function populateList(plates = [], platesList) {
+    platesList.innerHTML = plates.map((plate, i) => {
+      return `
+        <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;
+    items[e.target.dataset.index].done = e.target.checked;
+    localStorage.setItem('items', JSON.stringify(items));
+  }
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+
+  function addButtonItemModifier(name, fn) {
+    document.getElementById(name).onclick = () => {
+      fn();
+      populateList(items, itemsList);
+      localStorage.setItem('items', JSON.stringify(items));
+    };
+  }
+
+  addButtonItemModifier('clear', () => items = []);
+  addButtonItemModifier('check', () => items.forEach(item => item.done = true));
+  addButtonItemModifier('uncheck', () => items.forEach(item => item.done = false));
+
+  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..f5bb6e8845 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,35 @@ <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((2 * x / width - 1) * walk);
+  const yWalk = Math.round((2 * y / height - 1) * walk);
+  const shadows = [
+    [1, 1, 'rgba(255, 0, 255, 0.7)'],
+    [-1, 1, 'rgba(0, 255, 255, 0.7)'],
+    [1, -1, 'rgba(255, 255, 0, 0.7)'],
+    [-1, -1, 'rgba(0, 0, 255, 0.7)']
+  ];
+
+  text.style.textShadow = shadows.map(([x, y, c]) => {
+    return `${xWalk * x}px ${yWalk * y}px 0 ${c}`;
+  }).join(', ');
+}
+
+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..ddd8c1232a 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -44,7 +44,21 @@
 
 <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 bandsList = document.getElementById('bands');
 
+bandsList.innerHTML =
+  bands
+    .sort((a, b) => {
+      const re = new RegExp("((The|A|An) )?(.*)");
+      const aClipped = a.match(re).pop();
+      const bClipped = b.match(re).pop();
+      return aClipped < bClipped ? -1 : 1; 
+    })
+    .map(band => {
+      return `
+        <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 3eaee0f3ef..97a754432b 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,25 @@
     </li>
 
 <script>
+  const itemList = document.querySelectorAll('li');
+  const items = [...itemList];
+  const regex = /(\d{1,2}):(\d{1,2})/;
+
+  function divideWithRemainder(a, b) {
+    return [Math.floor(a / b), a % b];
+  }
+
+  function formatTime(seconds) {
+    let [hours, secondsRemaining] = divideWithRemainder(seconds, 3600);
+    let [minutes, finalSeconds] = divideWithRemainder(secondsRemaining, 60);
+    return `${hours}:${minutes}:${finalSeconds}`;
+  }
+
+  const total = items
+    .map(item => item.dataset.time.match(regex))
+    .reduce((acc, [_, m, s]) => acc + parseInt(m) * 60 + parseInt(s), 0);
+
+  console.log(formatTime(total));
 </script>
 </body>
 </html>
diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html
index d4ffc4dc2a..cb2d1b18a4 100755
--- a/19 - Webcam Fun/index.html	
+++ b/19 - Webcam Fun/index.html	
@@ -10,7 +10,7 @@
   <div class="photobooth">
     <div class="controls">
       <button onClick="takePhoto()">Take Photo</button>
-<!--       <div class="rgb">
+      <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,7 +29,7 @@
         <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>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
index 00355f5a9c..ea9d8f7f2b 100644
--- a/19 - Webcam Fun/scripts.js	
+++ b/19 - Webcam Fun/scripts.js	
@@ -3,3 +3,89 @@ const canvas = document.querySelector('.photo');
 const ctx = canvas.getContext('2d');
 const strip = document.querySelector('.strip');
 const snap = document.querySelector('.snap');
+
+function getVideo() {
+  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+    .then(localMediaStream => {
+      video.src = window.URL.createObjectURL(localMediaStream);
+      video.play();
+    })
+    .catch(error => {
+      console.error("No devices :(", error);
+    });
+}
+
+function paintToCanvas() {
+  const width = video.videoWidth;
+  const height = video.videoHeight;
+
+  canvas.width = width;
+  canvas.height = height;
+
+  return setInterval(() => {
+    ctx.drawImage(video, 0, 0, width, height);
+  }, 16);
+}
+
+function takePhoto() {
+  // played the sound
+  snap.currentTime = 0;
+  snap.play();
+
+  // take the data out of the canvas
+  const data = canvas.toDataURL('image/jpeg');
+  const link = document.createElement('a');
+  link.href = data;
+  link.setAttribute('download', 'handsome');
+  link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
+  strip.insertBefore(link, strip.firsChild);
+}
+
+function redEffect(pixels) {
+  for(let i = 0; i < pixels.data.length; i+=4) {
+    pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
+    pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
+    pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
+  }
+  return pixels;
+}
+
+function rgbSplit(pixels) {
+  for(let i = 0; i < pixels.data.length; i+=4) {
+    pixels.data[i - 150] = pixels.data[i + 0]; // RED
+    pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
+    pixels.data[i - 550] = pixels.data[i + 2]; // Blue
+  }
+  return pixels;
+}
+
+function greenScreen(pixels) {
+  const levels = {};
+
+  document.querySelectorAll('.rgb input').forEach((input) => {
+    levels[input.name] = input.value;
+  });
+
+  for (i = 0; i < pixels.data.length; i = i + 4) {
+    red = pixels.data[i + 0];
+    green = pixels.data[i + 1];
+    blue = pixels.data[i + 2];
+    alpha = pixels.data[i + 3];
+
+    if (red >= levels.rmin
+      && green >= levels.gmin
+      && blue >= levels.bmin
+      && red <= levels.rmax
+      && green <= levels.gmax
+      && blue <= levels.bmax) {
+      // take it out!
+      pixels.data[i + 3] = 0;
+    }
+  }
+
+  return pixels;
+}
+
+getVideo();
+
+video.addEventListener('canplay', paintToCanavas);
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index d3395cca35..9bde982288 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -10,9 +10,30 @@
   </div>
 
 <script>
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
+  const recognition = new SpeechRecognition();
+  recognition.interimResults = true;
 
+  let p = document.createElement('p');
+  const words = document.querySelector('.words');
+  words.appendChild(p);
+
+  recognition.addEventListener('result', e => {
+    const transcript = Array.from(e.results)
+      .map(result => result[0].transcript)
+      .join('');
+
+    p.textContent = transcript;
+    if (e.results[0].isFinal) {
+      p = document.createElement('p');
+      words.appendChild(p);
+    }
+  });
+
+  recognition.addEventListener('end', recognition.start);
+
+  recognition.start();
 </script>
 
 
diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
index d794c144ba..c6b4c1eb70 100644
--- a/21 - Geolocation/index-START.html	
+++ b/21 - Geolocation/index-START.html	
@@ -57,6 +57,7 @@ <h1 class="speed">
     /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
   </style>
   <script>
+    // Nothing to commit!
     const arrow = document.querySelector('.arrow');
     const speed = document.querySelector('.speed-value');
 
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..eb993dd5cb 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,8 +26,21 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+    const highlight = document.createElement('span');
+
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+
+    function highlightLink() {
+      const linkCoords = this.getBoundingClientRect();
+      highlight.style.width = `${linkCoords.width}px`;
+      highlight.style.height = `${linkCoords.height}px`;
+      highlight.style.transform = `translate(${linkCoords.left + window.scrollX}px, ${linkCoords.top + window.scrollY}px)`;
+    }
+
+    triggers.forEach(trigger => trigger.addEventListener('mouseenter', highlightLink));
+
   </script>
 </body>
 </html>
-
diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..5483ba480a 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -35,6 +35,35 @@ <h1>The Voiceinator 5000</h1>
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+
+  function populateVoices() {
+    voices = this.getVoices();
+    voicesDropdown.innerHTML = voices
+      .filter(voice => voice.lang.includes('en'))
+      .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
+      .join('');
+  }
+
+  function toggle(startOver = true) {
+    speechSynthesis.cancel();
+    if (startOver) speechSynthesis.speak(msg);
+  }
+
+  function setVoice() {
+    msg.voice = voices.find(voice => voice.name === this.value);
+    toggle();
+  }
+
+  function setOption() {
+    msg[this.name] = this.value;
+    toggle();
+  }
+
+  speechSynthesis.addEventListener('voiceschanged', populateVoices);
+  voicesDropdown.addEventListener('change', setVoice);
+  options.forEach(option => option.addEventListener('change', setOption));
+  speakButton.addEventListener('click', toggle);
+  stopButton.addEventListener('click', () => toggle(false));
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..6bcdfb0514 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -23,7 +23,6 @@ <h1>A story about getting lost.</h1>
   </nav>
 
   <div class="site-wrap">
-
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
@@ -54,7 +53,20 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-
+const nav = document.querySelector('#main');
+let topOfNav = nav.offsetTop;
+
+function fixNav() {
+  if(window.scrollY >= topOfNav) {
+    document.body.style.paddingTop = nav.offsetHeight + 'px';
+    document.body.classList.add('fixed-nav');
+  } else {
+    document.body.classList.remove('fixed-nav');
+    document.body.style.paddingTop = 0;
+  }
+}
+
+window.addEventListener('scroll', fixNav);
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..3678c2500d 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -23,6 +23,10 @@ body {
   transition: transform 0.5s;
 }
 
+body.fixed-nav .site-wrap {
+  transform: scale(1);
+}
+
 header {
   text-align: center;
   height:50vh;
@@ -48,6 +52,11 @@ nav {
   z-index: 1;
 }
 
+body.fixed-nav nav {
+  position: fixed;
+  box-shadow:0 5px 0 rgba(0,0,0,0.1);
+}
+
 nav ul {
   margin: 0;
   padding:0;
@@ -76,6 +85,10 @@ li.logo a {
   color:black;
 }
 
+.fixed-nav li.logo {
+  max-width:500px;
+}
+
 nav a {
   text-decoration: none;
   padding:20px;
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
index 98f5e070c4..fcf43a59ea 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -39,7 +39,23 @@
 
 <button></button>
 <script>
+  const divs = document.querySelectorAll('div');
+  const button = document.querySelector('button');
 
+  function logText(e) {
+    console.log(this.classList.value);
+    e.stopPropagation(); // stop bubbling!
+  }
+
+  divs.forEach(div => div.addEventListener('click', logText, {
+    capture: false
+  }));
+
+  button.addEventListener('click', () => {
+    console.log('Click!!!');
+  }, {
+    once: true
+  });
 </script>
 </body>
 </html>
diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 9780d0d1ac..d6ca91087a 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -134,8 +134,6 @@ <h2>Cool</h2>
     opacity: 1;
   }
 
-
-
   .dropdownBackground {
     width:100px;
     height:100px;
@@ -208,6 +206,43 @@ <h2>Cool</h2>
 </style>
 
 <script>
+
+const triggers = document.querySelectorAll('.cool > li');
+const background = document.querySelector('.dropdownBackground');
+const nav = document.querySelector('.top');
+
+function handleEnter() {
+  // Trigger the animation
+  this.classList.add('trigger-enter');
+  setTimeout(() => this.classList.add('trigger-enter-active'), 150);
+  background.classList.add('open');
+
+  // Resize the dropdown
+  const dropdown = this.querySelector('.dropdown');
+  const dropdownCoords = dropdown.getBoundingClientRect();
+  const navCoords = nav.getBoundingClientRect();
+
+  const coords = {
+    height: dropdownCoords.height,
+    width: dropdownCoords.width,
+    top: dropdownCoords.top - navCoords.top,
+    left: dropdownCoords.left - navCoords.left
+  };
+
+  background.style.setProperty('width', `${coords.width}px`);
+  background.style.setProperty('height', `${coords.height}px`);
+  background.style.setProperty('top', `${coords.top}px`);
+  background.style.setProperty('left', `${coords.left}px`);
+}
+
+function handleLeave() {
+  this.classList.remove('trigger-enter', 'trigger-enter-active');
+  background.classList.remove('open');
+}
+
+triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
+triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
+
 </script>
 
 </body>
diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
index b8609315f7..912f44579e 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -35,6 +35,37 @@
   </div>
 
 <script>
+
+const slider = document.querySelector('.items');
+let isDown = false;
+let startX;
+let scrollLeft;
+
+slider.addEventListener('mousedown', (e) => {
+  isDown = true;
+  startX = e.pageX - slider.offsetLeft;
+  scrollLeft = slider.scrollLeft;
+  slider.classList.add('active');
+});
+
+slider.addEventListener('mouseleave', () => {
+  isDown = false;
+  slider.classList.remove('active');
+});
+
+slider.addEventListener('mouseup', () => {
+  isDown = false;
+  slider.classList.remove('active');
+});
+
+slider.addEventListener('mousemove', (e) => {
+  if (!isDown) return;
+
+  const diff = (e.pageX - slider.offsetLeft) - startX;
+  slider.scrollLeft = scrollLeft - diff * 3;
+});
+
+
 </script>
 
   </body>
diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
index c4cbd4259a..c9b81eb98f 100644
--- a/28 - Video Speed Controller/index-START.html	
+++ b/28 - Video Speed Controller/index-START.html	
@@ -15,6 +15,23 @@
   </div>
 
 <script>
+const speed = document.querySelector('.speed');
+const bar = speed.querySelector('.speed-bar');
+const video = document.querySelector('.flex');
+
+speed.addEventListener('mousemove', function(e) {
+  const y = e.pageY - this.offsetTop;
+  const percent = y / this.offsetHeight;
+  const min = 0.4;
+  const max = 3;
+  const height = Math.round(percent * 100) + "%";
+  const playbackRate = min + (max - min) * percent;
+
+  bar.style.height = height;
+  bar.textContent = playbackRate.toFixed(1) + "x";
+  video.playbackRate = playbackRate;
+});
+
 </script>
 </body>
 </html>
diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js
index e69de29bb2..f22405ddec 100644
--- a/29 - Countdown Timer/scripts-START.js	
+++ b/29 - Countdown Timer/scripts-START.js	
@@ -0,0 +1,56 @@
+let countdown;
+const timerDisplay = document.querySelector('.display__time-left');
+const endTime = document.querySelector('.display__end-time');
+const buttons = document.querySelectorAll('[data-time]');
+
+function tick(then) {
+  return function() {
+    const secondsLeft = Math.round((then - Date.now()) / 1000);
+    if(secondsLeft < 0) {
+      clearInterval(countdown);
+      return;
+    }
+
+    displayTimeLeft(secondsLeft);
+  }
+}
+
+function timer(seconds) {
+  clearInterval(countdown);
+
+  const now = Date.now();
+  const then = now + seconds * 1000;
+  displayTimeLeft(seconds);
+  displayEndTime(then);
+
+  countdown = setInterval(tick(then), 1000);
+}
+
+function displayTimeLeft(seconds) {
+  const minutes = Math.floor(seconds / 60);
+  const remainderSeconds = seconds % 60;
+  const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;
+  document.title = display;
+  timerDisplay.textContent = display;
+}
+
+function displayEndTime(timestamp) {
+  const end = new Date(timestamp);
+  const hour = end.getHours();
+  const adjustedHour = hour > 12 ? hour - 12 : hour;
+  const minutes = end.getMinutes();
+  endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
+}
+
+function startTimer() {
+  const seconds = parseInt(this.dataset.time);
+  timer(seconds);
+}
+
+buttons.forEach(button => button.addEventListener('click', startTimer));
+document.customForm.addEventListener('submit', function(e) {
+  e.preventDefault();
+  const mins = this.minutes.value;
+  timer(mins * 60);
+  this.reset();
+});
diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
index 2014ff458c..f40f1e2b91 100644
--- a/30 - Whack A Mole/index-START.html	
+++ b/30 - Whack A Mole/index-START.html	
@@ -36,6 +36,51 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
   const holes = document.querySelectorAll('.hole');
   const scoreBoard = document.querySelector('.score');
   const moles = document.querySelectorAll('.mole');
+  const roundCount = 10;
+  let currentRound;
+  let lastHole;
+  let score;
+
+  function randomTime(max, min) {
+    return Math.round(Math.random() * (max - min) + min);
+  }
+
+  function randomHole(holes) {
+    let idx;
+    while((idx = Math.floor(Math.random() * holes.length)) == lastHole);
+    lastHole = idx;
+    return holes[idx];
+  }
+
+  function peep() {
+    currentRound++;
+    const time = randomTime(400, 1000);
+    const hole = randomHole(holes);
+    hole.classList.add('up');
+    setTimeout(() => {
+      hole.classList.remove('up');
+      if (currentRound < roundCount) peep();
+    }, time);
+  }
+
+  function refreshScore() {
+    scoreBoard.innerText = score;
+  }
+
+  function startGame() {
+    score = 0;
+    currentRound = 0;
+    refreshScore();
+    peep();
+  }
+
+  function bonk() {
+    score++;
+    refreshScore();
+    this.classList.remove('up');
+  }
+
+  moles.forEach(mole => mole.addEventListener('click', bonk));
 
 </script>
 </body>