diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..569d4c0ff7 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,6 +58,26 @@
   <audio data-key="76" src="http://github.com/sounds/tink.wav"></audio>
 
 <script>
+document.addEventListener('keydown', (e) => {
+  const audio = document.querySelector(`audio[data-key="${e.which}"]`);
+  
+  if (!audio) return;
+  
+  const key = document.querySelector(`.key[data-key="${e.which}"]`);
+  audio.currentTime = 0;
+  audio.play();
+
+  if (key.dataset.key == e.which) {
+    key.classList.add('playing');
+  }
+})
+
+function removeTransition(e) {
+  if (e.propertyType !== 'transform') return;
+  this.classList.remove('playing')
+}
+const keys = document.querySelectorAll('.key');
+keys.forEach(item => item.addEventListener('transitionend', removeTransition))
 
 </script>
 
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 12f721b183..76d1e6194e 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -62,12 +62,38 @@
       background: black;
       position: absolute;
       top: 50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
     }
 
   </style>
 
   <script>
 
+    const setDate = () => {
+      const now = new Date();
+      const seconds = now.getSeconds();
+      const minutes = now.getMinutes();
+      const hour = now.getHours();
+
+      const secondDegrees = ((seconds / 60) * 360) + 90;
+      const minuteDegrees = ((minutes/60) * 360) + 90;
+      const hourDegrees = ((hour / 12) * 360) + 90;
+
+      const elementSeconds = document.querySelector(`.second-hand`);
+      const elementMinute = document.querySelector(`.min-hand`);
+      const elementHour = document.querySelector(`.hour-hand`);
+      elementSeconds.style.transform = `rotate(${secondDegrees}deg)`;
+      elementMinute.style.transform = `rotate(${minuteDegrees}deg)`;
+      elementHour.style.transform = `rotate(${hourDegrees}deg)`;
+    }
+
+    setInterval(() => {
+      setDate();
+    }, 1000);
+
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 6b9b539c09..38029ac014 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -22,6 +22,18 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <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
     */
@@ -45,6 +57,41 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    let root = document.documentElement;
+
+    const inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+      const sizing = this.dataset.sizing || '';
+      const value = this.value;
+
+      root.style.setProperty(`--${this.name}`, `${value}${sizing}`);
+
+    }
+
+    inputs.forEach(input => input.addEventListener('input', handleUpdate))
+
+    // const inputSpacing = document.getElementById('spacing');
+    // const inputBlur = document.getElementById('blur');
+    // const inputColor = document.getElementById('base');
+    
+    // inputSpacing.addEventListener('input', event => {
+    //   const padding = event.target.value;
+    //   const sizing = inputSpacing.dataset['sizing'];
+    //   root.style.setProperty('--spacing', `${padding}${sizing}`);
+    // })
+
+    // inputBlur.addEventListener('input', event => {
+    //   const blur = event.target.value;
+    //   const sizing = inputSpacing.dataset['sizing'];
+    //   root.style.setProperty('--blur', `${blur}${sizing}`);
+    // })
+
+    // inputColor.addEventListener('input', event => {
+    //   const color = event.target.value;
+    //   root.style.setProperty('--base', color);
+    // })
+
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index d19181b6b4..73a944f511 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,17 +31,45 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const result1 = inventors.filter(investor => investor.year >= 1500 && investor.year < 1600);
+    console.info('Result 1');
+    console.table(result1)
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors first and last names
+    const result2 = inventors.map(investor => `${investor.first} ${investor.last}`);
+    console.info('Result 2');
+    console.table(result2)
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const result3 = inventors.sort((a, b) => {
+      const inventorABirth = a.year;
+      const inventorBBirth = b.year;
+
+      return inventorBBirth > inventorABirth ? -1 : 1;
+    })
+    console.info('Result 3');
+    console.table(result3);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live all together?
+    const reducer = (accumulator, val) => {
+      return accumulator + (val.passed - val.year)
+    }
+    console.info('Result 4');
+    console.log(inventors.reduce(reducer, 0));
 
     // 5. Sort the inventors by years lived
+    const result5 = inventors.sort((a, b) => {
+      const inventorALived = a.passed - a.year;
+      const inventorBLived = b.passed - b.year;
+
+      return inventorALived > inventorBLived ? 1 : -1;
+    })
+
+    console.info('Result 5');
+    console.table(result5);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
@@ -49,10 +77,42 @@
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const result7 = people.sort((a, b) => {
+      let lastnameA = a.split(', ')[1];
+      let lastnameB = b.split(', ')[1];
+      let nameA = lastnameA.toUpperCase(); // ignore upper and lowercase
+      let nameB = lastnameB.toUpperCase();
+
+      if (nameA < nameB) {
+        return -1;
+      }
+      if (nameA > nameB) {
+        return 1;
+      }
+
+      // names must be equal
+      return 0;
+    })
+
+    console.info('Result 7');
+    console.table(result7)
 
     // 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 carReducer = (accumulator, val) => {
+      if (!accumulator[val]) {
+        accumulator[val] = 0;
+      }
+
+      accumulator[val] ++;
+
+      return accumulator;
+    };
+
+    const result8 = data.reduce(carReducer, {});
+    console.info('Result 8');
+    console.log(result8);
 
   </script>
 </body>
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 109c90fb36..6ff32a0055 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,47 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+let cities = [];
+
+async function getData() {
+  const response = await fetch(endpoint);
+  cities = await response.json();
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function handleSearch() {
+  console.log('hey', this.value);
+  const filtered = cities.filter(c => c.city.toLowerCase().includes(this.value) || c.state.toLowerCase().includes(this.value))
+  console.log(filtered);
+
+  const ulElement = document.querySelector('.suggestions');
+  const html = filtered.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('');
+
+  ulElement.innerHTML = html;
+}
+
+async function start() {
+  await getData();
+
+  const input = document.querySelector('.search');
+  input.addEventListener('keyup', handleSearch);
+}
+
+start();
+
 </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 4fd2936ddc..22b53cf1ce 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -96,6 +96,38 @@
   </div>
 
 <script>
+  const body = document.querySelector('body');
+  const inputs = document.querySelectorAll('input[type="checkbox"]');
+  let isShiftPressed = false;
+  let lastChecked = null;
+
+  inputs.forEach(input => input.addEventListener('click', handleCheckbox));
+  console.log(inputs);
+
+  function handleShift(e) {
+    isShiftPressed = !isShiftPressed;
+  }
+
+  function handleCheckbox(e) {
+    console.log(this.checked);
+    let inBetween = false;  
+
+    if (isShiftPressed) {
+      inputs.forEach(checkbox => {
+        if (checkbox === lastChecked || checkbox === this) {
+          inBetween = !inBetween;
+        }
+
+        if (inBetween) {
+          checkbox.checked = true;
+        }
+      })
+    }
+
+    lastChecked = this;
+  }
+
+  body.addEventListener('keydown', handleShift)
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 57b3260bc2..6f4a90599c 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..a2c3f950a4 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,69 @@
+// get elements
+const video = document.querySelector('.viewer');
+const progress = document.querySelector('.progress');
+const progressFilled = document.querySelector('.progress__filled');
+const skipButtons = document.querySelectorAll('[data-skip]');
+const rangeButtons = document.querySelectorAll('.player__slider');
+const toggleButton = document.querySelector('.toggle');
+const fullscreen = document.querySelector('.fullscreen');
+
+console.log('skip b', skipButtons);
+
+// handle events
+function handlePause() {
+  const method = video.paused ? 'play' : 'pause';
+  video[method]();
+}
+
+function handlePauseEvent() {
+  const icon = this.paused ? '►' : '❚ ❚';
+  console.log('icon', icon);
+  toggleButton.textContent = icon;
+}
+
+function handleSkip() {
+  console.log(this.dataset);
+  video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRange() {
+  video[this.name] = this.value;
+}
+
+function handleTimeUpdate() {
+  const percent = (this.currentTime / this.duration) * 100;
+  progressFilled.style.flexBasis = `${percent}%`;
+}
+
+function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+    video.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      video.exitFullscreen(); 
+    }
+  }
+}
+
+function updateProgressBar(e) {
+  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+  video.currentTime = scrubTime;
+}
+
+// hook events
+toggleButton.addEventListener('click', handlePause)
+fullscreen.addEventListener('click', toggleFullScreen);
+video.addEventListener('click', handlePause)
+video.addEventListener('pause', handlePauseEvent)
+video.addEventListener('play', handlePauseEvent)
+video.addEventListener('timeupdate', handleTimeUpdate);
+
+skipButtons.forEach(button => button.addEventListener('click', handleSkip))
+
+rangeButtons.forEach(button => button.addEventListener('click', handleRange))
+
+let mousedown = false;
+progress.addEventListener('click', updateProgressBar);
+progress.addEventListener('mousemove', (e) => mousedown && updateProgressBar(e));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);