diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..0673673f39 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,21 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+function removeTransition(e) {
+  this.classList.remove('playing');
+}
 
+function playSound(e) {
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  key.classList.add('playing');
+  console.log()
+  audio.currentTime = 0;
+  audio.play();
+}
+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..ee036a618e 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -62,11 +62,44 @@
       position: absolute;
       top:50%;
     }
+    .second-hand {
+      height: 3px;
+      background-color: #fefefe;
+      box-shadow: 1px 1px 2px grey;
+      transform: rotate(90deg);
+      transform-origin: right; 
+    }
+    .min-hand, 
+    .hour-hand {
+      transform: rotate(90deg);
+      transform-origin: right;
+      transition: all 0.05s cubic-bezier(0, 2.87, 1, 1.41);
+    }
 
   </style>
 
   <script>
+    function setTime() {
+
+      const now = new Date();
+      const mins = now.getMinutes();
+      const hrs  = now.getHours();
+      const secs = now.getSeconds();
+
+      const hrsDeg  = ((hrs/12)*360) + 90;
+      const secsDeg = ((secs / 60) * 360) + 90;
+      const minsDeg = ((mins / 60) * 360) + 90;
+
+      const secHand = document.querySelector('.hand.second-hand');
+      const minHand = document.querySelector('.hand.min-hand');
+      const hourHand = document.querySelector('.hand.hour-hand');
+
+      secHand.style.transform = `rotate(${secsDeg}deg)`;
+      minHand.style.transform = `rotate(${minsDeg}deg)`;
+      hourHand.style.transform = `rotate(${hrsDeg}deg)`;
+    }
 
+    setInterval(setTime, 100);
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..e4cee3de60 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -9,7 +9,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
-    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px" data-cool="+poop">
 
     <label for="blur">Blur:</label>
     <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
@@ -22,20 +22,29 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <style>
 
+    :root{
+      --base:  #ffcc00;
+      --blur:  1px;
+      --spacing:  10px;
+    }
+    img{
+      padding: var(--spacing);
+      filter:  blur(var(--blur));
+      background-color: var(--base);
+      height: auto;
+      width: 90vw;
+    }
     /*
       misc styles, nothing to do with CSS variables
     */
 
     body {
       text-align: center;
-    }
-
-    body {
       background: #193549;
       color: white;
       font-family: 'helvetica neue', sans-serif;
       font-weight: 100;
-      font-size: 50px;
+      font-size: 3vmax;
     }
 
     .controls {
@@ -48,6 +57,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+  const inputs = document.querySelectorAll('.controls input');
+
+  function handleUpdate(){
+    console.log(this.name);
+    const suffix = this.dataset.sizing || '';
+    document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix);
+  }
+
+  inputs.forEach(input => input.addEventListener('change',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..7bed1052b0 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -29,32 +29,91 @@
 
     const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
 
-    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
+    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const result = inventors.filter(function(inventor) {
+      if (inventor.year >1500 && inventor.year<=1599) {
+        return true;
+      }
+    });
+
+    console.table(result);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const inventorFirstAndLast = inventors.map(function(inventor, item) {
+      return `${inventor.first} ${inventor.last}`;
+    });
+
+    console.log(inventorFirstAndLast);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const sorted = inventors.sort(function (first, last) {
+      /* body... */
+      if (first.year > last.year) {
+        return 1;
+      }
+    });
+
+    console.table(sorted);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
-
+    const total = inventors.reduce(function(total, inventor) {
+      return total + (inventor.passed - inventor.year);
+    }, 0);
+    console.log(total);
     // 5. Sort the inventors by years lived
+    const sortByAge = inventors.sort(function(a,b) {
+      const ageOfFirst = a.passed - a.year;
+      const ageOfLast = b.passed - b.year;
+      if (ageOfFirst > ageOfLast) {
+        return 1;
+      }
+    });
+    console.table(sortByAge);
 
     // 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('.mw-category a'));
+    const streetNames = links.map(function(index, elem) {
+               const linkContent = index.innerText;
+               return linkContent;       
+    });
+    const filteredNames = streetNames.filter(function(streetName) {
+      return streetName.includes('de');
+    });
+    console.log(filteredNames);*/
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const alphaSorted = people.sort(function(firstOne, nextOne) {
+      
+      const [alast, afirst] = firstOne.split(', ');
+      const [blast, bfirst] = nextOne.split(', ');
+      return alast > blast ? 1 : -1;
+    });
+    console.log(alphaSorted);
 
     // 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 data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'varun','varun'];
+
+    const summedUp = data.reduce(function(obj, item){
+      if(!obj[item]){
+           obj[item] = 0;
+      }
+
+      obj[item]++;
+      return obj;
+
+    },{});
+
+    console.log(summedUp);
 
   </script>
 </body>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..41e7c33013 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,9 +24,15 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
@@ -53,7 +59,11 @@
     .panel > * {
       margin:0;
       width: 100%;
-      transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: transform 0.5s;
     }
 
     .panel p {
@@ -62,13 +72,24 @@
       text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
     }
+    .panel p:first-child {
+      transform: translateY(-100%);
+    }
+    .panel p:last-child {
+      transform: translateY(100%);
+    }
     .panel p:nth-child(2) {
       font-size: 4em;
     }
-
-    .panel.open {
+    .open {
+      flex: 5;
       font-size:40px;
     }
+    .open-active > p:last-child, 
+    .open-active > p:first-child {
+      font-size: 1em;
+      transform: translateY(0);
+    }
 
     .cta {
       color:white;
@@ -107,7 +128,21 @@
   </div>
 
   <script>
-
+  const panels = document.querySelectorAll('.panel');
+
+  panels.forEach( function(panel) {
+    panel.addEventListener('click', enlargePanel);
+    panel.addEventListener('transitionend', showText);
+  });
+
+  function enlargePanel(){
+    this.classList.toggle('open');
+  }
+  function showText(e){
+    if(e.propertyName.includes('flex')) {
+      this.classList.toggle('open-active');
+    }
+  }
   </script>
 
 
diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html
index 5902b43936..914de2f17b 100644
--- a/06 - Type Ahead/index-FINISHED.html	
+++ b/06 - Type Ahead/index-FINISHED.html	
@@ -9,10 +9,12 @@
 
   <form class="search-form">
     <input type="text" class="search" placeholder="City or State">
-    <ul class="suggestions">
-      <li>Filter for a city</li>
-      <li>or a state</li>
-    </ul>
+    <div class="autocomplete">
+      <ul class="suggestions">
+        <li>Filter for a city</li>
+        <li>or a state</li>
+      </ul>
+    </div>
   </form>
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..331bfe14f8 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';
 
+let cities = [];
+
+fetch(endpoint)
+.then(res => res.json())
+.then( (res) => { console.log(res); cities = res; } );
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    // here we need to figure out if the city or state matches what was searched
+    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() {
+  const matchArray = findMatches(this.value, cities);
+  const html = matchArray.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/06 - Type Ahead/style.css b/06 - Type Ahead/style.css
index 36dc55f30e..03d1d95b80 100644
--- a/06 - Type Ahead/style.css	
+++ b/06 - Type Ahead/style.css	
@@ -33,11 +33,16 @@
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
     }
 
-
+    .autocomplete {
+      max-height: 384px;
+      overflow: hidden;
+    }
     .suggestions {
       margin: 0;
       padding: 0;
       position: relative;
+      max-height: 322px;
+      overflow: hidden;
       /*perspective:20px;*/
     }
     .suggestions li {
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..2ff12a971a 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,37 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
+    const isAdult  = people.some((people) => {
+      return (new Date().getFullYear()) - people.year >= 19;
+    });
+    console.log(isAdult);
     // Array.prototype.every() // is everyone 19?
+    const allAdult  = people.every((people) => {
+      return (new Date().getFullYear()) - people.year >= 19;
+    });
+    console.log(allAdult);
 
     // 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 didWeGetIt = comments.find(function(item) {
+      
+      if (item.id === 823423) {
+        return item.text;
+      }
+    });
 
-    // Array.prototype.findIndex()
+    console.log(didWeGetIt);
+
+    // Array.prototype.findIndex()    
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(comment => comment.id === 823423);
+
+    console.log(index);
+    comments.splice(index, 1);
+    console.table(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..e78d55b1c2 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,66 @@
 <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 direction = true;
+let hue = 0;
+
+function draw(e){
+	if(!isDrawing)
+	return;
+
+	ctx.strokeStyle = `hsl(${hue},100%, 50%)`;
+	ctx.beginPath();
+	
+	ctx.moveTo(lastX, lastY);
+	ctx.lineTo(e.offsetX, e.offsetY);
+	
+	ctx.stroke();
+	[lastX, lastY] = [e.clientX, e.clientY];
+
+	hue++;
+	if(hue> 360){
+		hue = 0;
+	}
+
+	if(ctx.lineWidth > 100 || ctx.lineWidth <= 1){
+		direction = !direction;
+	}
+	else {
+		ctx.lineWidth
+	}
+
+	if(direction){
+		ctx.lineWidth++;
+	}
+	else {
+		ctx.lineWidth--;
+	}
+
+}
+
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mousedown', (e) => {
+	 isDrawing = true;
+	 [lastX, lastY] = [e.clientX, e.clientY];
+	 console.log(ctx.lineWidth);
+});
+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..b5d6c02e5e 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,63 @@
     }
 
     // Regular
-
+      console.log('Hello');
+   
     // Interpolated
-
+      console.log('Hello I am %s','')
+   
     // Styled
+    console.log('%C This is styled','font-size: 2em, text-shadow: 1px 1px 2px grey, color: black');
 
     // warning!
+    console.warn('Final warning');
 
     // Error :|
+    console.error('Oh shit!');
 
     // Info
+    console.info('Hey there, just an info');
 
     // Testing
 
     // clearing
+    console.clear();
 
     // Viewing DOM Elements
+    const p = document.querySelector('p');
+    console.log(p);
+    console.dir(p);
 
     // Grouping together
-
+    console.groupCollapsed('Marvel');
+      console.log('Iron man');
+      console.log('Captian America');
+      console.log('Black Panther');
+    console.groupEnd('Marvel');
+
+    console.groupCollapsed('DC');
+      console.log('Batman');
+      console.log('Superman');
+      console.log('Wonder woman');
+    console.groupEnd('DC');
+    
     // counting
+    console.count('DC');
+    console.count('DC');
+    console.count('DC');
+    console.count('DC');
+    console.count('DC');
 
     // timing
+    console.time('fetch data');
+    fetch('https://api.github.com/users/nrvarun')
+      .then( (res) => res.json(),
+        (err) => console.log(err))
+      .then((res) => { 
+        console.log(res)
+        console.timeEnd();
+      },
+      (err) => console.log(err));
 
   </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..d3a6753561 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -31,7 +31,7 @@
     }
 
 
-    input:checked + p {
+    input[type="checkbox"]:checked + p {
       background:#F9F9F9;
       text-decoration: line-through;
     }
@@ -65,45 +65,80 @@
 
   -->
   <div class="inbox">
-    <div class="item">
+    <label class="item">
       <input type="checkbox">
       <p>This is an inbox layout.</p>
-    </div>
-    <div class="item">
+    </label>
+    <label class="item">
       <input type="checkbox">
       <p>Check one item</p>
-    </div>
-    <div class="item">
+    </label>
+    <label class="item">
       <input type="checkbox">
       <p>Hold down your Shift key</p>
-    </div>
-    <div class="item">
+    </label>
+    <label class="item">
       <input type="checkbox">
       <p>Check a lower item</p>
-    </div>
-    <div class="item">
+    </label>
+    <label class="item">
       <input type="checkbox">
       <p>Everything inbetween should also be set to checked</p>
-    </div>
-    <div class="item">
+    </label>
+    <label class="item">
       <input type="checkbox">
       <p>Try do it with out any libraries</p>
-    </div>
-    <div class="item">
+    </label>
+    <label class="item">
       <input type="checkbox">
       <p>Just regular JavaScript</p>
-    </div>
-    <div class="item">
+    </label>
+    <label class="item">
       <input type="checkbox">
       <p>Good Luck!</p>
-    </div>
-    <div class="item">
+    </label>
+    <label class="item">
       <input type="checkbox">
       <p>Don't forget to tweet your result!</p>
-    </div>
+    </label>
   </div>
 
 <script>
+const checkboxes = document.querySelectorAll('.inbox input[type=checkbox]');
+
+let lastChecked;
+
+function handleCheck (e) {
+  
+  let inBetween = false;
+
+  if(e.shiftKey && this.checked){
+    var that = this;  
+    checkboxes.forEach( function(checkbox) {
+      console.log(checkbox);
+      console.log(this);
+      if(checkbox === that || checkbox === lastChecked) {
+          inBetween = !inBetween;
+          console.log('Starting to check them inbetween!');
+      }
+
+       if(inBetween) {
+          checkbox.checked = true;
+        }
+
+    });
+  
+  }
+
+
+
+  lastChecked = this;
+}
+
+checkboxes.forEach( function(checkbox) {
+  checkbox.addEventListener('click', handleCheck);
+});
 </script>
+
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index fe2b55b394..02f2beabb8 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -16,7 +16,7 @@
        </div>
        <button class="player__button toggle" title="Toggle Play">►</button>
        <input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1">
-       <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
+       <input type="range" name="playbackRate" class="player__slider" min="0.5" max="10" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
      </div>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..dbc09a603f 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,59 @@
+'use strict';
+
+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() {
+	const method = video.paused ? 'play' : 'pause';
+	video[method]();
+}
+
+function updateButton() {
+	const icon = this.paused ? '&#9654;' : '&#9208;';
+	toggle.innerHTML = icon;
+}
+
+function skip(){
+	video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRangeUpdate () {
+	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;
+	console.log(scrubTime);
+	video.currentTime = scrubTime;
+}
+
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+toggle.addEventListener('click', togglePlay);
+
+skipButtons.forEach( function(skipBtn) {
+	skipBtn.addEventListener('click', skip);
+});
+
+ranges.forEach( range => range.addEventListener('change', handleRangeUpdate));
+
+let mousedown = false;
+
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);
+progressBar.addEventListener('click', handleProgress);
\ No newline at end of file
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
index c07581c1c0..b6253af905 100644
--- a/11 - Custom Video Player/style.css	
+++ b/11 - Custom Video Player/style.css	
@@ -89,7 +89,7 @@ body {
   width:50%;
   background:#ffc600;
   flex:0;
-  flex-basis:50%;
+  flex-basis:0%;
 }
 
 /* unholy css to style input type="range" */