From a339c6da9262bdc954e7f4ddfd045c21c5e537b6 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Sat, 17 Dec 2016 08:40:24 -0500
Subject: [PATCH 01/14] Built a drum kit

---
 01 - JavaScript Drum Kit/index-START.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..b3b4b48d35 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,9 +58,22 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+    const buttons = Array.from(document.querySelectorAll('.key'));
+    const sounds = Array.from(document.querySelectorAll('audio'));
 
-</script>
+    buttons.forEach(button => {
+      button.addEventListener('transitionend', event => event.target.classList.remove('playing'))
+    });
+
+    document.addEventListener('keypress', event => {
+      let button = buttons.filter(button => event.keyCode == button.dataset.key).pop();
+      let sound = sounds.filter(sound => event.keyCode == sound.dataset.key).pop();
 
+      button.classList.add('playing');
+      sound.currentTime = 0;
+      sound.play();
+    });
+</script>
 
 </body>
 </html>

From aa9c89d4ee7d16ce29e30966522fa87d92d53cb8 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Mon, 19 Dec 2016 20:51:34 +0000
Subject: [PATCH 02/14] Doing a little array cardio

---
 04 - Array Cardio Day 1/index-START.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 089352c8a6..f873583a6c 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -27,22 +27,33 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    
+    const inventorsBornInThe1500s = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+
+    console.table(inventorsBornInThe1500s);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventory first and last names
+    const firstAndLastNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+    console.table(firstAndLastNames);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const ordered = inventors.sort(function(a, b) {
+      // return a.
+    });
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const years = inventors.reduce(function(inventor) {
+      
+    });
 
     // 5. Sort the inventors by years lived
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
-
     // 7. sort Exercise
     // Sort the people alphabetically by last name
 

From 6e1a0c4ab8c68974b13ad08e9ae29db16497b1bd Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Tue, 28 Feb 2017 21:59:53 -0500
Subject: [PATCH 03/14] Updating to latest version from original repo

---
 01 - JavaScript Drum Kit/index-FINISHED.html  |  0
 01 - JavaScript Drum Kit/index-START.html     | 15 +--
 01 - JavaScript Drum Kit/index.html           | 83 ----------------
 01 - JavaScript Drum Kit/style.css            | 38 +++----
 02 - JS and CSS Clock/index-FINISHED.html     | 99 +++++++++++++++++++
 02 - JS and CSS Clock/index-START.html        | 74 ++++++++++++++
 03 - CSS Variables/index-FINISHED.html        | 11 +--
 03 - CSS Variables/index-START.html           | 11 +--
 04 - Array Cardio Day 1/index-FINISHED.html   | 14 ++-
 04 - Array Cardio Day 1/index-START.html      | 25 ++---
 05 - Flex Panel Gallery/index-FINISHED.html   |  1 -
 05 - Flex Panel Gallery/index-START.html      |  0
 06 - Type Ahead/index-FINISHED.html           |  2 +-
 06 - Type Ahead/index-START.html              |  0
 06 - Type Ahead/style.css                     |  1 -
 07 - Array Cardio Day 2/index-FINISHED.html   |  5 +-
 07 - Array Cardio Day 2/index-START.html      | 38 ++-----
 .../index-FINISHED.html                       |  0
 08 - Fun with HTML5 Canvas/index-START.html   |  0
 09 - Dev Tools Domination/index-FINISHED.html |  2 +-
 09 - Dev Tools Domination/index-START.html    |  0
 .../index-FINISHED.html                       |  2 +-
 .../index-START.html                          |  2 +-
 11 - Custom Video Player/index.html           |  2 +-
 11 - Custom Video Player/scripts-FINISHED.js  |  0
 11 - Custom Video Player/scripts.js           |  0
 11 - Custom Video Player/style.css            | 19 +++-
 .../index-FINISHED.html                       |  0
 12 - Key Sequence Detection/index-START.html  |  0
 13 - Slide in on Scroll/index-FINISHED.html   |  0
 13 - Slide in on Scroll/index-START.html      | 20 ----
 .../index-FINISHED.html                       |  2 +-
 .../index-START.html                          |  2 +-
 15 - LocalStorage/index-FINISHED.html         |  0
 15 - LocalStorage/index-START.html            |  0
 15 - LocalStorage/style.css                   |  1 -
 16 - Mouse Move Shadow/index-finished.html    | 67 +++++++++++++
 16 - Mouse Move Shadow/index-start.html       | 31 +-----
 .../index-FINISHED.html                       |  1 +
 17 - Sort Without Articles/index-START.html   |  1 +
 .../index-FINISHED.html                       |  2 +-
 .../index-START.html                          |  2 +-
 19 - Webcam Fun/scripts.js                    |  0
 19 - Webcam Fun/style.css                     | 10 +-
 20 - Speech Detection/index-FINISHED.html     |  4 +-
 20 - Speech Detection/index-START.html        |  2 +-
 21 - Geolocation/index-FINISHED.html          |  3 +-
 21 - Geolocation/index-START.html             | 15 +--
 .../index-FINISHED.html                       |  2 +-
 .../index-START.html                          |  0
 22 - Follow Along Link Highlighter/style.css  |  1 -
 23 - Speech Synthesis/index-FINISHED.html     |  0
 23 - Speech Synthesis/index-START.html        |  0
 23 - Speech Synthesis/style.css               |  6 +-
 24 - Sticky Nav/index-FINISHED.html           |  0
 24 - Sticky Nav/index-START.html              | 15 +--
 24 - Sticky Nav/style-FINISHED.css            |  0
 24 - Sticky Nav/style-START.css               | 13 ---
 .../index-FINISHED.html                       |  0
 .../index-START.html                          |  0
 .../index-FINISHED.html                       | 10 +-
 26 - Stripe Follow Along Nav/index-START.html |  8 +-
 27 - Click and Drag/index-FINISHED.html       |  0
 27 - Click and Drag/index-START.html          |  0
 27 - Click and Drag/style.css                 |  1 +
 .../index-FINISHED.html                       |  0
 28 - Video Speed Controller/index-START.html  |  0
 28 - Video Speed Controller/style.css         |  2 +-
 29 - Countdown Timer/index.html               | 29 ++++++
 29 - Countdown Timer/scripts-FINISHED.js      | 55 +++++++++++
 29 - Countdown Timer/scripts-START.js         |  0
 29 - Countdown Timer/style.css                | 82 +++++++++++++++
 30 - Whack A Mole/dirt.svg                    |  0
 30 - Whack A Mole/index-FINISHED.html         |  0
 30 - Whack A Mole/index-START.html            |  0
 30 - Whack A Mole/mole.svg                    |  0
 30 - Whack A Mole/style.css                   |  0
 PULL_REQUEST_TEMPLATE.md                      | 13 +++
 readme.md                                     | 28 +++++-
 79 files changed, 563 insertions(+), 309 deletions(-)
 mode change 100644 => 100755 01 - JavaScript Drum Kit/index-FINISHED.html
 mode change 100644 => 100755 01 - JavaScript Drum Kit/index-START.html
 delete mode 100644 01 - JavaScript Drum Kit/index.html
 mode change 100644 => 100755 01 - JavaScript Drum Kit/style.css
 create mode 100755 02 - JS and CSS Clock/index-FINISHED.html
 create mode 100755 02 - JS and CSS Clock/index-START.html
 mode change 100644 => 100755 03 - CSS Variables/index-FINISHED.html
 mode change 100644 => 100755 03 - CSS Variables/index-START.html
 mode change 100644 => 100755 04 - Array Cardio Day 1/index-FINISHED.html
 mode change 100644 => 100755 04 - Array Cardio Day 1/index-START.html
 mode change 100644 => 100755 05 - Flex Panel Gallery/index-FINISHED.html
 mode change 100644 => 100755 05 - Flex Panel Gallery/index-START.html
 mode change 100644 => 100755 06 - Type Ahead/index-FINISHED.html
 mode change 100644 => 100755 06 - Type Ahead/index-START.html
 mode change 100644 => 100755 06 - Type Ahead/style.css
 mode change 100644 => 100755 07 - Array Cardio Day 2/index-FINISHED.html
 mode change 100644 => 100755 07 - Array Cardio Day 2/index-START.html
 mode change 100644 => 100755 08 - Fun with HTML5 Canvas/index-FINISHED.html
 mode change 100644 => 100755 08 - Fun with HTML5 Canvas/index-START.html
 mode change 100644 => 100755 09 - Dev Tools Domination/index-FINISHED.html
 mode change 100644 => 100755 09 - Dev Tools Domination/index-START.html
 mode change 100644 => 100755 10 - Hold Shift and Check Checkboxes/index-FINISHED.html
 mode change 100644 => 100755 10 - Hold Shift and Check Checkboxes/index-START.html
 mode change 100644 => 100755 11 - Custom Video Player/index.html
 mode change 100644 => 100755 11 - Custom Video Player/scripts-FINISHED.js
 mode change 100644 => 100755 11 - Custom Video Player/scripts.js
 mode change 100644 => 100755 11 - Custom Video Player/style.css
 mode change 100644 => 100755 12 - Key Sequence Detection/index-FINISHED.html
 mode change 100644 => 100755 12 - Key Sequence Detection/index-START.html
 mode change 100644 => 100755 13 - Slide in on Scroll/index-FINISHED.html
 mode change 100644 => 100755 13 - Slide in on Scroll/index-START.html
 mode change 100644 => 100755 14 - JavaScript References VS Copying/index-FINISHED.html
 mode change 100644 => 100755 14 - JavaScript References VS Copying/index-START.html
 mode change 100644 => 100755 15 - LocalStorage/index-FINISHED.html
 mode change 100644 => 100755 15 - LocalStorage/index-START.html
 mode change 100644 => 100755 15 - LocalStorage/style.css
 create mode 100755 16 - Mouse Move Shadow/index-finished.html
 mode change 100644 => 100755 16 - Mouse Move Shadow/index-start.html
 mode change 100644 => 100755 17 - Sort Without Articles/index-FINISHED.html
 mode change 100644 => 100755 17 - Sort Without Articles/index-START.html
 mode change 100644 => 100755 18 - Adding Up Times with Reduce/index-FINISHED.html
 mode change 100644 => 100755 18 - Adding Up Times with Reduce/index-START.html
 mode change 100644 => 100755 19 - Webcam Fun/scripts.js
 mode change 100644 => 100755 20 - Speech Detection/index-FINISHED.html
 mode change 100644 => 100755 20 - Speech Detection/index-START.html
 mode change 100644 => 100755 21 - Geolocation/index-FINISHED.html
 mode change 100644 => 100755 21 - Geolocation/index-START.html
 mode change 100644 => 100755 22 - Follow Along Link Highlighter/index-FINISHED.html
 mode change 100644 => 100755 22 - Follow Along Link Highlighter/index-START.html
 mode change 100644 => 100755 22 - Follow Along Link Highlighter/style.css
 mode change 100644 => 100755 23 - Speech Synthesis/index-FINISHED.html
 mode change 100644 => 100755 23 - Speech Synthesis/index-START.html
 mode change 100644 => 100755 23 - Speech Synthesis/style.css
 mode change 100644 => 100755 24 - Sticky Nav/index-FINISHED.html
 mode change 100644 => 100755 24 - Sticky Nav/index-START.html
 mode change 100644 => 100755 24 - Sticky Nav/style-FINISHED.css
 mode change 100644 => 100755 24 - Sticky Nav/style-START.css
 mode change 100644 => 100755 25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html
 mode change 100644 => 100755 25 - Event Capture, Propagation, Bubbling and Once/index-START.html
 mode change 100644 => 100755 26 - Stripe Follow Along Nav/index-FINISHED.html
 mode change 100644 => 100755 26 - Stripe Follow Along Nav/index-START.html
 mode change 100644 => 100755 27 - Click and Drag/index-FINISHED.html
 mode change 100644 => 100755 27 - Click and Drag/index-START.html
 mode change 100644 => 100755 27 - Click and Drag/style.css
 mode change 100644 => 100755 28 - Video Speed Controller/index-FINISHED.html
 mode change 100644 => 100755 28 - Video Speed Controller/index-START.html
 mode change 100644 => 100755 28 - Video Speed Controller/style.css
 create mode 100755 29 - Countdown Timer/index.html
 create mode 100755 29 - Countdown Timer/scripts-FINISHED.js
 create mode 100755 29 - Countdown Timer/scripts-START.js
 create mode 100755 29 - Countdown Timer/style.css
 mode change 100644 => 100755 30 - Whack A Mole/dirt.svg
 mode change 100644 => 100755 30 - Whack A Mole/index-FINISHED.html
 mode change 100644 => 100755 30 - Whack A Mole/index-START.html
 mode change 100644 => 100755 30 - Whack A Mole/mole.svg
 mode change 100644 => 100755 30 - Whack A Mole/style.css
 create mode 100755 PULL_REQUEST_TEMPLATE.md
 mode change 100644 => 100755 readme.md

diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
old mode 100644
new mode 100755
index b3b4b48d35..4070d32767
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,22 +58,9 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-    const buttons = Array.from(document.querySelectorAll('.key'));
-    const sounds = Array.from(document.querySelectorAll('audio'));
 
-    buttons.forEach(button => {
-      button.addEventListener('transitionend', event => event.target.classList.remove('playing'))
-    });
-
-    document.addEventListener('keypress', event => {
-      let button = buttons.filter(button => event.keyCode == button.dataset.key).pop();
-      let sound = sounds.filter(sound => event.keyCode == sound.dataset.key).pop();
-
-      button.classList.add('playing');
-      sound.currentTime = 0;
-      sound.play();
-    });
 </script>
 
+
 </body>
 </html>
diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
deleted file mode 100644
index a18f2bc2ca..0000000000
--- a/01 - JavaScript Drum Kit/index.html	
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>JS Drum Kit</title>
-  <link rel="stylesheet" href="style.css">
-</head>
-<body>
-
-
-  <div class="keys">
-    <div data-key="65" class="key">
-      <kbd>A</kbd>
-      <span class="sound">clap</span>
-    </div>
-    <div data-key="83" class="key">
-      <kbd>S</kbd>
-      <span class="sound">hihat</span>
-    </div>
-    <div data-key="68" class="key">
-      <kbd>D</kbd>
-      <span class="sound">kick</span>
-    </div>
-    <div data-key="70" class="key">
-      <kbd>F</kbd>
-      <span class="sound">openhat</span>
-    </div>
-    <div data-key="71" class="key">
-      <kbd>G</kbd>
-      <span class="sound">boom</span>
-    </div>
-    <div data-key="72" class="key">
-      <kbd>H</kbd>
-      <span class="sound">ride</span>
-    </div>
-    <div data-key="74" class="key">
-      <kbd>J</kbd>
-      <span class="sound">snare</span>
-    </div>
-    <div data-key="75" class="key">
-      <kbd>K</kbd>
-      <span class="sound">tom</span>
-    </div>
-    <div data-key="76" class="key">
-      <kbd>L</kbd>
-      <span class="sound">tink</span>
-    </div>
-  </div>
-
-  <audio data-key="65" src="sounds/clap.wav"></audio>
-  <audio data-key="83" src="sounds/hihat.wav"></audio>
-  <audio data-key="68" src="sounds/kick.wav"></audio>
-  <audio data-key="70" src="sounds/openhat.wav"></audio>
-  <audio data-key="71" src="sounds/boom.wav"></audio>
-  <audio data-key="72" src="sounds/ride.wav"></audio>
-  <audio data-key="74" src="sounds/snare.wav"></audio>
-  <audio data-key="75" src="sounds/tom.wav"></audio>
-  <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(`.key[data-key="${e.keyCode}"]`);
-    if (!audio) return; // stop the fucntion from running all together
-    audio.currentTime = 0; // rewind to the start
-    audio.play();
-    key.classList.add('playing');
-  }
-  function removeTransition(e) {
-    if (e.propertyName !== 'transform') return; // skip it 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>
-
-</body>
-</html>
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
old mode 100644
new mode 100755
index 3e0a320b37..075578c930
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -1,6 +1,6 @@
 html {
   font-size: 10px;
-  background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
+  background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
   background-size: cover;
 }
 body,html {
@@ -10,41 +10,41 @@ body,html {
 }
 
 .keys {
-  display:flex;
-  flex:1;
-  min-height:100vh;
+  display: flex;
+  flex: 1;
+  min-height: 100vh;
   align-items: center;
   justify-content: center;
 }
 
 .key {
-  border:4px solid black;
-  border-radius:5px;
-  margin:1rem;
+  border: .4rem solid black;
+  border-radius: .5rem;
+  margin: 1rem;
   font-size: 1.5rem;
-  padding:1rem .5rem;
-  transition:all .07s;
-  width:100px;
+  padding: 1rem .5rem;
+  transition: all .07s ease;
+  width: 10rem;
   text-align: center;
-  color:white;
-  background:rgba(0,0,0,0.4);
-  text-shadow:0 0 5px black;
+  color: white;
+  background: rgba(0,0,0,0.4);
+  text-shadow: 0 0 .5rem black;
 }
 
 .playing {
-  transform:scale(1.1);
-  border-color:#ffc600;
-  box-shadow: 0 0 10px #ffc600;
+  transform: scale(1.1);
+  border-color: #ffc600;
+  box-shadow: 0 0 1rem #ffc600;
 }
 
 kbd {
   display: block;
-  font-size: 40px;
+  font-size: 4rem;
 }
 
 .sound {
   font-size: 1.2rem;
   text-transform: uppercase;
-  letter-spacing: 1px;
-  color:#ffc600;
+  letter-spacing: .1rem;
+  color: #ffc600;
 }
diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html
new file mode 100755
index 0000000000..37436ed1ca
--- /dev/null
+++ b/02 - JS and CSS Clock/index-FINISHED.html	
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS + CSS Clock</title>
+</head>
+<body>
+
+
+    <div class="clock">
+      <div class="clock-face">
+        <div class="hand hour-hand"></div>
+        <div class="hand min-hand"></div>
+        <div class="hand second-hand"></div>
+      </div>
+    </div>
+
+
+  <style>
+    html {
+      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+      background-size:cover;
+      font-family:'helvetica neue';
+      text-align: center;
+      font-size: 10px;
+    }
+
+    body {
+      margin: 0;
+      font-size: 2rem;
+      display:flex;
+      flex:1;
+      min-height: 100vh;
+      align-items: center;
+    }
+
+    .clock {
+      width: 30rem;
+      height: 30rem;
+      border:20px solid white;
+      border-radius:50%;
+      margin:50px auto;
+      position: relative;
+      padding:2rem;
+      box-shadow:
+        0 0 0 4px rgba(0,0,0,0.1),
+        inset 0 0 0 3px #EFEFEF,
+        inset 0 0 10px black,
+        0 0 10px rgba(0,0,0,0.2);
+    }
+
+    .clock-face {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transform: translateY(-3px); /* account for the height of the clock hands */
+    }
+
+    .hand {
+      width:50%;
+      height:6px;
+      background:black;
+      position: absolute;
+      top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+    }
+</style>
+
+<script>
+  const secondHand = document.querySelector('.second-hand');
+  const minsHand = 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 mins = now.getMinutes();
+    const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
+    minsHand.style.transform = `rotate(${minsDegrees}deg)`;
+
+    const hour = now.getHours();
+    const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
+    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+  }
+
+  setInterval(setDate, 1000);
+
+  setDate();
+
+</script>
+</body>
+</html>
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
new file mode 100755
index 0000000000..ee7eaefb1f
--- /dev/null
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS + CSS Clock</title>
+</head>
+<body>
+
+
+    <div class="clock">
+      <div class="clock-face">
+        <div class="hand hour-hand"></div>
+        <div class="hand min-hand"></div>
+        <div class="hand second-hand"></div>
+      </div>
+    </div>
+
+
+  <style>
+    html {
+      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+      background-size:cover;
+      font-family:'helvetica neue';
+      text-align: center;
+      font-size: 10px;
+    }
+
+    body {
+      margin: 0;
+      font-size: 2rem;
+      display:flex;
+      flex:1;
+      min-height: 100vh;
+      align-items: center;
+    }
+
+    .clock {
+      width: 30rem;
+      height: 30rem;
+      border:20px solid white;
+      border-radius:50%;
+      margin:50px auto;
+      position: relative;
+      padding:2rem;
+      box-shadow:
+        0 0 0 4px rgba(0,0,0,0.1),
+        inset 0 0 0 3px #EFEFEF,
+        inset 0 0 10px black,
+        0 0 10px rgba(0,0,0,0.2);
+    }
+
+    .clock-face {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transform: translateY(-3px); /* account for the height of the clock hands */
+    }
+
+    .hand {
+      width:50%;
+      height:6px;
+      background:black;
+      position: absolute;
+      top:50%;
+    }
+
+  </style>
+
+  <script>
+
+
+  </script>
+</body>
+</html>
diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html
old mode 100644
new mode 100755
index 9401d7b339..848a0f95f9
--- a/03 - CSS Variables/index-FINISHED.html	
+++ b/03 - CSS Variables/index-FINISHED.html	
@@ -9,13 +9,13 @@ <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 id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
 
     <label for="blur">Blur:</label>
-    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
     <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
+    <input id="base" type="color" name="base" value="#ffc600">
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -57,11 +57,6 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       margin-bottom: 50px;
     }
 
-    a {
-      color: var(--base);
-      text-decoration: none;
-    }
-
     input {
       width:100px;
     }
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
old mode 100644
new mode 100755
index bf0f33e3ba..ca2b59d077
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -9,13 +9,13 @@ <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 id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
 
     <label for="blur">Blur:</label>
-    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
     <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
+    <input id="base" type="color" name="base" value="#ffc600">
   </div>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -42,11 +42,6 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       margin-bottom: 50px;
     }
 
-    a {
-      color: var(--base);
-      text-decoration: none;
-    }
-
     input {
       width:100px;
     }
diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html
old mode 100644
new mode 100755
index 80006d3f8b..ede883f1f9
--- a/04 - Array Cardio Day 1/index-FINISHED.html	
+++ b/04 - Array Cardio Day 1/index-FINISHED.html	
@@ -5,6 +5,7 @@
   <title>Array Cardio 💪</title>
 </head>
 <body>
+  <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
     // Get your shorts on - this is an array workout!
     // ## Array Cardio Day 1
@@ -19,13 +20,18 @@
       { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
       { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
       { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
+      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
+      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
+      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
+      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
+      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
     ];
 
     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 fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600))
+    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
 
     console.table(fifteen);
 
@@ -57,9 +63,9 @@
 
     // 5. Sort the inventors by years lived
     const oldest = inventors.sort(function(a, b) {
-      const lastGuy = a.passed - a.year;
-      const nextGuy = b.passed - b.year;
-      return lastGuy > nextGuy ? -1 : 1;
+      const lastInventor = a.passed - a.year;
+      const nextInventor = b.passed - b.year;
+      return lastInventor > nextInventor ? -1 : 1;
     });
     console.table(oldest);
 
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
old mode 100644
new mode 100755
index f873583a6c..eec0ffc31d
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -5,6 +5,7 @@
   <title>Array Cardio 💪</title>
 </head>
 <body>
+  <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
     // Get your shorts on - this is an array workout!
     // ## Array Cardio Day 1
@@ -19,41 +20,33 @@
       { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
       { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
       { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
+      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
+      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
+      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
+      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
+      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
     ];
 
-    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 inventorsBornInThe1500s = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
-
-    console.table(inventorsBornInThe1500s);
 
     // Array.prototype.map()
-    // 2. Give us an array of the inventory first and last names
-    const firstAndLastNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
-    console.table(firstAndLastNames);
+    // 2. Give us an array of the inventors' first and last names
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
-    const ordered = inventors.sort(function(a, b) {
-      // return a.
-    });
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
-    const years = inventors.reduce(function(inventor) {
-      
-    });
 
     // 5. Sort the inventors by years lived
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
+
     // 7. sort Exercise
     // Sort the people alphabetically by last name
 
diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html
old mode 100644
new mode 100755
index adb9060f5f..243f8a221d
--- a/05 - Flex Panel Gallery/index-FINISHED.html	
+++ b/05 - Flex Panel Gallery/index-FINISHED.html	
@@ -44,7 +44,6 @@
       background-position:center;
       flex: 1;
       justify-content: center;
-      align-items: center;
       display: flex;
       flex-direction: column;
     }
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
old mode 100644
new mode 100755
diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html
old mode 100644
new mode 100755
index 53c36248b0..5902b43936
--- a/06 - Type Ahead/index-FINISHED.html	
+++ b/06 - Type Ahead/index-FINISHED.html	
@@ -20,7 +20,7 @@
 const cities = [];
 fetch(endpoint)
   .then(blob => blob.json())
-  .then(data => cities.push(...data))
+  .then(data => cities.push(...data));
 
 function findMatches(wordToMatch, cities) {
   return cities.filter(place => {
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
old mode 100644
new mode 100755
diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css
old mode 100644
new mode 100755
index 155164bae9..36dc55f30e
--- a/06 - Type Ahead/style.css	
+++ b/06 - Type Ahead/style.css	
@@ -22,7 +22,6 @@
       margin: 0;
       text-align: center;
       outline:0;
-      border:0;
       border: 10px solid #F7F7F7;
       width: 120%;
       left: -10%;
diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html
old mode 100644
new mode 100755
index e39d35f79a..c8e5b25d3b
--- a/07 - Array Cardio Day 2/index-FINISHED.html	
+++ b/07 - Array Cardio Day 2/index-FINISHED.html	
@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
+  <title>Array Cardio 💪💪</title>
 </head>
 <body>
+  <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
     // ## Array Cardio Day 2
 
@@ -19,7 +20,7 @@
       { text: 'Love this!', id: 523423 },
       { text: 'Super good', id: 823423 },
       { text: 'You are the best', id: 2039842 },
-      { text: 'Ramen in my fav food ever', id: 123523 },
+      { text: 'Ramen is my fav food ever', id: 123523 },
       { text: 'Nice Nice Nice!', id: 542328 }
     ];
 
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
old mode 100644
new mode 100755
index e39d35f79a..969566ff78
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
+  <title>Array Cardio 💪💪</title>
 </head>
 <body>
+  <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
     // ## Array Cardio Day 2
 
@@ -12,55 +13,28 @@
       { name: 'Wes', year: 1988 },
       { name: 'Kait', year: 1986 },
       { name: 'Irv', year: 1970 },
-      { name: 'Lux', year: 2015 },
+      { name: 'Lux', year: 2015 }
     ];
 
     const comments = [
       { text: 'Love this!', id: 523423 },
       { text: 'Super good', id: 823423 },
       { text: 'You are the best', id: 2039842 },
-      { text: 'Ramen in my fav food ever', id: 123523 },
+      { text: 'Ramen is my fav food ever', id: 123523 },
       { text: 'Nice Nice Nice!', id: 542328 }
     ];
 
     // 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 => ((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});
+    // Array.prototype.some() // is at least one person 19 or older?
+    // Array.prototype.every() // is everyone 19 or older?
 
     // 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 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-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
old mode 100644
new mode 100755
diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html
old mode 100644
new mode 100755
index 02264aa8fa..55cd3a2f42
--- a/09 - Dev Tools Domination/index-FINISHED.html	
+++ b/09 - Dev Tools Domination/index-FINISHED.html	
@@ -21,7 +21,7 @@
     console.log('hello');
 
     // Interpolated
-    console.log('Hello I am a %s string!', '💩')
+    console.log('Hello I am a %s string!', '💩');
 
     // Styled
     // console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
old mode 100644
new mode 100755
diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html
old mode 100644
new mode 100755
index 3ce296cc4b..2b5d39a52c
--- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html	
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
+  <title>Hold Shift to Check Multiple Checkboxes</title>
 </head>
 <body>
   <style>
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
old mode 100644
new mode 100755
index eb7ed310bb..b6a1cc32ec
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
+  <title>Hold Shift to Check Multiple Checkboxes</title>
 </head>
 <body>
   <style>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
old mode 100644
new mode 100755
index fe2b55b394..281a15eaa8
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -15,7 +15,7 @@
         <div class="progress__filled"></div>
        </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="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">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11 - Custom Video Player/scripts-FINISHED.js
old mode 100644
new mode 100755
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
old mode 100644
new mode 100755
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
old mode 100644
new mode 100755
index 41fea5522c..45ffd26e01
--- a/11 - Custom Video Player/style.css	
+++ b/11 - Custom Video Player/style.css	
@@ -7,6 +7,7 @@ html {
 }
 
 body {
+  margin: 0;
   padding: 0;
   display:flex;
   background:#7A419B;
@@ -26,6 +27,17 @@ body {
   overflow: hidden;
 }
 
+/* This css is only applied when fullscreen is active. */
+.player:fullscreen {
+  max-width: none;
+  width: 100%;
+}
+
+.player:-webkit-full-screen {
+  max-width: none;
+  width: 100%;
+}
+
 .player__video {
   width: 100%;
 }
@@ -107,13 +119,12 @@ input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 8.4px;
   cursor: pointer;
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
   background: rgba(255,255,255,0.8);
   border-radius: 1.3px;
   border: 0.2px solid rgba(1, 1, 1, 0);
 }
 input[type=range]::-webkit-slider-thumb {
-  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
   height: 15px;
   width: 15px;
   border-radius: 50px;
@@ -130,13 +141,13 @@ input[type=range]::-moz-range-track {
   width: 100%;
   height: 8.4px;
   cursor: pointer;
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
   background: #ffffff;
   border-radius: 1.3px;
   border: 0.2px solid rgba(1, 1, 1, 0);
 }
 input[type=range]::-moz-range-thumb {
-  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
   height: 15px;
   width: 15px;
   border-radius: 50px;
diff --git a/12 - Key Sequence Detection/index-FINISHED.html b/12 - Key Sequence Detection/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
old mode 100644
new mode 100755
diff --git a/13 - Slide in on Scroll/index-FINISHED.html b/13 - Slide in on Scroll/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
old mode 100644
new mode 100755
index bbaf0b6f22..0b9fb8fccb
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -56,28 +56,8 @@ <h1>Slide in on Scroll</h1>
         timeout = setTimeout(later, wait);
         if (callNow) func.apply(context, args);
       };
-    };
-
-    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;
-        // bottom of the image
-        const imageBottom = sliderImage.offsetTop + sliderImage.height;
-        const isHalfShown = slideInAt > sliderImage.offsetTop;
-        const isNotScrolledPast = window.scrollY < imageBottom;
-        if (isHalfShown && isNotScrolledPast) {
-          sliderImage.classList.add('active');
-        } else {
-          sliderImage.classList.remove('active');
-        }
-      });
     }
 
-    window.addEventListener('scroll', debounce(checkSlide));
-
   </script>
 
   <style>
diff --git a/14 - JavaScript References VS Copying/index-FINISHED.html b/14 - JavaScript References VS Copying/index-FINISHED.html
old mode 100644
new mode 100755
index 20f0732c4e..be6d1b7646
--- a/14 - JavaScript References VS Copying/index-FINISHED.html	
+++ b/14 - JavaScript References VS Copying/index-FINISHED.html	
@@ -51,7 +51,7 @@
     team4[3] = 'heeee hawww';
     console.log(team4);
 
-    const team5 = Array.from(players)
+    const team5 = Array.from(players);
 
     // now when we update it, the original one isn't changed
 
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
old mode 100644
new mode 100755
index 4da1bac2ea..73cd5ae5a5
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -26,7 +26,7 @@
 
     // So, how do we fix this? We take a copy instead!
 
-    // one day
+    // one way
 
     // or create a new array and concat the old one in
 
diff --git a/15 - LocalStorage/index-FINISHED.html b/15 - LocalStorage/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
old mode 100644
new mode 100755
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
old mode 100644
new mode 100755
index 3514871ab3..ea5bab179c
--- a/15 - LocalStorage/style.css	
+++ b/15 - LocalStorage/style.css	
@@ -7,7 +7,6 @@
       display:flex;
       justify-content: center;
       align-items: center;
-      font-family: sans-serif;
       text-align: center;
       font-family: Futura,"Trebuchet MS",Arial,sans-serif
     }
diff --git a/16 - Mouse Move Shadow/index-finished.html b/16 - Mouse Move Shadow/index-finished.html
new file mode 100755
index 0000000000..4e8e3fbb1f
--- /dev/null
+++ b/16 - Mouse Move Shadow/index-finished.html	
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Mouse Shadow</title>
+</head>
+<body>
+
+  <div class="hero">
+    <h1 contenteditable>🔥WOAH!</h1>
+  </div>
+
+  <style>
+  html {
+    color:black;
+    font-family: sans-serif;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  .hero {
+    min-height: 100vh;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    color:black;
+  }
+
+
+  h1 {
+    text-shadow: 10px 10px 0 rgba(0,0,0,1);
+    font-size: 100px;
+  }
+  </style>
+
+<script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const walk = 500; // 100px
+
+  function shadow(e) {
+    const { offsetWidth: width, offsetHeight: height } = hero;
+    let { offsetX: x, offsetY: y } = e;
+
+    if (this !== e.target) {
+      x = x + e.target.offsetLeft;
+      y = y + e.target.offsetTop;
+    }
+
+    const xWalk = Math.round((x / width * walk) - (walk / 2));
+    const yWalk = Math.round((y / height * walk) - (walk / 2));
+
+    text.style.textShadow = `
+      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
+      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
+      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
+      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
+    `;
+
+  }
+
+  hero.addEventListener('mousemove', shadow);
+</script>
+</body>
+</html>
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
old mode 100644
new mode 100755
index 4328eaf6ab..543cb51eab
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -16,6 +16,10 @@ <h1 contenteditable>🔥WOAH!</h1>
     font-family: sans-serif;
   }
 
+  body {
+    margin: 0;
+  }
+
   .hero {
     min-height: 100vh;
     display:flex;
@@ -24,7 +28,6 @@ <h1 contenteditable>🔥WOAH!</h1>
     color:black;
   }
 
-
   h1 {
     text-shadow: 10px 10px 0 rgba(0,0,0,1);
     font-size: 100px;
@@ -32,32 +35,6 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
-  const hero = document.querySelector('.hero');
-  const text = hero.querySelector('h1');
-  const walk = 500; // 100px
-
-  function shadow(e) {
-    const { offsetWidth: width, offsetHeight: height } = hero;
-    let { offsetX: x, offsetY: y } = e;
-
-    if (this !== e.target) {
-      x = x + e.target.offsetLeft;
-      y = y + e.target.offsetTop;
-    }
-
-    const xWalk = Math.round((x / width * walk) - (walk / 2));
-    const yWalk = Math.round((y / height * walk) - (walk / 2));
-
-    text.style.textShadow = `
-      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
-      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
-      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
-      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
-    `;
-
-  }
-
-  hero.addEventListener('mousemove', shadow);
 </script>
 </body>
 </html>
diff --git a/17 - Sort Without Articles/index-FINISHED.html b/17 - Sort Without Articles/index-FINISHED.html
old mode 100644
new mode 100755
index 5de851cbbd..4208fb5b18
--- a/17 - Sort Without Articles/index-FINISHED.html	
+++ b/17 - Sort Without Articles/index-FINISHED.html	
@@ -8,6 +8,7 @@
 
   <style>
     body {
+      margin: 0;
       font-family: sans-serif;
       background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
       background-size: cover;
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
old mode 100644
new mode 100755
index cfaf3e0440..9bbd250a9b
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -8,6 +8,7 @@
 
   <style>
     body {
+      margin: 0;
       font-family: sans-serif;
       background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
       background-size: cover;
diff --git a/18 - Adding Up Times with Reduce/index-FINISHED.html b/18 - Adding Up Times with Reduce/index-FINISHED.html
old mode 100644
new mode 100755
index 9dcbb3d396..20d099644c
--- a/18 - Adding Up Times with Reduce/index-FINISHED.html	
+++ b/18 - Adding Up Times with Reduce/index-FINISHED.html	
@@ -180,7 +180,7 @@
     <li data-time="4:04">
       Video 58
     </li>
-
+  </ul>
 <script>
 
   const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
old mode 100644
new mode 100755
index 3eaee0f3ef..abdf4c91af
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -180,7 +180,7 @@
     <li data-time="4:04">
       Video 58
     </li>
-
+  </ul>
 <script>
 </script>
 </body>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
old mode 100644
new mode 100755
diff --git a/19 - Webcam Fun/style.css b/19 - Webcam Fun/style.css
index 4e8bee57c8..410f59d89a 100755
--- a/19 - Webcam Fun/style.css	
+++ b/19 - Webcam Fun/style.css	
@@ -52,8 +52,8 @@ html {
   background:white;
 }
 
-.strip a:nth-child(5n+1) img { rotate: 10deg; }
-.strip a:nth-child(5n+2) img { rotate: -2deg; }
-.strip a:nth-child(5n+3) img { rotate: 8deg; }
-.strip a:nth-child(5n+4) img { rotate: -11deg; }
-.strip a:nth-child(5n+5) img { rotate: 12deg; }
+.strip a:nth-child(5n+1) img { transform: rotate(10deg); }
+.strip a:nth-child(5n+2) img { transform: rotate(-2deg); }
+.strip a:nth-child(5n+3) img { transform: rotate(8deg); }
+.strip a:nth-child(5n+4) img { transform: rotate(-11deg); }
+.strip a:nth-child(5n+5) img { transform: rotate(12deg); }
diff --git a/20 - Speech Detection/index-FINISHED.html b/20 - Speech Detection/index-FINISHED.html
old mode 100644
new mode 100755
index e1932f41ac..a5f17da93d
--- a/20 - Speech Detection/index-FINISHED.html	
+++ b/20 - Speech Detection/index-FINISHED.html	
@@ -23,7 +23,7 @@
     const transcript = Array.from(e.results)
       .map(result => result[0])
       .map(result => result.transcript)
-      .join('')
+      .join('');
 
       const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
       p.textContent = poopScript;
@@ -66,7 +66,7 @@
       line-height:3rem;
     }
     p {
-      margin: 0 0 3rem 0;
+      margin: 0 0 3rem;
     }
 
     .words:before {
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
old mode 100644
new mode 100755
index d3395cca35..fa472df74e
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -41,7 +41,7 @@
       line-height:3rem;
     }
     p {
-      margin: 0 0 3rem 0;
+      margin: 0 0 3rem;
     }
 
     .words:before {
diff --git a/21 - Geolocation/index-FINISHED.html b/21 - Geolocation/index-FINISHED.html
old mode 100644
new mode 100755
index 0f2ddecf2a..a56cd3ddb1
--- a/21 - Geolocation/index-FINISHED.html	
+++ b/21 - Geolocation/index-FINISHED.html	
@@ -19,6 +19,7 @@ <h1 class="speed">
       font-size: 100px;
     }
     body {
+      margin: 0;
       font-family: sans-serif;
       min-height:100vh;
       display:flex;
@@ -32,7 +33,7 @@ <h1 class="speed">
         radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
       background-color:#282828;
       background-size:16px 16px;
-      background-position: fixed;
+      background-attachment: fixed;
     }
 
     .arrow {
diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
old mode 100644
new mode 100755
index d794c144ba..f3ed587241
--- a/21 - Geolocation/index-START.html	
+++ b/21 - Geolocation/index-START.html	
@@ -19,6 +19,7 @@ <h1 class="speed">
       font-size: 100px;
     }
     body {
+      margin: 0;
       font-family: sans-serif;
       min-height:100vh;
       display:flex;
@@ -32,7 +33,7 @@ <h1 class="speed">
         radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
       background-color:#282828;
       background-size:16px 16px;
-      background-position: fixed;
+      background-attachment: fixed;
     }
 
     .arrow {
@@ -57,18 +58,6 @@ <h1 class="speed">
     /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
   </style>
   <script>
-    const arrow = document.querySelector('.arrow');
-    const speed = document.querySelector('.speed-value');
-
-    navigator.geolocation.watchPosition((data) => {
-      console.log(data);
-      speed.textContent = data.coords.speed;
-      arrow.style.transform = `rotate(${data.coords.heading}deg)`;
-    }, (err) => {
-      console.err(err);
-      alert('HEY! YOU GOTTA ALLOW THAT TO HAPPEN!!!');
-    });
-
   </script>
 </body>
 </html>
diff --git a/22 - Follow Along Link Highlighter/index-FINISHED.html b/22 - Follow Along Link Highlighter/index-FINISHED.html
old mode 100644
new mode 100755
index 74bd06e321..869d8dab94
--- a/22 - Follow Along Link Highlighter/index-FINISHED.html	
+++ b/22 - Follow Along Link Highlighter/index-FINISHED.html	
@@ -29,7 +29,7 @@
   const triggers = document.querySelectorAll('a');
   const highlight = document.createElement('span');
   highlight.classList.add('highlight');
-  document.body.append(highlight);
+  document.body.appendChild(highlight);
 
   function highlightLink() {
     const linkCoords = this.getBoundingClientRect();
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
old mode 100644
new mode 100755
diff --git a/22 - Follow Along Link Highlighter/style.css b/22 - Follow Along Link Highlighter/style.css
old mode 100644
new mode 100755
index e1c51e8c12..222e27ae68
--- a/22 - Follow Along Link Highlighter/style.css	
+++ b/22 - Follow Along Link Highlighter/style.css	
@@ -45,7 +45,6 @@ a {
 
 .menu {
   padding: 0;
-  margin: 0;
   display: flex;
   list-style: none;
   justify-content: center;
diff --git a/23 - Speech Synthesis/index-FINISHED.html b/23 - Speech Synthesis/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
old mode 100644
new mode 100755
diff --git a/23 - Speech Synthesis/style.css b/23 - Speech Synthesis/style.css
old mode 100644
new mode 100755
index 0e44fd0522..a7aaa3938b
--- a/23 - Speech Synthesis/style.css	
+++ b/23 - Speech Synthesis/style.css	
@@ -8,6 +8,7 @@ html {
 }
 
 body {
+  margin: 0;
   padding: 0;
   font-family: sans-serif;
   background-color:#3BC1AC;
@@ -39,10 +40,7 @@ body {
 
 h1 {
   width:calc(100% + 4rem);
-  margin: 0;
-  margin-left: -2rem;
-  margin-top: -2rem;
-  margin-bottom: 2rem;
+  margin: -2rem 0 2rem -2rem;
   padding:.5rem;
   background: #ffc600;
   border-bottom: 5px solid #F3C010;
diff --git a/24 - Sticky Nav/index-FINISHED.html b/24 - Sticky Nav/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
old mode 100644
new mode 100755
index 4982537eea..e7bc67e9a5
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,20 +54,7 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-  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');
-    } else {
-      document.body.style.paddingTop = 0;
-      document.body.classList.remove('fixed-nav');
-    }
-  }
-
-  window.addEventListener('scroll', fixNav);
+
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-FINISHED.css b/24 - Sticky Nav/style-FINISHED.css
old mode 100644
new mode 100755
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
old mode 100644
new mode 100755
index 19961112b4..c6d59a31b3
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -23,10 +23,6 @@ body {
   transition: transform 0.5s;
 }
 
-.fixed-nav .site-wrap {
-  transform: scale(1);
-}
-
 header {
   text-align: center;
   height:50vh;
@@ -52,11 +48,6 @@ nav {
   z-index: 1;
 }
 
-.fixed-nav nav {
-  position: fixed;
-  box-shadow: 0 5px rgba(0,0,0,0.1)
-}
-
 nav ul {
   margin: 0;
   padding:0;
@@ -81,10 +72,6 @@ li.logo {
   font-size: 30px;
 }
 
-.fixed-nav li.logo {
-  max-width:500px;
-}
-
 li.logo a {
   color:black;
 }
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html b/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
old mode 100644
new mode 100755
diff --git a/26 - Stripe Follow Along Nav/index-FINISHED.html b/26 - Stripe Follow Along Nav/index-FINISHED.html
old mode 100644
new mode 100755
index 90a50b971c..9905df83e1
--- a/26 - Stripe Follow Along Nav/index-FINISHED.html	
+++ b/26 - Stripe Follow Along Nav/index-FINISHED.html	
@@ -75,6 +75,7 @@ <h2>Cool</h2>
     box-sizing: inherit;
   }
   body {
+    margin: 0;
     min-height: 100vh;
     background:
       linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
@@ -83,6 +84,11 @@ <h2>Cool</h2>
       linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
   }
 
+  h2 {
+    margin-top: 0;
+    padding-top: .8em;
+  }
+
   nav {
     position: relative;
     perspective: 600px;
@@ -144,7 +150,7 @@ <h2>Cool</h2>
     border-radius: 4px;
     box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
     transition:all 0.3s, opacity 0.1s, translate 0.2s;
-    transform-origin: 50% 0%;
+    transform-origin: 50% 0;
     display: flex;
     justify-content: center;
     opacity:0;
@@ -225,7 +231,7 @@ <h2>Cool</h2>
       height: dropdownCoords.height,
       width: dropdownCoords.width,
       top: dropdownCoords.top - navCoords.top,
-      left: dropdownCoords.left - navCoords.left,
+      left: dropdownCoords.left - navCoords.left
     };
 
     background.style.setProperty('width', `${coords.width}px`);
diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
old mode 100644
new mode 100755
index 9780d0d1ac..01b6d21e39
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -75,6 +75,7 @@ <h2>Cool</h2>
     box-sizing: inherit;
   }
   body {
+    margin: 0;
     min-height: 100vh;
     background:
       linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
@@ -83,6 +84,11 @@ <h2>Cool</h2>
       linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
   }
 
+  h2 {
+    margin-top: 0;
+    padding-top: .8em;
+  }
+
   nav {
     position: relative;
     perspective: 600px;
@@ -144,7 +150,7 @@ <h2>Cool</h2>
     border-radius: 4px;
     box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
     transition:all 0.3s, opacity 0.1s, translate 0.2s;
-    transform-origin: 50% 0%;
+    transform-origin: 50% 0;
     display: flex;
     justify-content: center;
     opacity:0;
diff --git a/27 - Click and Drag/index-FINISHED.html b/27 - Click and Drag/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
old mode 100644
new mode 100755
diff --git a/27 - Click and Drag/style.css b/27 - Click and Drag/style.css
old mode 100644
new mode 100755
index 209b32cae5..48a6ab6c6b
--- a/27 - Click and Drag/style.css	
+++ b/27 - Click and Drag/style.css	
@@ -31,6 +31,7 @@ body {
   cursor: pointer;
   transition: all 0.2s;
   transform: scale(0.98);
+  will-change: transform;
   position: relative;
   background: rgba(255,255,255,0.1);
   font-size: 0;
diff --git a/28 - Video Speed Controller/index-FINISHED.html b/28 - Video Speed Controller/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
old mode 100644
new mode 100755
diff --git a/28 - Video Speed Controller/style.css b/28 - Video Speed Controller/style.css
old mode 100644
new mode 100755
index 0d7a2b0acb..dbd8b28a29
--- a/28 - Video Speed Controller/style.css	
+++ b/28 - Video Speed Controller/style.css	
@@ -1,4 +1,5 @@
 body {
+  margin: 0;
   display:flex;
   justify-content: center;
   align-items: center;
@@ -27,7 +28,6 @@ video {
 }
 .speed-bar {
   width:100%;
-  height:10px;
   background:linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
   text-shadow:1px 1px 0 rgba(0,0,0,0.2);
   display: flex;
diff --git a/29 - Countdown Timer/index.html b/29 - Countdown Timer/index.html
new file mode 100755
index 0000000000..d54f447dd9
--- /dev/null
+++ b/29 - Countdown Timer/index.html	
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Countdown Timer</title>
+  <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="timer">
+    <div class="timer__controls">
+      <button data-time="20" class="timer__button">20 Secs</button>
+      <button data-time="300" class="timer__button">Work 5</button>
+      <button data-time="900" class="timer__button">Quick 15</button>
+      <button data-time="1200" class="timer__button">Snack 20</button>
+      <button data-time="3600" class="timer__button">Lunch Break</button>
+      <form name="customForm" id="custom">
+        <input type="text" name="minutes" placeholder="Enter Minutes">
+      </form>
+    </div>
+    <div class="display">
+      <h1 class="display__time-left"></h1>
+      <p class="display__end-time"></p>
+    </div>
+  </div>
+
+  <script src="scripts-START.js"></script>
+</body>
+</html>
diff --git a/29 - Countdown Timer/scripts-FINISHED.js b/29 - Countdown Timer/scripts-FINISHED.js
new file mode 100755
index 0000000000..581cadb270
--- /dev/null
+++ b/29 - Countdown Timer/scripts-FINISHED.js	
@@ -0,0 +1,55 @@
+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 existing timers
+  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);
+    // check if we should stop it!
+    if(secondsLeft < 0) {
+      clearInterval(countdown);
+      return;
+    }
+    // display it
+    displayTimeLeft(secondsLeft);
+  }, 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;
+  console.log(mins);
+  timer(mins * 60);
+  this.reset();
+});
diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js
new file mode 100755
index 0000000000..e69de29bb2
diff --git a/29 - Countdown Timer/style.css b/29 - Countdown Timer/style.css
new file mode 100755
index 0000000000..f240799477
--- /dev/null
+++ b/29 - Countdown Timer/style.css	
@@ -0,0 +1,82 @@
+html {
+  box-sizing: border-box;
+  font-size: 10px;
+  background: #8E24AA;
+  background: linear-gradient(45deg,  #42a5f5 0%,#478ed1 50%,#0d47a1 100%);
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin:0;
+  text-align: center;
+  font-family: 'Inconsolata', monospace;
+}
+
+.display__time-left {
+  font-weight: 100;
+  font-size: 20rem;
+  margin: 0;
+  color:white;
+  text-shadow:4px 4px 0 rgba(0,0,0,0.05);
+}
+
+.timer {
+  display:flex;
+  min-height: 100vh;
+  flex-direction:column;
+}
+
+.timer__controls {
+  display: flex;
+}
+
+.timer__controls > * {
+  flex:1;
+}
+
+.timer__controls form {
+  flex:1;
+  display:flex;
+}
+
+.timer__controls input {
+  flex:1;
+  border:0;
+  padding:2rem;
+}
+
+.timer__button {
+  background:none;
+  border:0;
+  cursor: pointer;
+  color:white;
+  font-size: 2rem;
+  text-transform: uppercase;
+  background:rgba(0,0,0,0.1);
+  border-bottom:3px solid rgba(0,0,0,0.2);
+  border-right:1px solid rgba(0,0,0,0.2);
+  padding:1rem;
+  font-family: 'Inconsolata', monospace;
+}
+
+.timer__button:hover,
+.timer__button:focus {
+  background:rgba(0,0,0,0.2);
+  outline:0;
+}
+
+.display {
+  flex:1;
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.display__end-time {
+  font-size: 4rem;
+  color:white;
+}
diff --git a/30 - Whack A Mole/dirt.svg b/30 - Whack A Mole/dirt.svg
old mode 100644
new mode 100755
diff --git a/30 - Whack A Mole/index-FINISHED.html b/30 - Whack A Mole/index-FINISHED.html
old mode 100644
new mode 100755
diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
old mode 100644
new mode 100755
diff --git a/30 - Whack A Mole/mole.svg b/30 - Whack A Mole/mole.svg
old mode 100644
new mode 100755
diff --git a/30 - Whack A Mole/style.css b/30 - Whack A Mole/style.css
old mode 100644
new mode 100755
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
new file mode 100755
index 0000000000..fc1b0c6834
--- /dev/null
+++ b/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,13 @@
+👋👋👋👋👋👋👋👋👋👋👋👋👋👋
+👋👋👋Hello Friend!👋👋👋👋
+👋👋👋👋👋👋👋👋👋👋👋👋👋👋
+
+Thanks for Submitting a pull request. Before you hit that button please make sure:
+
+These files are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things or fixed a small bug, that is great great, but I will be keeping them the same as the videos to avoid confusing. 
+
+Spelling mistakes / CSS updates / other clarifications are welcome as long as they don't change what is shown in the videos. 
+
+I encourage you to blog about your implementation and add the link to this repo - that way everyone can benefit from it.
+
+
diff --git a/readme.md b/readme.md
old mode 100644
new mode 100755
index 873f3242f4..8cb280be36
--- a/readme.md
+++ b/readme.md
@@ -2,6 +2,32 @@
 
 # JavaScript30
 
-Starter Files + Completed solutions for the JavaScript 30 Day Challenge. 
+Starter Files + Completed solutions for the JavaScript 30 Day Challenge.
 
 Grab the course at [https://JavaScript30.com](https://JavaScript30.com)
+
+## Community #JavaScript30 Content
+
+Feel free to submit a PR adding a link to your own recaps, guides or reviews!
+
+* [Arjun Khode’s blog](http://thesagittariusme.blogspot.com/search/label/JS30) about summaries for each day, including fixed glitches, bugs and extra features
+* [Nitish Dayal's Text Guides](https://github.com/nitishdayal/JavaScript30) are great for those who like reading over watching
+* [Meredith Underell's](http://meredithunderell.com/tag/javascript30/) Quick Lessons Learned
+* [Rowan Weismiller's](http://rowanweismiller.com/blog/javascript-30/) Recaps + Lessons Learned
+* [Thorsten Frommen](https://tfrommen.de/tag/javascript-30/) shares how he solved the exercises before viewing the answers
+* [Soyaine 写的中文指南](https://github.com/soyaine/JavaScript30)包含了过程记录和难点解释
+* [Ayo Isaiah's](https://freshman.tech/archive/#javascript30) Recaps and Lessons Learned
+* [Adriana Rios](https://stpcollabr8nlstn.github.io/JavaScript30/) shares her alternative solutions
+* [Michael Einsohn](http://30daysofjs.michaeleinsohn.com) publishes each challenge after watching the video once
+* [Mike Ekkel](https://medium.com/@mike_ekkel/javascript-30-a-30-day-vanilla-js-challenge-6a733fc9f62c#.9frjtaje9)
+* [Akinjide Bankole](https://github.com/akinjide/JS30days) used Node.js with [Jade](http://jadelang.net) to solve the exercises
+* [Yusef Habib](https://github.com/yhabib/JavaScript30) lessons and tricks learned, and a [gh-page](https://yhabib.github.io/JavaScript30/) to see working all the mini-projects.
+* [Amelie Yeh](https://github.com/amelieyeh/JS30) 30 lessons notes with things I've learned, and those important recaps. and directly view my demos [here](https://amelieyeh.github.io/JS30/) 🇹🇼😄
+
+## A note on Pull Requests
+
+These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.
+
+The starter files + solutions will be updated if/when the videos are updated.
+
+Thanks!

From 01b6c1a3df6c3bb65a886dfafd56c3bf6f981099 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Tue, 28 Feb 2017 22:54:02 -0500
Subject: [PATCH 04/14] Doing some array cardio

---
 04 - Array Cardio Day 1/index-START.html | 52 ++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..b1bf08a06b 100755
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -27,32 +27,78 @@
       { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
     ];
 
-    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 filtered = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+    console.table(filtered);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' 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 sortedInventors = inventors.sort((inventorA, inventorB) => inventorA.year - inventorB.year);
+    console.table(sortedInventors);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const yearsLived = inventors.reduce((total, inventor) => {
+      return total += (inventor.passed - inventor.year);
+    }, 0);
+    console.log(yearsLived);
 
     // 5. Sort the inventors by years lived
+    const sortedByYearsLived = inventors.sort((inventorA, inventorB) => {
+      return (inventorA.passed - inventorA.year) > (inventorB.passed - inventorB.year) ? -1 : 1;
+    });
+    console.table(sortedByYearsLived);
 
     // 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 sortedPeople = people.sort((lastOne, nextOne) => {
+      const [aLast, aFirst] = lastOne.split(', ');
+      const [bLast, bFirst] = nextOne.split(', ');
+      return aLast > bLast ? 1 : -1;
+    });
+    console.log(sortedPeople);
 
     // 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' 
+    ];
+
+    const sum = data.reduce(function(obj, item) {
+      if (!obj[item]) {
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj;
+    }, {});
+
+    console.log(sum);
 
   </script>
 </body>

From 6a835f421d47d015ec28fb595aea34592653c028 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Wed, 1 Mar 2017 11:29:16 -0500
Subject: [PATCH 05/14] Building drumkit.

---
 01 - JavaScript Drum Kit/index-START.html | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..92cbe6b5de 100755
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,23 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  const keys = [...document.querySelectorAll('.key')];
+  const sounds = [...document.querySelectorAll('audio')];
 
+  keys.forEach((key) => {
+    key.addEventListener('transitionend', event => event.target.classList.remove('playing'))
+  });
+
+  document.addEventListener('keydown', (event) => {
+    const key = keys.filter(key => key.getAttribute('data-key') == event.keyCode).pop();
+    const sound = sounds.filter(sound => sound.getAttribute('data-key') == event.keyCode).pop();
+
+    if (sound !== undefined) {
+      sound.currentTime = 0;
+      sound.play();
+      key.classList.add('playing');
+    }
+  });
 </script>
 
 

From 7a46d6b66cd1f7243b4ce7b856da157ef0968651 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Wed, 1 Mar 2017 13:03:32 -0500
Subject: [PATCH 06/14] CSS, not JavaScript

---
 02 - JS + CSS Clock/index-START.html | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 259280d228..43991416c1 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,35 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
-
   <script>
+  const secondHand = document.querySelector('.second-hand');
+  const minsHand = 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 mins = now.getMinutes();
+    const minsDegrees = ((mins / 60) * 360) + 90;
+    minsHand.style.transform = `rotate(${minsDegrees}deg)`;
+
+    const hour = now.getMinutes();
+    const hourDegrees = ((mins / 12) * 360) + 90;
+    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+  }
 
+  setInterval(setDate, 1000);
 
   </script>
 </body>

From b2d1b6160d10765fc84ba3792df2faa01b3b2089 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Wed, 1 Mar 2017 13:06:08 -0500
Subject: [PATCH 07/14] Let me update the correct directory.

---
 02 - JS and CSS Clock/index-START.html | 30 ++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index ee7eaefb1f..43991416c1 100755
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>JS + CSS Clock</title>
+  <title>Document</title>
 </head>
 <body>
 
@@ -26,7 +26,6 @@
     }
 
     body {
-      margin: 0;
       font-size: 2rem;
       display:flex;
       flex:1;
@@ -43,7 +42,7 @@
       position: relative;
       padding:2rem;
       box-shadow:
-        0 0 0 4px rgba(0,0,0,0.1),
+        0 0 0px 4px rgba(0,0,0,0.1),
         inset 0 0 0 3px #EFEFEF,
         inset 0 0 10px black,
         0 0 10px rgba(0,0,0,0.2);
@@ -62,12 +61,35 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
-
   <script>
+  const secondHand = document.querySelector('.second-hand');
+  const minsHand = 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 mins = now.getMinutes();
+    const minsDegrees = ((mins / 60) * 360) + 90;
+    minsHand.style.transform = `rotate(${minsDegrees}deg)`;
+
+    const hour = now.getMinutes();
+    const hourDegrees = ((mins / 12) * 360) + 90;
+    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+  }
 
+  setInterval(setDate, 1000);
 
   </script>
 </body>

From 0a680fc507a8cda79b782167c06e399442bb373b Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Wed, 1 Mar 2017 20:30:12 -0500
Subject: [PATCH 08/14] Removing duplicate directories

---
 02 - JS + CSS Clock/index-FINISHED.html | 96 -------------------------
 02 - JS + CSS Clock/index-START.html    | 96 -------------------------
 02 - JS + CSS Clock/index.html          | 96 -------------------------
 29 - Countown Timer/index.html          | 29 --------
 29 - Countown Timer/scripts-FINISHED.js | 55 --------------
 29 - Countown Timer/scripts-START.js    |  0
 29 - Countown Timer/style.css           | 82 ---------------------
 7 files changed, 454 deletions(-)
 delete mode 100644 02 - JS + CSS Clock/index-FINISHED.html
 delete mode 100644 02 - JS + CSS Clock/index-START.html
 delete mode 100644 02 - JS + CSS Clock/index.html
 delete mode 100644 29 - Countown Timer/index.html
 delete mode 100644 29 - Countown Timer/scripts-FINISHED.js
 delete mode 100644 29 - Countown Timer/scripts-START.js
 delete mode 100644 29 - Countown Timer/style.css

diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html
deleted file mode 100644
index 36c420f534..0000000000
--- a/02 - JS + CSS Clock/index-FINISHED.html	
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Document</title>
-</head>
-<body>
-
-
-    <div class="clock">
-      <div class="clock-face">
-        <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
-      </div>
-    </div>
-
-
-  <style>
-    html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
-      background-size:cover;
-      font-family:'helvetica neue';
-      text-align: center;
-      font-size: 10px;
-    }
-
-    body {
-      font-size: 2rem;
-      display:flex;
-      flex:1;
-      min-height: 100vh;
-      align-items: center;
-    }
-
-    .clock {
-      width: 30rem;
-      height: 30rem;
-      border:20px solid white;
-      border-radius:50%;
-      margin:50px auto;
-      position: relative;
-      padding:2rem;
-      box-shadow:
-        0 0 0px 4px rgba(0,0,0,0.1),
-        inset 0 0 0 3px #EFEFEF,
-        inset 0 0 10px black,
-        0 0 10px rgba(0,0,0,0.2);
-    }
-
-    .clock-face {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
-    }
-
-    .hand {
-      width:50%;
-      height:6px;
-      background:black;
-      position: absolute;
-      top:50%;
-      transform-origin: 100%;
-      transform: rotate(90deg);
-      transition: all 0.05s;
-      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
-    }
-</style>
-
-<script>
-  const secondHand = document.querySelector('.second-hand');
-  const minsHand = 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 mins = now.getMinutes();
-    const minsDegrees = ((mins / 60) * 360) + 90;
-    minsHand.style.transform = `rotate(${minsDegrees}deg)`;
-
-    const hour = now.getMinutes();
-    const hourDegrees = ((mins / 12) * 360) + 90;
-    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
-  }
-
-  setInterval(setDate, 1000);
-
-</script>
-</body>
-</html>
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
deleted file mode 100644
index 43991416c1..0000000000
--- a/02 - JS + CSS Clock/index-START.html	
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Document</title>
-</head>
-<body>
-
-
-    <div class="clock">
-      <div class="clock-face">
-        <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
-      </div>
-    </div>
-
-
-  <style>
-    html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
-      background-size:cover;
-      font-family:'helvetica neue';
-      text-align: center;
-      font-size: 10px;
-    }
-
-    body {
-      font-size: 2rem;
-      display:flex;
-      flex:1;
-      min-height: 100vh;
-      align-items: center;
-    }
-
-    .clock {
-      width: 30rem;
-      height: 30rem;
-      border:20px solid white;
-      border-radius:50%;
-      margin:50px auto;
-      position: relative;
-      padding:2rem;
-      box-shadow:
-        0 0 0px 4px rgba(0,0,0,0.1),
-        inset 0 0 0 3px #EFEFEF,
-        inset 0 0 10px black,
-        0 0 10px rgba(0,0,0,0.2);
-    }
-
-    .clock-face {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
-    }
-
-    .hand {
-      width:50%;
-      height:6px;
-      background:black;
-      position: absolute;
-      top:50%;
-      transform-origin: 100%;
-      transform: rotate(90deg);
-      transition: all 0.05s;
-      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
-    }
-
-  </style>
-  <script>
-  const secondHand = document.querySelector('.second-hand');
-  const minsHand = 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 mins = now.getMinutes();
-    const minsDegrees = ((mins / 60) * 360) + 90;
-    minsHand.style.transform = `rotate(${minsDegrees}deg)`;
-
-    const hour = now.getMinutes();
-    const hourDegrees = ((mins / 12) * 360) + 90;
-    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
-  }
-
-  setInterval(setDate, 1000);
-
-  </script>
-</body>
-</html>
diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html
deleted file mode 100644
index 36c420f534..0000000000
--- a/02 - JS + CSS Clock/index.html	
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Document</title>
-</head>
-<body>
-
-
-    <div class="clock">
-      <div class="clock-face">
-        <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
-      </div>
-    </div>
-
-
-  <style>
-    html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
-      background-size:cover;
-      font-family:'helvetica neue';
-      text-align: center;
-      font-size: 10px;
-    }
-
-    body {
-      font-size: 2rem;
-      display:flex;
-      flex:1;
-      min-height: 100vh;
-      align-items: center;
-    }
-
-    .clock {
-      width: 30rem;
-      height: 30rem;
-      border:20px solid white;
-      border-radius:50%;
-      margin:50px auto;
-      position: relative;
-      padding:2rem;
-      box-shadow:
-        0 0 0px 4px rgba(0,0,0,0.1),
-        inset 0 0 0 3px #EFEFEF,
-        inset 0 0 10px black,
-        0 0 10px rgba(0,0,0,0.2);
-    }
-
-    .clock-face {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
-    }
-
-    .hand {
-      width:50%;
-      height:6px;
-      background:black;
-      position: absolute;
-      top:50%;
-      transform-origin: 100%;
-      transform: rotate(90deg);
-      transition: all 0.05s;
-      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
-    }
-</style>
-
-<script>
-  const secondHand = document.querySelector('.second-hand');
-  const minsHand = 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 mins = now.getMinutes();
-    const minsDegrees = ((mins / 60) * 360) + 90;
-    minsHand.style.transform = `rotate(${minsDegrees}deg)`;
-
-    const hour = now.getMinutes();
-    const hourDegrees = ((mins / 12) * 360) + 90;
-    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
-  }
-
-  setInterval(setDate, 1000);
-
-</script>
-</body>
-</html>
diff --git a/29 - Countown Timer/index.html b/29 - Countown Timer/index.html
deleted file mode 100644
index d54f447dd9..0000000000
--- a/29 - Countown Timer/index.html	
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Countdown Timer</title>
-  <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
-  <link rel="stylesheet" href="style.css">
-</head>
-<body>
-  <div class="timer">
-    <div class="timer__controls">
-      <button data-time="20" class="timer__button">20 Secs</button>
-      <button data-time="300" class="timer__button">Work 5</button>
-      <button data-time="900" class="timer__button">Quick 15</button>
-      <button data-time="1200" class="timer__button">Snack 20</button>
-      <button data-time="3600" class="timer__button">Lunch Break</button>
-      <form name="customForm" id="custom">
-        <input type="text" name="minutes" placeholder="Enter Minutes">
-      </form>
-    </div>
-    <div class="display">
-      <h1 class="display__time-left"></h1>
-      <p class="display__end-time"></p>
-    </div>
-  </div>
-
-  <script src="scripts-START.js"></script>
-</body>
-</html>
diff --git a/29 - Countown Timer/scripts-FINISHED.js b/29 - Countown Timer/scripts-FINISHED.js
deleted file mode 100644
index 581cadb270..0000000000
--- a/29 - Countown Timer/scripts-FINISHED.js	
+++ /dev/null
@@ -1,55 +0,0 @@
-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 existing timers
-  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);
-    // check if we should stop it!
-    if(secondsLeft < 0) {
-      clearInterval(countdown);
-      return;
-    }
-    // display it
-    displayTimeLeft(secondsLeft);
-  }, 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;
-  console.log(mins);
-  timer(mins * 60);
-  this.reset();
-});
diff --git a/29 - Countown Timer/scripts-START.js b/29 - Countown Timer/scripts-START.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/29 - Countown Timer/style.css b/29 - Countown Timer/style.css
deleted file mode 100644
index f240799477..0000000000
--- a/29 - Countown Timer/style.css	
+++ /dev/null
@@ -1,82 +0,0 @@
-html {
-  box-sizing: border-box;
-  font-size: 10px;
-  background: #8E24AA;
-  background: linear-gradient(45deg,  #42a5f5 0%,#478ed1 50%,#0d47a1 100%);
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
-body {
-  margin:0;
-  text-align: center;
-  font-family: 'Inconsolata', monospace;
-}
-
-.display__time-left {
-  font-weight: 100;
-  font-size: 20rem;
-  margin: 0;
-  color:white;
-  text-shadow:4px 4px 0 rgba(0,0,0,0.05);
-}
-
-.timer {
-  display:flex;
-  min-height: 100vh;
-  flex-direction:column;
-}
-
-.timer__controls {
-  display: flex;
-}
-
-.timer__controls > * {
-  flex:1;
-}
-
-.timer__controls form {
-  flex:1;
-  display:flex;
-}
-
-.timer__controls input {
-  flex:1;
-  border:0;
-  padding:2rem;
-}
-
-.timer__button {
-  background:none;
-  border:0;
-  cursor: pointer;
-  color:white;
-  font-size: 2rem;
-  text-transform: uppercase;
-  background:rgba(0,0,0,0.1);
-  border-bottom:3px solid rgba(0,0,0,0.2);
-  border-right:1px solid rgba(0,0,0,0.2);
-  padding:1rem;
-  font-family: 'Inconsolata', monospace;
-}
-
-.timer__button:hover,
-.timer__button:focus {
-  background:rgba(0,0,0,0.2);
-  outline:0;
-}
-
-.display {
-  flex:1;
-  display:flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.display__end-time {
-  font-size: 4rem;
-  color:white;
-}

From 305991556d454fb16b0c88707d8f352c2e65e052 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Wed, 1 Mar 2017 21:34:42 -0500
Subject: [PATCH 09/14] Making a gallery and doing some more Array cardio

---
 05 - Flex Panel Gallery/index-START.html |  2 ++
 06 - Type Ahead/index-START.html         | 36 ++++++++++++++++++++++--
 07 - Array Cardio Day 2/index-START.html | 10 +++++++
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..308f87b2a3 100755
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -41,6 +42,7 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
     }
 
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..4bbe23c367 100755
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,8 +15,40 @@
     </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 displayMatches() {
+    const matches = findMatches(this.value, cities);
+    const html = matches.map(place => {
+      const regex = new RegExp(this.value, 'gi');
+      const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+      return `
+        <li>
+          <span class="name">${cityName}, ${place.state}</span>
+          <span class="population">${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>
+</body>
 </html>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..f6953601e9 100755
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,25 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+    const isAdult = people.some((person) => ((new Date()).getFullYear() - person.year >= 19));
+    console.log(isAdult);
+
     // Array.prototype.every() // is everyone 19 or older?
+    const allAdults = people.every((person) => ((new Date()).getFullYear() - 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);
 
     // 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);
+    comments.splice(index, 1);
+    console.table(comments);
 
   </script>
 </body>

From 8a13fbe9329b25632e6033d00879c947bf4c17d2 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Mon, 13 Mar 2017 21:53:01 -0400
Subject: [PATCH 10/14] first attempt at the key sequencing

---
 12 - Key Sequence Detection/index-START.html | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..ae6a8addbb 100755
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,26 @@
 </head>
 <body>
 <script>
+const konamiCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
+let keysPressed = [];
+window.addEventListener('keyup', (e) => {
+    keysPressed.push(e.keyCode);
+
+    // check key sequence against konami code
+    keysPressed.forEach((value, index) => {
+        // do we have a match for all ?
+        if (index == konamiCode.length - 1) {
+            // We do! Cornify!!
+            cornify_add();
+            keysPressed = [];
+        }
+
+        if (value != konamiCode[index]) {
+            // Entered a wrong key, start over.
+            keysPressed = [];
+        }
+    });
+});
 </script>
 </body>
 </html>

From 0db7e6b7fb6c5cc415650d82f7257cf230847940 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Fri, 24 Mar 2017 11:12:28 -0400
Subject: [PATCH 11/14] Doing some localStorage stuff.

---
 15 - LocalStorage/index-START.html | 41 ++++++++++++++++++++++++++++--
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..88a71158d9 100755
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -28,11 +28,48 @@ <h2>LOCAL TAPAS</h2>
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
 
+  function addItem(e) {
+    e.preventDefault();
+    const text = (this.querySelector('[name=item]')).value;
+    const item = {
+        text: text,
+        done: false
+    };
+
+    items.push(item);
+    populateList(items, itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+    this.reset();
+  }
+
+  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 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('');
+  }
+
+  addItems.addEventListener('submit', addItem);
+  populateList(items, itemsList);
+
+  itemsList.addEventListener('click', toggleDone);
 </script>
 
 
 </body>
 </html>
-

From 032fd9804385332ba7f8a2c821a8ba35b6bda3ee Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Fri, 24 Mar 2017 13:39:11 -0400
Subject: [PATCH 12/14] Get a load of this one liner...

---
 17 - Sort Without Articles/index-START.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index 9bbd250a9b..3bc25e1f53 100755
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -44,9 +44,7 @@
   <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'];
-
-
+document.querySelector('#bands').innerHTML = ['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'].sort((a, b) => (a.replace(/^(a |the |an)/i, '').trim() > b.replace(/^(a |the |an)/i, '').trim()) ? 1 : -1).map((b) =>  `<li>${b}</li>`).join('');
 </script>
 
 </body>

From bb6fefc468e38d09bfe028fb3caa85e98a8ab271 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Fri, 24 Mar 2017 13:40:51 -0400
Subject: [PATCH 13/14] Now with less space...

---
 17 - Sort Without Articles/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index 3bc25e1f53..223451f673 100755
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -44,7 +44,7 @@
   <ul id="bands"></ul>
 
 <script>
-document.querySelector('#bands').innerHTML = ['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'].sort((a, b) => (a.replace(/^(a |the |an)/i, '').trim() > b.replace(/^(a |the |an)/i, '').trim()) ? 1 : -1).map((b) =>  `<li>${b}</li>`).join('');
+document.querySelector('#bands').innerHTML=['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'].sort((a, b)=>(a.replace(/^(a |the |an)/i, '').trim()>b.replace(/^(a |the |an)/i, '').trim())?1:-1).map((b)=>`<li>${b}</li>`).join('');
 </script>
 
 </body>

From 27e83e48ebfd91a3c7fc58c515ade5e5771e3eb6 Mon Sep 17 00:00:00 2001
From: Joe Fearnley <joe.fearnley@gmail.com>
Date: Fri, 24 Mar 2017 13:48:29 -0400
Subject: [PATCH 14/14] Fixing something...

---
 17 - Sort Without Articles/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index 223451f673..8d875dae4c 100755
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -44,7 +44,7 @@
   <ul id="bands"></ul>
 
 <script>
-document.querySelector('#bands').innerHTML=['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'].sort((a, b)=>(a.replace(/^(a |the |an)/i, '').trim()>b.replace(/^(a |the |an)/i, '').trim())?1:-1).map((b)=>`<li>${b}</li>`).join('');
+document.querySelector('#bands').innerHTML = ['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'].sort((a,b)=>a.replace(/^(a |the |an )/i, '').trim()>b.replace(/^(a |the |an )/i, '').trim()?1:-1).map((b)=>`<li>${b}</li>`).join('');
 </script>
 
 </body>