diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..38b576a21c 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,27 @@
 
 <script>
 
+  function playSound(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
+    if (!audio) return // stop the function
+    audio.currentTime = 0 // rewind
+    audio.play()
+    key.classList.add('playing')
+  }
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return // skip if it's not a transform
+    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..40809514fb 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,36 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all .05s;
     }
 
   </style>
 
   <script>
 
+    const secondHand = document.querySelector('.second-hand')
+    const minHand = document.querySelector('.min-hand')
+    const hourHand = document.querySelector('.hour-hand')
+
+    function setDate() {
+      const now = new Date()
+
+      const 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
+      minHand.style.transform = `rotate(${minutesDegrees}deg)`
+
+      const hours = now.getHours()
+      const hoursDegrees = ((hours / 12) * 360) + 90
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`
+    }
+
+    setInterval(setDate, 1000)
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index bf0f33e3ba..0d1570215b 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,6 +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
@@ -53,6 +68,17 @@ <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 || '' // get the val of data-sizing from an input
+      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 6e28e357d0..7f4ddf4008 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -27,28 +27,62 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year <= 1599)) // if return true
+    console.table(fifteen)
 
-    // Array.prototype.map()
+    // Array.prototype.map() -> return a new array
     // 2. Give us an array of the inventory first and last names
+    const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`)
+    console.log(fullNames)
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1)
+    console.table(ordered)
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const totalYears = inventors.reduce((total, inventor) => {
+      return total + (inventor.passed - inventor.year)
+    }, 0)
+    console.log(totalYears)
 
     // 5. Sort the inventors by years lived
+    const oldest = inventors.sort((a, b) => {
+      const lastGuy = a.passed - a.year
+      const nextGuy = b.passed - b.year
+      return lastGuy > nextGuy ? -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 category = document.querySelector('.mw-category')
+    // const links = Array.from(category.querySelectorAll('a'))
+    // const de = links.map(link => link.textContent).filter(streetName => streetName.includes('de'))
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const alpha = people.sort((lastOne, nextOne) => {
+      const [aLast, aFirst] = lastOne.split(', ')
+      const [bLast, bFirst] = nextOne.split(', ')
+      return aLast > bLast ? 1 : -1
+    })
+    console.log(alpha)
 
     // 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 transportation = data.reduce((obj, item) => {
+      if (!obj[item]) {
+        obj[item] = 0
+      }
+
+      obj[item]++
+      return obj
+    }, {}) // initiate with a blank object
+
+    console.log(transportation)
 
   </script>
 </body>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..3ed8572b56 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 {
@@ -31,7 +32,7 @@
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
       text-align: center;
-      align-items:center;
+      align-items: center;
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
       transition:
@@ -41,6 +42,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
     }
 
 
@@ -54,6 +60,23 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: 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 +90,7 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -108,6 +132,20 @@
 
   <script>
 
+    const panels = document.querySelectorAll('.panel')
+
+    function toggleOpen() {
+      this.classList.toggle('open')
+    }
+    function toggleActive(e) {
+      console.log(e.propertyName)
+      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..67395e9c25 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,7 +15,47 @@
     </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(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() {
+    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>
diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css
index 36dc55f30e..87b07f085e 100644
--- a/06 - Type Ahead/style.css	
+++ b/06 - Type Ahead/style.css	
@@ -5,6 +5,9 @@
       font-size: 20px;
       font-weight: 200;
     }
+    * {
+      -webkit-font-smoothing: antialiased;
+    }
     *, *:before, *:after {
       box-sizing: inherit;
     }
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index bdf6c44415..e45e3f959d 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -25,42 +25,36 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
-    // const isAdult = people.some(function(person) {
-    //   const currentYear = (new Date()).getFullYear();
-    //   if(currentYear - person.year >= 19) {
-    //     return true;
-    //   }
-    // });
+    const isAdult = people.some(person => {
+      const currentYear = (new Date()).getFullYear()
+      return currentYear - person.year >= 19
+    })
+    console.log({isAdult})
 
-    const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
-
-    console.log({isAdult});
     // Array.prototype.every() // is everyone 19?
-
-    const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
-    console.log({allAdults});
+    const allAdults = people.every(person => {
+      const currentYear = (new Date()).getFullYear()
+      return currentYear - person.year >= 19
+    })
+    console.log({allAdults})
 
     // 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);
+    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 index = comments.findIndex(comment => comment.id === 823423);
-    console.log(index);
-
-    // comments.splice(index, 1);
+    const index = comments.findIndex(comment => comment.id === 823423)
+    console.log(index)
 
+    // comments.splice(index, 1)
     const newComments = [
       ...comments.slice(0, index),
       ...comments.slice(index + 1)
-    ];
+    ]
 
   </script>
 </body>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..5511cd54eb 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -6,7 +6,56 @@
 </head>
 <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'
+  ctx.lineWidth = 100
+  ctx.globalCompositeOperation = 'ligthen'
+
+  let isDrawing = false
+  let lastX = 0
+  let lastY = 0
+  let hue = 0
+  let direction = true
+
+  function draw(e) {
+    if (!isDrawing) return
+    console.log(e)
+    ctx.strokeStyle = `hsl(${hue}, 30%, 50%)`
+
+    ctx.beginPath()
+    ctx.moveTo(lastX, lastY)
+    ctx.lineTo(e.offsetX, e.offsetY)
+    ctx.stroke()
+    lastX = e.offsetX
+    lastY = e.offsetY
+
+    hue++
+    if (hue >= 360) hue = 0
+
+    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) direction = !direction
+    if (direction) {
+      ctx.lineWidth++
+    } else {
+      ctx.lineWidth--
+    }
+  }
+  canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true
+    lastX = e.offsetX
+    lastY = e.offsetY
+  })
+  canvas.addEventListener('mousemove', draw)
+  canvas.addEventListener('mouseup', () => isDrawing = false)
+  canvas.addEventListener('mouseout', () => isDrawing = false)
 </script>
 
 <style>
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..276c8af925 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,62 @@
     }
 
     // Regular
+    console.log('hello!')
 
     // Interpolated
+    console.log('hello, I am a %s string!', 'poop')
 
     // Styled
+    console.log('%c I am some great text', 'font-size: 23px; color:#bada55;')
 
     // warning!
+    console.warn('OHH NOO')
 
     // Error :|
+    console.error('Shit')
 
     // Info
+    console.info('Crocodiles are homos')
 
     // Testing
+    console.assert(1 === 2, 'that is wrong')
 
-    // clearing
+    // Clearing
+    // console.clear()
 
     // Viewing DOM Elements
+    const p = document.querySelector('p')
+    console.dir(p)
 
     // Grouping together
-
-    // counting
-
-    // timing
+    dogs.forEach(dog => {
+      console.group(`${dog.name}`)
+      console.log(`This is ${dog.name}`)
+      console.log(`${dog.name} is ${dog.age} years old`)
+
+      console.groupEnd(`${dog.name}`)
+    })
+
+    // Counting
+    console.count('Wes')
+    console.count('Yuri')
+    console.count('Yuri')
+    console.count('Yuri')
+    console.count('Wes')
+    console.count('Wes')
+
+    // Timing
+    console.clear()
+    console.time('fetching data')
+    fetch('https://api.github.com/users/YuriBrunetto')
+      .then(data => data.json())
+      .then(data => {
+        console.timeEnd('fetching data')
+        console.log(data)
+      })
+
+    // 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..d86a05aa6a 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -103,7 +103,30 @@
     </div>
   </div>
 
-<script>
-</script>
+  <script>
+
+    const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]')
+    let lastChecked
+
+    function handleCheck(e) {
+      if (e.shiftKey && this.checked) {
+        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', handleCheck))
+
+  </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index fe2b55b394..6cc4950582 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 type="button" name="fullscreen" class="player__button">FS</button>
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..2b05ae46d5 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,75 @@
+// elements
+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('button[name="fullscreen"]')
+
+// functions
+function togglePlay() {
+  const method = video.paused ? 'play' : 'pause'
+  video[method]()
+}
+
+function updateButton() {
+  const icon = this.paused ? '►' : '❚ ❚'
+  toggle.textContent = icon
+}
+
+function skip() {
+  video.currentTime += parseFloat(this.dataset.skip)
+}
+
+function 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
+  video.currentTime = scrubTime
+}
+
+function handleFullscreen() {
+  if (!document.mozFullScreen && !document.webkitFullScreen) {
+    if (video.mozRequestFullScreen) {
+      video.mozRequestFullScreen();
+    } else {
+      video.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+    }
+  } else {
+    if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else {
+      document.webkitCancelFullScreen();
+    }
+  }
+}
+
+// event listeners
+video.addEventListener('click', togglePlay)
+video.addEventListener('play', updateButton)
+video.addEventListener('pause', updateButton)
+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))
+
+let mouseDown = false
+progress.addEventListener('click', scrub)
+progress.addEventListener('mousemove', (e) => mouseDown && scrub(e))
+progress.addEventListener('mousedown', () => mouseDown = true)
+progress.addEventListener('mouseup', () => mouseDown = false)
+
+fullscreen.addEventListener('click', handleFullscreen)
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
index c07581c1c0..eab4994b1e 100644
--- a/11 - Custom Video Player/style.css	
+++ b/11 - Custom Video Player/style.css	
@@ -29,6 +29,10 @@ body {
 .player__video {
   width: 100%;
 }
+.player__video:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
 
 .player__button {
   background:none;
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..2d32220dc7 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -6,7 +6,18 @@
   <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
 </head>
 <body>
-<script>
-</script>
+
+  <script>
+    const pressed = []
+    const secretCode = 'ybrntt'
+
+    window.addEventListener('keyup', (e) => {
+      pressed.push(e.key)
+      pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length) // minus in front to be backwards
+      if (pressed.join('').includes(secretCode)) {
+        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 12591bad30..5c32de96b8 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -46,47 +46,52 @@ <h1>Slide in on Scroll</h1>
     function debounce(func, wait = 20, immediate = true) {
       var timeout;
       return function() {
-        var context = this, args = arguments;
+        var context = this, args = arguments
         var later = function() {
           timeout = null;
-          if (!immediate) func.apply(context, args);
-        };
-        var callNow = immediate && !timeout;
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-        if (callNow) func.apply(context, args);
-      };
+          if (!immediate) func.apply(context, args)
+        }
+        var callNow = immediate && !timeout
+        clearTimeout(timeout)
+        timeout = setTimeout(later, wait)
+        if (callNow) func.apply(context, args)
+      }
     }
 
-    const sliderImages = document.querySelectorAll('.slide-in');
+    const sliderImages = document.querySelectorAll('.slide-in')
 
     function checkSlide(e) {
       sliderImages.forEach(sliderImage => {
         // half way through the image
-        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
+        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2
         // bottom of the image
-        const imageBottom = sliderImage.offsetTop + sliderImage.height;
-        const isHalfShown = slideInAt > sliderImage.offsetTop;
-        const isNotScrolledPast = window.scrollY < imageBottom;
+        const imageBottom = sliderImage.offsetTop + sliderImage.height
+
+        const isHalfShown = slideInAt > sliderImage.offsetTop
+        const isNotScrolledPast = window.scrollY < imageBottom
         if (isHalfShown && isNotScrolledPast) {
-          sliderImage.classList.add('active');
+          sliderImage.classList.add('active')
         } else {
-          sliderImage.classList.remove('active');
+          sliderImage.classList.remove('active')
         }
-      });
+      })
     }
 
-    window.addEventListener('scroll', debounce(checkSlide));
+    window.addEventListener('scroll', debounce(checkSlide))
 
   </script>
 
   <style>
+    * {
+      -webkit-font-smoothing: antialiased;
+    }
     html {
       box-sizing: border-box;
       background:#ffc600;
       font-family:'helvetica neue';
-      font-size: 20px;
-      font-weight: 200;
+      font-size: 16px;
+      line-height: 150%;
+      color: rgba(0,0,0,.87);
     }
     body {
       margin: 0;
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index 4da1bac2ea..a3f5142145 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -8,16 +8,26 @@
 
   <script>
     // start with strings, numbers and booleans
+    let age = 100
+    let age2 = age
+    age = 200
+
+    let name = 'Yuri'
+    let name2 = name
+    name = 'Brunetto'
 
     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+    const team = players
 
     // You might think we can just do something like this:
+    team[3] = 'Lux'
 
     // however what happens when we update that array?
 
+
     // now here is the problem!
 
     // oh no - we have edited the original array too!
@@ -25,27 +35,55 @@
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
 
     // So, how do we fix this? We take a copy instead!
+    const team2 = players.slice() // a copy!!
 
     // one day
 
     // or create a new array and concat the old one in
+    const team3 = [].concat(players) // same thing
 
     // or use the new ES6 Spread
+    const team4 = [...players] // also a copy
+    team4[3] = 'Barbra'
+
+    const team5 = Array.from(players) // another copy
 
     // 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
 
     // with Objects
+    const person = {
+      name: 'Yuri',
+      age: 20
+    }
 
     // and think we make a copy:
+    const captain = person
+    captain.number = 99 // just a reference
 
     // how do we take a copy instead?
+    const cap2 = Object.assign({}, person, { number: 99 })
 
     // We will hopefully soon see the object ...spread
+    // const cap3 = {...person}
 
     // 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 yuri = {
+      name: 'Yuri',
+      age: 20,
+      social: {
+        twitter: '@yuribrunetto',
+        facebook: ' brunettoyuri'
+      }
+    }
+
+    const dev = Object.assign({}, yuri)
+
+    // hacky way
+    const dev2 = JSON.parse(JSON.stringify(yuri))
+
   </script>
 
 </body>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..f0ff997b6a 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -22,17 +22,79 @@ <h2>LOCAL TAPAS</h2>
     <form class="add-items">
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
+      <div class="clear-both"></div>
+      <button type="button" id="btn-check">Check all</button>
+      <button type="button" id="btn-uncheck">Uncheck all</button>
+      <div class="clear-both"></div>
     </form>
   </div>
 
 <script>
-  const addItems = document.querySelector('.add-items');
-  const itemsList = document.querySelector('.plates');
-  const items = [];
+  const addItems = document.querySelector('.add-items')
+  const itemsList = document.querySelector('.plates')
+  const items = JSON.parse(localStorage.getItem('items')) || []
+  const btnCheck = document.getElementById('btn-check')
+  const btnUncheck = document.getElementById('btn-uncheck')
 
+  function addItem(e) {
+    e.preventDefault()
+    const text = (this.querySelector('[name=item]')).value // this == form element
+    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) => {
+      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
+    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 toggleCheck(e) {
+    if (e.target.matches('#btn-check')) {
+      const inputs = itemsList.querySelectorAll('input')
+      inputs.forEach((input, i) => {
+        items[i].done = true
+      })
+    } else {
+      const inputs = itemsList.querySelectorAll('input')
+      inputs.forEach((input, i) => {
+        items[i].done = false
+      })
+    }
+    localStorage.setItem('items', JSON.stringify(items))
+    populateList(items, itemsList)
+  }
+
+  addItems.addEventListener('submit', addItem)
+  itemsList.addEventListener('click', toggleDone)
+  btnCheck.addEventListener('click', toggleCheck)
+  btnUncheck.addEventListener('click', toggleCheck)
+
+  populateList(items, itemsList)
 </script>
 
 
 </body>
 </html>
-
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
index ea5bab179c..d07a661bc3 100644
--- a/15 - LocalStorage/style.css	
+++ b/15 - LocalStorage/style.css	
@@ -76,3 +76,20 @@
       outline:0;
       border:1px solid rgba(0,0,0,0.1);
     }
+
+    .add-items button {
+      margin-top: 8px;
+      border: none;
+      padding: 5px;
+      float: right;
+      margin-left: 8px;
+      border: 1px solid rgba(0,0,0,.12);
+      outline: none;
+      cursor: pointer;
+    }
+
+.clear-both {
+  height: 0;
+  clear: both;
+  overflow: hidden;
+}
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..166ebfd7c7 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -7,7 +7,7 @@
 <body>
 
   <div class="hero">
-    <h1 contenteditable>🔥WOAH!</h1>
+    <h1 contenteditable>🔥 WOAH!</h1>
   </div>
 
   <style>
@@ -30,7 +30,34 @@ <h1 contenteditable>🔥WOAH!</h1>
   }
   </style>
 
-<script>
-</script>
+  <script>
+
+    const hero = document.querySelector('.hero')
+    const text = hero.querySelector('h1')
+    const walk = 255 // 100px
+
+    function shadow(e) {
+      const { offsetWidth: width, offsetHeight: height } = hero
+      let { offsetX: x, offsetY: y } = e
+
+      if (this !== e.target) { // this = .hero
+        x += e.target.offsetLeft
+        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 rgba(255, 0, 255, .7),
+        ${xWalk * -1}px ${yWalk}px 0 rgba(0, 255, 255, .7),
+        ${yWalk}px ${xWalk * -1}px 0 rgba(0, 255, 0, .7),
+        ${yWalk * -1}px ${xWalk}px 0 rgba(0, 0, 255, .7)
+      `
+    }
+
+    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..e7ecfb672f 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -18,7 +18,7 @@
 
     #bands {
       list-style: inside square;
-      font-size: 20px;
+      font-size: 12px;
       background: white;
       width: 500px;
       margin: auto;
@@ -43,8 +43,15 @@
   <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'];
 
+  function strip(bandName) {
+    return bandName.replace(/^(a |the |an)/i, '').trim()
+  }
+
+  const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1)
+
+  document.querySelector('#bands').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 3eaee0f3ef..0348e9978c 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -181,7 +181,26 @@
       Video 58
     </li>
 
-<script>
-</script>
+    <script>
+
+      const timeNodes = Array.from(document.querySelectorAll('[data-time]'))
+      const seconds = timeNodes
+        .map(node => node.dataset.time)
+        .map(timeCode => {
+          const [mins, secs] = timeCode.split(':').map(parseFloat)
+          return (mins * 60) + secs
+        })
+        .reduce((total, vidSeconds) => total + vidSeconds)
+
+      let secondsLeft = seconds
+      const hours = Math.floor(secondsLeft / 3600)
+      secondsLeft = secondsLeft % 3600
+
+      const mins = Math.floor(secondsLeft / 60)
+      secondsLeft = secondsLeft % 60
+
+      console.log(hours, mins, secondsLeft)
+
+    </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..d84e3d3514 100644
--- a/19 - Webcam Fun/scripts.js	
+++ b/19 - Webcam Fun/scripts.js	
@@ -1,5 +1,56 @@
-const video = document.querySelector('.player');
-const canvas = document.querySelector('.photo');
-const ctx = canvas.getContext('2d');
-const strip = document.querySelector('.strip');
-const snap = document.querySelector('.snap');
+const video = document.querySelector('.player')
+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(err => {
+      console.erro(`OH NOO!!`, err)
+    })
+}
+
+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)
+    let pixels = ctx.getImageData(0, 0, width, height)
+    pixels = redEffect(pixels)
+    ctx.putImageData(pixels, 0, 0)
+  }, 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.firstChild)
+}
+
+function redEffect(pixels) {
+  for (let i = 0; i < pixels.data.length; i += 4) {
+    pixels.data[i + 0] = pixels.data[i + 0] + 100 // red
+    pixels.data[i + 1] = pixels.data[i + 1] - 50  // green
+    pixels.data[i + 2] = pixels.data[i + 2] * .5  // blue
+  }
+  return pixels
+}
+
+getVideo()
+
+video.addEventListener('canplay', paintToCanvas)
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index d3395cca35..413c3eeaaf 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -12,6 +12,31 @@
 <script>
   window.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])
+      .map(result => result.transcript)
+      .join('');
+
+      const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
+      p.textContent = poopScript;
+
+      if (e.results[0].isFinal) {
+        p = document.createElement('p');
+        words.appendChild(p);
+      }
+  });
+
+  recognition.addEventListener('end', recognition.start);
+
+  recognition.start();
 
 </script>
 
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..3a4488edcb 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,8 +26,27 @@
     </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()
+      const coords = {
+        width: linkCoords.width,
+        height: linkCoords.height,
+        top: linkCoords.top + window.scrollY,
+        left: linkCoords.left + window.scrollX
+      }
+      highlight.style.width = `${coords.width}px`
+      highlight.style.height = `${coords.height}px`
+      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`
+    }
+
+    triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
+
   </script>
 </body>
 </html>
-
diff --git a/22 - Follow Along Link Highlighter/style.css b/22 - Follow Along Link Highlighter/style.css
index 222e27ae68..8caaa38e73 100644
--- a/22 - Follow Along Link Highlighter/style.css	
+++ b/22 - Follow Along Link Highlighter/style.css	
@@ -1,6 +1,9 @@
 html {
   box-sizing: border-box;
 }
+* {
+  -webkit-font-smoothing: antialiased;
+}
 *, *:before, *:after {
   box-sizing: inherit;
 }
diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..95094cabfa 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -29,12 +29,46 @@ <h1>The Voiceinator 5000</h1>
     </div>
 
 <script>
+
   const msg = new SpeechSynthesisUtterance();
   let voices = [];
   const voicesDropdown = document.querySelector('[name="voice"]');
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+
+  msg.text = document.querySelector('[name="text"]').value
+
+  function populateVoices() {
+    voices = this.getVoices()
+    voicesDropdown.innerHTML = voices
+      .filter(voice => voice.lang.includes('pt'))
+      .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`).join('')
+  }
+
+  function setVoice() {
+    msg.voice = voices.find(voice => voice.name === this.value)
+    toggle()
+  }
+
+  function toggle(startOver = true) {
+    speechSynthesis.cancel()
+    if (startOver) speechSynthesis.speak(msg)
+  }
+
+  speechSynthesis.addEventListener('voiceschanged', populateVoices)
+  voicesDropdown.addEventListener('change', setVoice)
+
+  function setOption() {
+    msg[this.name] = this.value
+    toggle()
+  }
+
+  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 4982537eea..82f37941ee 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,20 +54,22 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-  const nav = document.querySelector('#main');
-  const topOfNav = nav.offsetTop;
+
+  const nav = document.querySelector('#main')
+  const topOfNav = nav.offsetTop
 
   function fixNav() {
-    if(window.scrollY >= topOfNav) {
-      document.body.style.paddingTop = nav.offsetHeight + 'px';
-      document.body.classList.add('fixed-nav');
+    if (window.scrollY >= topOfNav) {
+      document.body.style.paddingTop = nav.offsetHeight + 'px'
+      document.body.classList.add('fixed-nav')
     } else {
-      document.body.style.paddingTop = 0;
-      document.body.classList.remove('fixed-nav');
+      document.body.style.paddingTop = 0
+      document.body.classList.remove('fixed-nav')
     }
   }
 
-  window.addEventListener('scroll', fixNav);
+  window.addEventListener('scroll', fixNav)
+
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index 19961112b4..c037958ac1 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -1,9 +1,13 @@
+* {
+  -webkit-font-smoothing: antialiased;
+}
 html {
   box-sizing: border-box;
   background:#eeeeee;
   font-family:'helvetica neue';
   font-size: 20px;
   font-weight: 200;
+  line-height: 150%;
 }
 body {
   margin: 0;
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..78e89376c2 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -1,45 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Understanding JavaScript's Capture</title>
-</head>
-<body class="bod">
-
-  <div class="one">
-    <div class="two">
-      <div class="three">
+  <head>
+    <meta charset="UTF-8">
+    <title>Understanding JavaScript's Capture</title>
+  </head>
+
+  <body class="bod">
+
+    <div class="one">
+      <div class="two">
+        <div class="three">
+        </div>
       </div>
     </div>
-  </div>
 
-<style>
-  html {
-    box-sizing: border-box;
-  }
-  *, *:before, *:after { box-sizing: inherit; }
+    <style>
+      html {
+        box-sizing: border-box;
+      }
+      *, *:before, *:after { box-sizing: inherit; }
+
+      div {
+        width:100%;
+        padding:100px;
+      }
+
+      .one {
+        background: thistle;
+      }
+
+      .two {
+        background:mistyrose;
+      }
 
-  div {
-    width:100%;
-    padding:100px;
-  }
+      .three {
+        background:coral;
+      }
+    </style>
 
-  .one {
-    background: thistle;
-  }
+    <button></button>
 
-  .two {
-    background:mistyrose;
-  }
+    <script>
+      const divs = document.querySelectorAll('div')
 
-  .three {
-    background:coral;
-  }
-</style>
+      function logText(e) {
+        console.log(this.classList.value)
+        // e.stopPropagation() // stop bubbling
+      }
 
-<button></button>
-<script>
+      divs.forEach(div => div.addEventListener('click', logText, {
+        capture: false,
+        once: true
+      }))
+    </script>
 
-</script>
-</body>
+  </body>
 </html>
diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 9780d0d1ac..e732e1c58d 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -208,6 +208,44 @@ <h2>Cool</h2>
 </style>
 
 <script>
+
+  const triggers = document.querySelectorAll('.cool > li')
+  const background = document.querySelector('.dropdownBackground')
+  const nav = document.querySelector('.top')
+
+  function handleEnter() {
+    this.classList.add('trigger-enter')
+    setTimeout(() => {
+      if (this.classList.contains('trigger-enter')) {
+        this.classList.add('trigger-enter-active')
+      }
+    }, 150)
+    background.classList.add('open')
+
+    const dropdown = this.querySelector('.dropdown')
+    const dropdownCoords = dropdown.getBoundingClientRect()
+    const navCoords = nav.getBoundingClientRect()
+
+    const coords = {
+      width: dropdownCoords.width,
+      height: dropdownCoords.height,
+      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('transform', `translate(${coords.left}px, ${coords.top}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..d132020b4e 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -34,8 +34,40 @@
     <div class="item item25">25</div>
   </div>
 
-<script>
-</script>
+  <script>
+
+    const slider = document.querySelector('.items')
+    let isDown = false
+    let startX
+    let scrollLeft
+
+    slider.addEventListener('mousedown', (e) => {
+      isDown = true
+      slider.classList.add('active')
+      startX = e.pageX - slider.offsetLeft
+      scrollLeft = slider.scrollLeft
+    })
+
+    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
+      e.preventDefault()
+
+      const x = e.pageX - slider.offsetLeft
+      const walk = (x - startX) * 2
+      slider.scrollLeft = scrollLeft - walk
+    })
+
+  </script>
 
   </body>
 </html>
diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
index c4cbd4259a..82154b56ee 100644
--- a/28 - Video Speed Controller/index-START.html	
+++ b/28 - Video Speed Controller/index-START.html	
@@ -14,7 +14,25 @@
     </div>
   </div>
 
-<script>
-</script>
+  <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 = 4
+      const height = Math.round(percent * 100) + '%'
+      const playbackRate = percent * (max - min) + min
+      bar.style.height = height
+      bar.textContent = playbackRate.toFixed(2) + 'x'
+      video.playbackRate = playbackRate
+    })
+
+  </script>
+
 </body>
 </html>
diff --git a/29 - Countown Timer/scripts-START.js b/29 - Countown Timer/scripts-START.js
index e69de29bb2..9c7c56b535 100644
--- a/29 - Countown Timer/scripts-START.js	
+++ b/29 - Countown Timer/scripts-START.js	
@@ -0,0 +1,54 @@
+let countdown
+
+const timerDisplay = document.querySelector('.display__time-left')
+const endTime = document.querySelector('.display__end-time')
+const buttons = document.querySelectorAll('[data-time]')
+
+function timer(seconds) {
+  // clear any timer
+  clearInterval(countdown)
+
+  const now = Date.now()
+  const then = now + (seconds * 1000)
+  displayTimeLeft(seconds)
+  displayEndTime(then)
+
+  countdown = setInterval(() => {
+    const secondsLeft = Math.round((then - Date.now()) / 1000)
+    if (secondsLeft < 0) {
+      clearInterval(countdown)
+      return
+    }
+
+    displayTimeLeft(secondsLeft)
+  }, 1000)
+}
+
+function displayTimeLeft(seconds) {
+  const minutes = Math.floor(seconds / 60)
+  const remainderSeconds = seconds % 60
+  const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`
+  timerDisplay.textContent = display
+  document.title = 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/29 - Countown Timer/style.css b/29 - Countown Timer/style.css
index f240799477..c61b4880c8 100644
--- a/29 - Countown Timer/style.css	
+++ b/29 - Countown Timer/style.css	
@@ -1,3 +1,7 @@
+* {
+  -webkit-font-smoothing: antialiased;
+}
+
 html {
   box-sizing: border-box;
   font-size: 10px;