From 2de2047050c80621c4ed4dc065a0cd56c1fce8f7 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Wed, 21 Dec 2016 08:14:04 -0600
Subject: [PATCH 01/41] Update script in html for drum kit and update styling

---
 01 - JavaScript Drum Kit/index-START.html | 19 +++++++++++++++++++
 01 - JavaScript Drum Kit/style.css        |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..65f5dd6e73 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,25 @@
 
 <script>
 
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return;
+    e.target.classList.remove('playing');
+  }
+
+  function playSound(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    if (!audio) return;
+
+    key.classList.add('playing');
+    audio.currentTime = 0;
+    audio.play();
+  }
+
+  const keys = Array.from(document.querySelectorAll('.key'));
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  window.addEventListener('keydown', playSound);
+
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 3e0a320b37..6798a9fe16 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -28,7 +28,7 @@ body,html {
   text-align: center;
   color:white;
   background:rgba(0,0,0,0.4);
-  text-shadow:0 0 5px black;
+  text-shadow: 0 0 5px black;
 }
 
 .playing {

From 8aaebc5e671488fbb91f143830ea47acc25e49c5 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Wed, 21 Dec 2016 09:03:10 -0600
Subject: [PATCH 02/41] Add getDate for clock functionality and style for
 transforms

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

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..339f96763b 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,40 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%; /*Changes the origin the transform will pivot from to the far right*/
+      transform: rotate(90deg); /*So the clock starts at 12:00*/
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0, 1.66, 0.58, 1);
     }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const minHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
 
+    function setDate() {
+      const now = new Date();
+
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds / 60) * 360) + 90; /*The extra 90 degrees is for the default 90 degree rotation to get 12:00*/
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      const minutes = now.getMinutes();
+      const minutesDegrees = ((minutes / 60) * 360) + 90;
+
+      minHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+      const hours = now.getMinutes();
+      const hoursDegrees = ((minutes / 12) * 360) + 90;
+
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+
+      console.log(hours, minutes, seconds);
+    }
+
+    setInterval(setDate, 1000);
 
   </script>
 </body>

From 26009cf0cd6be5b414fd505d635a4b75480fad89 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Tue, 27 Dec 2016 13:28:55 -0600
Subject: [PATCH 03/41] Add functionality to CSS variables.

---
 03 - CSS Variables/index-START.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..d317850551 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,6 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .hl {
+      color: var(--base);
+    }
 
     /*
       misc styles, nothing to do with CSS variables
@@ -48,6 +63,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+      const suffix = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>

From 9121c3b414a9def61b32330369890be3aaccc008 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Wed, 28 Dec 2016 21:10:05 -0600
Subject: [PATCH 04/41] Completed cardio Day excercises

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..105ce17126 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,28 +33,78 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const bornIn1500s = inventors.filter(inventor => {
+      return inventor.year >= 1500 && inventor.year < 1600 ? inventor : '';
+    });
+
+    console.table(bornIn1500s);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const fullName = inventors.map(inventor => {
+      return `${inventor.first} ${inventor.last}`;
+    });
+
+    console.log('+++++++++++++++');
+    console.log(fullName);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const firstBorn = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
+
+    console.log('+++++++++++++++');
+    console.log(firstBorn);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const totalYears = inventors.reduce((sum, inventor) => {
+      return sum + (inventor.passed - inventor.year);
+    }, 0);
+
+    console.log(totalYears);
 
     // 5. Sort the inventors by years lived
+    const oldestFirst = inventors.sort((a, b) => {
+      a.yearsLived = (a.passed - a.year);
+      b.yearsLived = (b.passed - b.year);
+      return (a.passed - a.year) < (b.passed - b.year) ? 1 : -1;
+    });
+
+    console.log('+++++++++++++++');
+    console.table(oldestFirst);
 
     // 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 = [...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 alphabeticSort = people.sort((prev, next) => {
+      const [ prevLast, prevFirst ] = prev.split(', ');
+      const [ nextLast, nextFirst ] = next.split(', ');
+      return prevLast > nextLast ? 1 : -1;
+    });
 
+    console.log('+++++++++++++++');
+    console.log(alphabeticSort);
     // 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', 'tricycle', 'tricycle', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
+
+    const transportation = data.reduce((obj, item) => {
+      if (!obj[item]) {
+        obj[item] = 0;
+      }
+
+      obj[item]++;
+      return obj;
+    }, {});
+
+    console.log(transportation);
 
   </script>
 </body>

From 9c8be9d09534aac8dc23ae6a35f8e4117b4dcd85 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Thu, 29 Dec 2016 16:01:37 -0600
Subject: [PATCH 05/41] coded panel gallery based off excercise

---
 05 - Flex Panel Gallery/index-START.html | 42 ++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..611cccb6d0 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -22,13 +22,14 @@
     }
 
     .panels {
-      min-height:100vh;
+      height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
       background:#6B0F9C;
-      box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
+      box-shadow:inset 0 0 0 2px rgba(255,255,255,0.2);
       color:white;
       text-align: center;
       align-items:center;
@@ -41,6 +42,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -50,12 +56,23 @@
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
+    /* flex children */
     .panel > * {
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      /*border: 1px solid red;*/
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
+    .panel > *:first-child { transform: translateY(-100%); }
+    .panel.open-active > *:first-child { transform: translateY(0); }
+    .panel > *:last-child { transform: translateY(100%); }
+    .panel.open-active > *:last-child { transform: translateY(0); }
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -68,6 +85,7 @@
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -107,6 +125,26 @@
   </div>
 
   <script>
+  const panels = document.querySelectorAll('.panel');
+
+  function toggleOpen() {
+    // panels.forEach(panel => {
+    //   if (panel.classList.includes('open')) {
+    //     panel.classList.remove('open');
+    //   }
+    // })
+    this.classList.toggle('open');
+    // this.classList.toggle('open-active');
+  }
+
+  function toggleActive(e) {
+    if (e.propertyName.includes('flex')) {
+      this.classList.toggle('open-active');
+    }
+  }
+
+  panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+  panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
 
   </script>
 

From ec5fe24081b89d98df350688655280d155855b22 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Sat, 31 Dec 2016 12:20:25 -0600
Subject: [PATCH 06/41] Completed coding excercise, everything works as it
 should

---
 06 - Type Ahead/index-START.html | 38 ++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..cfa10c96aa 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,44 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities = [];
+fetch(endpoint)
+  .then(blob => blob.json())
+  .then(data => cities.push(...data));
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    // Find the city or state that matches what was typed
+    const regex = new RegExp(wordToMatch, 'gi');
+    return place.city.match(regex) || place.state.match(regex);
+  });
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function displayMatches() {
+  const matchArray = findMatches(this.value, cities);
+  const html = matchArray.map(place => {
+    const regex = new RegExp(this.value, 'gi');
+    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+    return `
+      <li>
+        <span class="name">${cityName}, ${stateName}</span>
+        <span class="population">${numberWithCommas(place.population)}</span>
+      </li>
+    `
+  }).join('');
+  suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches);
+searchInput.addEventListener('keyup', displayMatches);
 </script>
   </body>
 </html>

From 1a1eda0e9ae8ebbe963a1c599a9c5b7df8286a3a Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Sat, 31 Dec 2016 13:36:40 -0600
Subject: [PATCH 07/41] completed challengefor arrays.

---
 07 - Array Cardio Day 2/index-START.html | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..55769eb755 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,30 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
+    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.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);
+
+    const newComments = [
+      ...comments.slice(0, index),
+      ...comments.slice(index + 1)
+    ];
 
   </script>
 </body>

From 45d3079897bb59188b2ebd6f1eb95d8d66bd6a24 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Sat, 31 Dec 2016 16:19:48 -0600
Subject: [PATCH 08/41] Completed excercise.

---
 08 - Fun with HTML5 Canvas/index-START.html | 49 +++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..5e4a2590f5 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,55 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+const canvas = document.querySelector('#draw');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+ctx.strokeStyle = "#BADA55";
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.lineWidth = 100;
+// ctx.globalCompositeOperation = 'multiply';
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let direction = true;
+
+function draw(e) {
+	if (!isDrawing) return;
+	console.log(e);
+	ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+	ctx.beginPath();
+	// Start from
+	ctx.moveTo(lastX, lastY);
+	// Go to
+	ctx.lineTo(e.offsetX, e.offsetY);
+	ctx.stroke();
+	[lastX, lastY] = [e.offsetX, e.offsetY];
+	hue++;
+	if (hue >= 360) {
+		hue = 0;
+	}
+	if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+		direction = !direction;
+	}
+	if (direction) {
+		ctx.lineWidth++;
+	} else {
+		ctx.lineWidth--;
+	}
+	
+}
+
+canvas.addEventListener('mousedown', (e) => {
+	isDrawing = true;
+	[lastX, lastY] = [e.offsetX, e.offsetY];
+});
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+canvas.addEventListener('mouseout', () => isDrawing = false);
 </script>
 
 <style>

From c8520010c51f9e3a4cbc50269dcdf3e28ab472aa Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Sat, 31 Dec 2016 17:08:55 -0600
Subject: [PATCH 09/41] Completed excercises along with video

---
 09 - Dev Tools Domination/index-START.html | 28 ++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..eec1079452 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,56 @@
     }
 
     // Regular
+    console.log('Hello');
 
     // Interpolated
+    var variable = 'Great';
+    console.log(`I am a ${variable}`);
 
     // Styled
+    console.log('%c This is it.', 'font-size: 50px; background: red; text-shadow: 2px 2px 0 grey');
 
     // warning!
+    console.warn('OH NOOOO');
 
     // Error :|
+    console.error('OH NOOOO');
 
     // Info
+    console.info('OH NOOOO');
 
     // Testing
+    const p = document.querySelector('p');
+    console.assert(p.classList.contains('ouch', 'nope'));
 
     // clearing
+    console.clear();
 
     // Viewing DOM Elements
+    console.dir(p);
 
     // Grouping together
+    dogs.forEach(dog => {
+      console.groupCollapsed(`${dog.name}`);
+      console.log(`This is ${dog.name}.`);
+      console.log(`${dog.name} is ${dog.age} years old`);
+      console.groupEnd(`${dog.name}`);
+    });
 
     // counting
+    console.count('Caden');
+    console.count('Caden');
+    console.count('Caden');
+    console.count('Caden');
 
     // timing
+    console.time('fetching data');
+    fetch('https://api.github.com/users/ccalbaugh')
+      .then(data => data.json())
+      .then(data => {
+        console.timeEnd('fetching data');
+        console.log(data);
+      });
 
   </script>
 </body>

From 1b01611a3e41a5424710584a791941e8a87a1d3f Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Sun, 1 Jan 2017 13:09:53 -0600
Subject: [PATCH 10/41] Completed excercise.

---
 .../index-START.html                          | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index eb7ed310bb..6fc6d6a9a3 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,32 @@
   </div>
 
 <script>
+  const items = [...document.querySelectorAll('.item')];
+  const checkboxes = [...document.querySelectorAll(' .inbox input[type="checkbox"]')];
+
+  let lastChecked;
+
+  function handleCheck(e) {
+    if (e.shiftKey && this.checked) {
+      let inBetween = false;
+      checkboxes.forEach(checkbox => {
+        if (checkbox === this || checkbox === lastChecked) {
+          inBetween = !inBetween;
+        }
+        if (inBetween) {
+          checkbox.checked = true;
+        }
+      })
+      console.log(e);
+      console.log(this);
+    }
+
+    lastChecked = this;
+  }
+
+  checkboxes.forEach(checkbox => {
+    checkbox.addEventListener('click', handleCheck);
+  });
 </script>
 </body>
 </html>

From d0afd99cbbb1abcfa021d74e84eb837c3d60cacb Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Mon, 2 Jan 2017 11:41:10 -0600
Subject: [PATCH 11/41] Completed excercise

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

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..372a64cb8c 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,19 @@
 </head>
 <body>
 <script>
+
+const pressed = [];
+const secretCode = 'caden';
+
+window.addEventListener('keyup', (e) => {
+	console.log(e.key);
+	pressed.push(e.key);
+	pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
+	if (pressed.join('').includes(secretCode)) {
+		cornify_add();
+	}
+	console.log(pressed);
+});
 </script>
 </body>
 </html>

From c41856fc674e827ead43672b652c07260d6b3624 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Mon, 2 Jan 2017 12:27:42 -0600
Subject: [PATCH 12/41] Completed Excercise

---
 13 - Slide in on Scroll/index-START.html | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..3af39ce6e5 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -58,6 +58,27 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const slideImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      slideImages.forEach(sliderImage => {
+        // Halfway through the image
+        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
+        // The 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');
+        }
+      });
+      console.log(e);
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>

From 170f97de2b2487270491187cd4bf743111b5512b Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Mon, 2 Jan 2017 19:36:45 -0600
Subject: [PATCH 13/41] Completed Challenge

---
 .../index-START.html                          | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index 4da1bac2ea..ef74725a8c 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -8,13 +8,28 @@
 
   <script>
     // start with strings, numbers and booleans
+    let age = 100;
+    let age2 = age;
+    console.log(age, age2);
+    age = 200;
+    console.log(age);
+
+    let name = 'Caden';
+    let name2 = name;
+    console.log(name, name2);
+    name = 'Caden Albaugh';
+    console.log(name, name2);
 
     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+    const team = players;
+
+    console.log(team, players);
 
     // You might think we can just do something like this:
+    team[3] = 'lux';
 
     // however what happens when we update that array?
 
@@ -25,27 +40,49 @@
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
 
     // So, how do we fix this? We take a copy instead!
+    const team2 = players.slice();
 
     // one day
 
     // or create a new array and concat the old one in
+    const team3 = [].concat(players);
 
     // or use the new ES6 Spread
+    const team4 = [...players];
+
+    const team5 = Array.from(players);
 
     // now when we update it, the original one isn't changed
 
     // The same thing goes for objects, let's say we have a person object
 
     // with Objects
+    const person = {
+        name: 'Wes Bos',
+        age: 80
+    };
 
     // and think we make a copy:
+    const captain = person;
+    captain.number = 99;
 
     // how do we take a copy instead?
+    const capt2 = Object.assign({}, person, { number: 99 });
 
     // We will hopefully soon see the object ...spread
+    capt3 = {...person}; // This is shallow, meaning it will only go one level deep
 
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
 
+    const wes = {
+        name: 'Wes',
+        age: 100,
+        social: {
+        twitter: '@wesbos',
+        facebook: 'wesbos.developer'
+      }
+    };
+
   </script>
 
 </body>

From 24c6889d61af6991161a2554104073b20224e42b Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Mon, 2 Jan 2017 21:12:12 -0600
Subject: [PATCH 14/41] Completed Excercise

---
 15 - LocalStorage/index-START.html | 49 +++++++++++++++++++++++++++++-
 15 - LocalStorage/style.css        | 14 +++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..0ddbcf0bcc 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,12 +23,59 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <div class="button-wrapper">
+      <button class="check-all" type="button">Check All</button>
+      <button class="uncheck-all" type="button">Uncheck All</button>
+     <button class="clear-all" type="button">Clear All</button>
+    </div>
   </div>
 
 <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, // ES6 shorthand property
+      done: false
+    };
+
+    items.push(item);
+    populateList(items, itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+    this.reset();
+  }
+
+  function populateList(plates = [], platesList) {
+    platesList.innerHTML = plates.map(( plate, i ) => {
+      return `
+        <li>
+          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
+          <label for="item${i}">${plate.text}</label>
+        </li>
+      `;
+    }).join('');
+  }
+
+  function toggleDone(e) {
+    if (!e.target.matches('input')) return; // skip this unless it's an input
+    const el = e.target;
+    const index = el.dataset.index;
+    items[index].done = !items[index].done;
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+
+
+  populateList(items, itemsList);
 
 </script>
 
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
index ea5bab179c..2c50c86a7f 100644
--- a/15 - LocalStorage/style.css	
+++ b/15 - LocalStorage/style.css	
@@ -76,3 +76,17 @@
       outline:0;
       border:1px solid rgba(0,0,0,0.1);
     }
+
+    .button-wrapper {
+      display: flex;
+      margin: 10px 0;
+    }
+
+    button {
+      width: calc(33.333% - 20px);
+      flex: 1;
+      /*justify-content: space-between;*/
+      padding:10px;
+      outline:0;
+      border:1px solid rgba(0,0,0,0.1);
+    }

From 6758537456b85e35c7bf0e4cb762e005a0d83add Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Mon, 2 Jan 2017 21:28:21 -0600
Subject: [PATCH 15/41] Add checkAllButton and corresponding function

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

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index 0ddbcf0bcc..d75d5e73bd 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -34,7 +34,9 @@ <h2>LOCAL TAPAS</h2>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
   const items = JSON.parse(localStorage.getItem('items')) || [];
-
+  const checkAllButton = document.querySelector('.check-all');
+  // const uncheckAllButton = document.querySelector('.uncheck-all');
+  // const clearAllButton = document.querySelector('.clear-all');
 
   function addItem(e) {
     e.preventDefault();
@@ -70,10 +72,38 @@ <h2>LOCAL TAPAS</h2>
     populateList(items, itemsList);
   }
 
+  function checkAll() {
+    var list = JSON.parse(localStorage.getItem('items'));
+    var checkedList = list.map(item => {
+      item.done = true;
+      return item;
+    });
+
+    localStorage.setItem('items', JSON.stringify(checkedList));
+    populateList(checkedList, itemsList);
+  }
+
+  // function uncheckAll() {
+  //   var list = JSON.parse(localStorage.getItem('items'));
+  //   var checkedList = list.map(item => {
+  //     item.done = false;
+  //     return item;
+  //   });
+
+  //   localStorage.setItem('items', JSON.stringify(checkedList));
+  //   populateList(checkedList, itemsList);
+  // }
+
+  // function clearAll() {
+  //   localStorage.removeItem('items');
+  //   populateList([], itemsList);
+  // }
 
   addItems.addEventListener('submit', addItem);
   itemsList.addEventListener('click', toggleDone);
-
+  checkAllButton.addEventListener('click', checkAll);
+  // uncheckAllButton.addEventListener('click', uncheckAll);
+  // clearAllButton.addEventListener('click', clearAll);
 
   populateList(items, itemsList);
 

From 877728f3f4b3f4ff949c2ba9b21e8312f3f64267 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Mon, 2 Jan 2017 21:29:10 -0600
Subject: [PATCH 16/41] Add uncheckAllButton and corresponding function

---
 15 - LocalStorage/index-START.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d75d5e73bd..1db2ad40d3 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -35,7 +35,7 @@ <h2>LOCAL TAPAS</h2>
   const itemsList = document.querySelector('.plates');
   const items = JSON.parse(localStorage.getItem('items')) || [];
   const checkAllButton = document.querySelector('.check-all');
-  // const uncheckAllButton = document.querySelector('.uncheck-all');
+  const uncheckAllButton = document.querySelector('.uncheck-all');
   // const clearAllButton = document.querySelector('.clear-all');
 
   function addItem(e) {
@@ -83,16 +83,16 @@ <h2>LOCAL TAPAS</h2>
     populateList(checkedList, itemsList);
   }
 
-  // function uncheckAll() {
-  //   var list = JSON.parse(localStorage.getItem('items'));
-  //   var checkedList = list.map(item => {
-  //     item.done = false;
-  //     return item;
-  //   });
+  function uncheckAll() {
+    var list = JSON.parse(localStorage.getItem('items'));
+    var checkedList = list.map(item => {
+      item.done = false;
+      return item;
+    });
 
-  //   localStorage.setItem('items', JSON.stringify(checkedList));
-  //   populateList(checkedList, itemsList);
-  // }
+    localStorage.setItem('items', JSON.stringify(checkedList));
+    populateList(checkedList, itemsList);
+  }
 
   // function clearAll() {
   //   localStorage.removeItem('items');
@@ -102,7 +102,7 @@ <h2>LOCAL TAPAS</h2>
   addItems.addEventListener('submit', addItem);
   itemsList.addEventListener('click', toggleDone);
   checkAllButton.addEventListener('click', checkAll);
-  // uncheckAllButton.addEventListener('click', uncheckAll);
+  uncheckAllButton.addEventListener('click', uncheckAll);
   // clearAllButton.addEventListener('click', clearAll);
 
   populateList(items, itemsList);

From 2d2312207af4568f8604ce65084e62aae2ba42a1 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Mon, 2 Jan 2017 21:30:07 -0600
Subject: [PATCH 17/41] Add clearAllButton and corresponding function:

---
 15 - LocalStorage/index-START.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index 1db2ad40d3..da30ba6dbe 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -36,7 +36,7 @@ <h2>LOCAL TAPAS</h2>
   const items = JSON.parse(localStorage.getItem('items')) || [];
   const checkAllButton = document.querySelector('.check-all');
   const uncheckAllButton = document.querySelector('.uncheck-all');
-  // const clearAllButton = document.querySelector('.clear-all');
+  const clearAllButton = document.querySelector('.clear-all');
 
   function addItem(e) {
     e.preventDefault();
@@ -94,16 +94,16 @@ <h2>LOCAL TAPAS</h2>
     populateList(checkedList, itemsList);
   }
 
-  // function clearAll() {
-  //   localStorage.removeItem('items');
-  //   populateList([], itemsList);
-  // }
+  function clearAll() {
+    localStorage.removeItem('items');
+    populateList([], itemsList);
+  }
 
   addItems.addEventListener('submit', addItem);
   itemsList.addEventListener('click', toggleDone);
   checkAllButton.addEventListener('click', checkAll);
   uncheckAllButton.addEventListener('click', uncheckAll);
-  // clearAllButton.addEventListener('click', clearAll);
+  clearAllButton.addEventListener('click', clearAll);
 
   populateList(items, itemsList);
 

From c17e1acc34eaa5fda6ce11c54c3197080b748326 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Tue, 3 Jan 2017 08:32:57 -0600
Subject: [PATCH 18/41] Updated button styles

---
 15 - LocalStorage/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
index 2c50c86a7f..48c00f45b8 100644
--- a/15 - LocalStorage/style.css	
+++ b/15 - LocalStorage/style.css	
@@ -85,7 +85,7 @@
     button {
       width: calc(33.333% - 20px);
       flex: 1;
-      /*justify-content: space-between;*/
+      justify-content: space-between;
       padding:10px;
       outline:0;
       border:1px solid rgba(0,0,0,0.1);

From 49bc25e18f4e5e6a13720f88d49ec2b19a26d216 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Tue, 3 Jan 2017 15:25:28 -0600
Subject: [PATCH 19/41] Completed challenge

---
 16 - Mouse Move Shadow/index-start.html | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..c5b7cbae41 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,31 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const walk = 100; // 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(255, 255, 0, 0.7),
+      ${yWalk * -1}px ${xWalk}px 0 rgba(70, 170, 110, 0.7)
+    `;
+  }
+
+  hero.addEventListener('mousemove', shadow);
 </script>
 </body>
 </html>

From 2c124c2698a2bd4e6a8a4f151466948d900827f5 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Wed, 4 Jan 2017 12:38:15 -0600
Subject: [PATCH 20/41] Completed challenge to strip and sort names

---
 17 - Sort Without Articles/index-START.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..aac7ecd66b 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -45,6 +45,16 @@
 <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'];
 
+function strip(bandNames) {
+  return bandNames.replace(/^(a |the |an )/i, '').trim();
+}
+
+const sortedBands = bands.sort( (a, b) => strip(a) > strip(b) ? 1 : -1 );
+
+document.querySelector('#bands').innerHTML =
+  sortedBands
+    .map(band => `<li>${band}</li>`)
+    .join('');
 
 </script>
 

From ecf22dfcdb67422aa5eebd5759d80f1c4f7be39e Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Fri, 6 Jan 2017 15:00:56 -0600
Subject: [PATCH 21/41] Completed Excercise.

---
 .../index-START.html                          | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index 3eaee0f3ef..01680b82e1 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,25 @@
     </li>
 
 <script>
+  const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
+
+  const seconds = timeNodes
+    .map(node => node.dataset.time)
+    .map(timeCode => {
+      const [mins, secs] = timeCode.split(':')
+        .map(parseFloat)
+      return (mins * 60) + secs;
+    })
+    .reduce((total, seconds) => total + seconds);
+
+    let secondsLeft = seconds;
+    const hours = Math.floor(seconds / 3600);
+    secondsLeft = secondsLeft % 3600;
+    const minutes = Math.floor(secondsLeft / 60);
+    secondsLeft = secondsLeft % 60;
+
+  console.log(hours, minutes, secondsLeft);
+
 </script>
 </body>
 </html>

From cba54cf21094c0750fc55c8a50b711755434214a Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Wed, 11 Jan 2017 17:42:53 -0600
Subject: [PATCH 22/41] Completed Excercise.

---
 21 - Geolocation/index-START.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
index d794c144ba..bd523c1d7c 100644
--- a/21 - Geolocation/index-START.html	
+++ b/21 - Geolocation/index-START.html	
@@ -65,8 +65,8 @@ <h1 class="speed">
       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!!!');
+      console.log(err);
+      alert("IT'S TIME TO GROW UP AND ACCEPT IT!!!");
     });
 
   </script>

From ff4f4292bb777bdda0f563124d9a4cc785276495 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Wed, 11 Jan 2017 17:46:26 -0600
Subject: [PATCH 23/41] completed excercise.

---
 10 - Hold Shift and Check Checkboxes/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index 6fc6d6a9a3..854d569075 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -105,7 +105,7 @@
 
 <script>
   const items = [...document.querySelectorAll('.item')];
-  const checkboxes = [...document.querySelectorAll(' .inbox input[type="checkbox"]')];
+  const checkboxes = [...document.querySelectorAll('.inbox input[type="checkbox"]')];
 
   let lastChecked;
 

From a3b749ea1ee0c8c9d3c6f37385e73d7cf7b7a993 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Wed, 11 Jan 2017 17:47:06 -0600
Subject: [PATCH 24/41] Completed excercise

---
 11 - Custom Video Player/scripts.js | 54 +++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..0c0e8bb0bb 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,54 @@
+/* Get the elements */
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+
+/* Build the functions */
+function togglePlay() {
+	const method = video.paused ? 'play' : 'pause';
+	video[method]();
+}
+
+function updateButton() {
+	const icon = this.paused ? '►' : '❚ ❚';
+	toggle.textContent = icon;
+	console.log('Update button');
+}
+
+function skip() {
+	video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRangeUpdate() {
+	video[this.name] = this.value;
+}
+
+function handleProgress() {
+	const percent = (video.currentTime / video.duration) * 100;
+	progressBar.style.flexBasis = `${percent}%`;
+}
+
+function scrub(e) {
+	const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+	video.currentTime = scrubTime;
+}
+
+/* Hook up event listeners */
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+
+toggle.addEventListener('click', togglePlay);
+skipButtons.forEach(button => button.addEventListener('click', skip));
+ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
+
+let mouseDown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => mouseDown && scrub(e)});
+progress.addEventListener('mousedown', () => mouseDown = true);
+progress.addEventListener('mouseup', () => mouseDown = false);
\ No newline at end of file

From 5fe528186ac6096873aa09244636e023f499a7a8 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Wed, 11 Jan 2017 19:39:00 -0600
Subject: [PATCH 25/41] Completed Excercise.

---
 .../index-START.html                          | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..8c783d653b 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,7 +26,28 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+    const highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+
+    function highlightLink() {
+      const linkCoords = this.getBoundingClientRect();
+      console.log(linkCoords);
+      const coords = {
+        width: linkCoords.width,
+        height: linkCoords.height,
+        top: linkCoords.top + window.scrollY,
+        left: linkCoords.left + window.scrollX
+      };
+
+      highlight.style.width = `${coords.width}px`;
+      highlight.style.height = `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
+    }
+
+    triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
+
   </script>
 </body>
 </html>

From f2ff9546c5773231a704848684cd6930f9e37e5c Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Fri, 13 Jan 2017 13:52:47 -0600
Subject: [PATCH 26/41] Completed Excercise.

---
 20 - Speech Detection/index-START.html | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index d3395cca35..d6e4f6b9a4 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -12,6 +12,31 @@
 <script>
   window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
+  const recognition = new SpeechRecognition();
+  recognition.interimResults = true;
+
+  let p = document.createElement('p');
+  const words = document.querySelector('.words');
+  words.appendChild(p);
+
+  recognition.addEventListener('result', e => {
+    const transcript = Array.from(e.results)
+      .map(result => result[0])
+      .map(result => result.transcript)
+      .join('');
+
+    p.textContent = transcript;
+    if(e.results[0].isFinal) {
+      p = document.createElement('p');
+      words.appendChild(p);
+    }
+
+    console.log(transcript);
+  });
+
+  recognition.addEventListener('end', recognition.start);
+
+  recognition.start();
 
 </script>
 

From 461620985a92ad5725671f967018e1c035dbcb35 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Sat, 14 Jan 2017 16:21:55 -0600
Subject: [PATCH 27/41] Started excercise and committing to pull to another
 machine.

---
 23 - Speech Synthesis/index-START.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..e5a5579ec1 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -35,6 +35,8 @@ <h1>The Voiceinator 5000</h1>
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+
+  msg.text = document.querySelector('[name="text"]').value;
 </script>
 
 </body>

From 1166cce4e6b80453d575c3210ccafe587fc8e18f Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Sat, 14 Jan 2017 17:37:44 -0600
Subject: [PATCH 28/41] Completed excercies.  Feeling fit.

---
 23 - Speech Synthesis/index-START.html | 33 ++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..0bf4bde38e 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -35,6 +35,39 @@ <h1>The Voiceinator 5000</h1>
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+  msg.text = document.querySelector('[name="text"]').value;
+
+  function populateVoices() {
+    voices = this.getVoices();
+    voicesDropdown.innerHTML = voices
+      .filter(voice => voice.lang.includes('en'))
+      .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
+      .join('');
+  }
+
+  function setVoice() {
+    msg.voice = voices.find(voice => voice.name === this.value);
+    toggle();
+  }
+
+  function toggle(startOver = true) {
+    speechSynthesis.cancel();
+    if (startOver) {
+      speechSynthesis.speak(msg);
+    }
+  }
+
+  function setOption() {
+    console.log(this.name, this.value);
+    msg[this.name] = this.value;
+    toggle();
+  }
+
+  speechSynthesis.addEventListener('voiceschanged', populateVoices);
+  voicesDropdown.addEventListener('change', setVoice);
+  options.forEach(option => option.addEventListener('change', setOption));
+  speakButton.addEventListener('click', toggle);
+  stopButton.addEventListener('click', () => toggle(false));
 </script>
 
 </body>

From 2634f40babb3cc56c19b0b287698f372b91caa75 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Sun, 15 Jan 2017 12:17:03 -0600
Subject: [PATCH 29/41] Updated script for sticky nav excercise.

---
 24 - Sticky Nav/index-START.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..4b2b1993ef 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,7 +54,18 @@ <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.classList.add('fixed-nav');
+    } else {
+      document.body.classList.remove('fixed-nav');
+    }
+  }
+
+  window.addEventListener('scroll', fixNav);
 </script>
 
 </body>

From d1a5d946ba79c8161022e2feb129adb6f275865e Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Sun, 15 Jan 2017 13:08:19 -0600
Subject: [PATCH 30/41] Completed sticky nav excercise.

---
 24 - Sticky Nav/index-START.html |  2 ++
 24 - Sticky Nav/style-START.css  | 13 +++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index 4b2b1993ef..065f22947a 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -59,8 +59,10 @@ <h1>A story about getting lost.</h1>
 
   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');
     }
   }
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..a3db8925c4 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -23,6 +23,10 @@ body {
   transition: transform 0.5s;
 }
 
+.fixed-nav .site-wrap {
+  transform: scale(1);
+}
+
 header {
   text-align: center;
   height:50vh;
@@ -48,6 +52,11 @@ 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;
@@ -72,6 +81,10 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  max-width: 500px;
+}
+
 li.logo a {
   color:black;
 }

From 329ac07dfaaaf1c6c1a90646c7a307656f2a169d Mon Sep 17 00:00:00 2001
From: Caden Albaugh <Cadenalbaugh@gmail.com>
Date: Sun, 15 Jan 2017 13:11:57 -0600
Subject: [PATCH 31/41] Merged from separate computer.

---
 20 - Speech Detection/index-START.html | 25 ++++++++++++++++++
 23 - Speech Synthesis/index-START.html | 36 ++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index d3395cca35..d6e4f6b9a4 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -12,6 +12,31 @@
 <script>
   window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
+  const recognition = new SpeechRecognition();
+  recognition.interimResults = true;
+
+  let p = document.createElement('p');
+  const words = document.querySelector('.words');
+  words.appendChild(p);
+
+  recognition.addEventListener('result', e => {
+    const transcript = Array.from(e.results)
+      .map(result => result[0])
+      .map(result => result.transcript)
+      .join('');
+
+    p.textContent = transcript;
+    if(e.results[0].isFinal) {
+      p = document.createElement('p');
+      words.appendChild(p);
+    }
+
+    console.log(transcript);
+  });
+
+  recognition.addEventListener('end', recognition.start);
+
+  recognition.start();
 
 </script>
 
diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e5a5579ec1..76f7ba39d4 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -35,8 +35,44 @@ <h1>The Voiceinator 5000</h1>
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+<<<<<<< HEAD
 
   msg.text = document.querySelector('[name="text"]').value;
+=======
+  msg.text = document.querySelector('[name="text"]').value;
+
+  function populateVoices() {
+    voices = this.getVoices();
+    voicesDropdown.innerHTML = voices
+      .filter(voice => voice.lang.includes('en'))
+      .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
+      .join('');
+  }
+
+  function setVoice() {
+    msg.voice = voices.find(voice => voice.name === this.value);
+    toggle();
+  }
+
+  function toggle(startOver = true) {
+    speechSynthesis.cancel();
+    if (startOver) {
+      speechSynthesis.speak(msg);
+    }
+  }
+
+  function setOption() {
+    console.log(this.name, this.value);
+    msg[this.name] = this.value;
+    toggle();
+  }
+
+  speechSynthesis.addEventListener('voiceschanged', populateVoices);
+  voicesDropdown.addEventListener('change', setVoice);
+  options.forEach(option => option.addEventListener('change', setOption));
+  speakButton.addEventListener('click', toggle);
+  stopButton.addEventListener('click', () => toggle(false));
+>>>>>>> 1166cce4e6b80453d575c3210ccafe587fc8e18f
 </script>
 
 </body>

From 812bff9481604939693f5be0bef84396d065c1b0 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Sun, 15 Jan 2017 19:20:58 -0600
Subject: [PATCH 32/41] completed capturing and propogation excercise.

---
 .../index-START.html                                   | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
index 98f5e070c4..3b4b662e9c 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -39,7 +39,17 @@
 
 <button></button>
 <script>
+  const divs = document.querySelectorAll('div');
 
+  function logText(e) {
+    console.log(this.classList.value);
+    e.stopPropagation();
+  }
+
+  divs.forEach(div => div.addEventListener('click', logText, {
+    capture: false,
+    once: true
+  }));
 </script>
 </body>
 </html>

From e89b578eb9649dc34d46bcebc48dedf5a55f41da Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Mon, 16 Jan 2017 12:14:09 -0600
Subject: [PATCH 33/41] Coded a replica of Stripes follow along nav.

---
 26 - Stripe Follow Along Nav/index-START.html | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 9780d0d1ac..e251da9469 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -134,8 +134,6 @@ <h2>Cool</h2>
     opacity: 1;
   }
 
-
-
   .dropdownBackground {
     width:100px;
     height:100px;
@@ -208,6 +206,39 @@ <h2>Cool</h2>
 </style>
 
 <script>
+  const triggers = document.querySelectorAll('.cool > li');
+  const background = document.querySelector('.dropdownBackground');
+  const nav = document.querySelector('.top');
+
+  function handleEnter() {
+    this.classList.add('trigger-enter');
+    setTimeout(() => this.classList.add('trigger-enter-active'), 150);
+    background.classList.add('open');
+
+    const dropdown = this.querySelector('.dropdown');
+    const dropdownCoords = dropdown.getBoundingClientRect();
+    const navCoords = nav.getBoundingClientRect();
+    console.log(dropdownCoords);
+
+    const coords = {
+      height: dropdownCoords.height,
+      width: dropdownCoords.width,
+      top: dropdownCoords.top - navCoords.top,
+      left: dropdownCoords.left - navCoords.left,
+    };
+
+    background.style.setProperty('width', `${coords.width}px`);
+    background.style.setProperty('height', `${coords.height}px`);
+    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
+  }
+
+  function handleLeave() {
+    this.classList.remove('trigger-enter', 'trigger-enter-active');
+    background.classList.remove('open');
+  }
+
+  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
+  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
 </script>
 
 </body>

From f62c5aa3928dd4d72140ab6252c51862db852b0c Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Mon, 16 Jan 2017 12:19:07 -0600
Subject: [PATCH 34/41] Added short circuit in setTimeout to fix nav
 containment issues.

---
 26 - Stripe Follow Along Nav/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index e251da9469..b398dd4c8d 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -212,7 +212,7 @@ <h2>Cool</h2>
 
   function handleEnter() {
     this.classList.add('trigger-enter');
-    setTimeout(() => this.classList.add('trigger-enter-active'), 150);
+    setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
     background.classList.add('open');
 
     const dropdown = this.querySelector('.dropdown');

From 6d28ff28d33dd1b879aa223f99f5763ed5c051b4 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Tue, 17 Jan 2017 10:43:10 -0600
Subject: [PATCH 35/41] Completed click and drag challenge.

---
 27 - Click and Drag/index-START.html | 29 ++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
index b8609315f7..7a3561f946 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -35,6 +35,35 @@
   </div>
 
 <script>
+    const slider = document.querySelector('.items');
+    let isDown = false;
+    let startX;
+    let scrollLeft;
+
+    slider.addEventListener('mousedown', (e) => {
+        isDown = true;
+        slider.classList.add('active');
+        startX = e.pageX - slider.offsetLeft;
+        scrollLeft = slider.scrollLeft;
+    });
+
+    slider.addEventListener('mouseleave', () => {
+        isDown = false;
+        slider.classList.remove('active');
+    });
+
+    slider.addEventListener('mouseup', () => {
+        isDown = false;
+        slider.classList.remove('active');
+    });
+
+    slider.addEventListener('mousemove', (e) => {
+        if (!isDown) return;
+        e.preventDefault();
+        const x = e.pageX - slider.offsetLeft;
+        const walk = x - startX;
+        slider.scrollLeft = (scrollLeft - walk) * 3;
+    });
 </script>
 
   </body>

From 79e52b339f8fcc38b0a2605d5aad35533cce5dc3 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Tue, 17 Jan 2017 15:43:20 -0600
Subject: [PATCH 36/41] Completed Video Speed Controller excercise.

---
 28 - Video Speed Controller/index-START.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
index c4cbd4259a..39baca7d65 100644
--- a/28 - Video Speed Controller/index-START.html	
+++ b/28 - Video Speed Controller/index-START.html	
@@ -15,6 +15,23 @@
   </div>
 
 <script>
+	const speed = document.querySelector('.speed');
+	const bar = document.querySelector('.speed-bar');
+	const video = document.querySelector('.flex');
+
+	function handleMove(e) {
+		const y = e.pageY - this.offsetTop;
+		const percent = y / this.offsetHeight;
+		const min = 0.4;
+		const max = 4;
+		const height = Math.round((percent * 100)) + '%';
+		const playbackRate = percent * (max - min) + min;
+		bar.style.height = height;
+		bar.textContent = playbackRate.toFixed(2) + 'x';
+		video.playbackRate = playbackRate;
+	}
+
+	speed.addEventListener('mousemove', handleMove);
 </script>
 </body>
 </html>

From 457f91a379d0e0a0d0955b35a678274e8ac00b1c Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Tue, 17 Jan 2017 15:51:11 -0600
Subject: [PATCH 37/41] Fix syntax error in event listener.

---
 11 - Custom Video Player/scripts.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index 0c0e8bb0bb..8ca475248a 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -46,9 +46,10 @@ video.addEventListener('timeupdate', handleProgress);
 toggle.addEventListener('click', togglePlay);
 skipButtons.forEach(button => button.addEventListener('click', skip));
 ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
 
 let mouseDown = false;
 progress.addEventListener('click', scrub);
-progress.addEventListener('mousemove', (e) => mouseDown && scrub(e)});
-progress.addEventListener('mousedown', () => mouseDown = true);
-progress.addEventListener('mouseup', () => mouseDown = false);
\ No newline at end of file
+progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);
\ No newline at end of file

From f81aa55f8bf56a7e6bc03ffa4c298a0abbce269b Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Sat, 21 Jan 2017 09:03:27 -0600
Subject: [PATCH 38/41] Create timer func to handle countdown.

---
 29 - Countdown Timer/scripts-START.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js
index e69de29bb2..afb97f3949 100644
--- a/29 - Countdown Timer/scripts-START.js	
+++ b/29 - Countdown Timer/scripts-START.js	
@@ -0,0 +1,20 @@
+let countdown;
+
+function timer(seconds) {
+	const now = Date.now();
+	const then = now + seconds * 1000;
+	displayTimeLeft(seconds);
+
+	countdown = setInterval(() => {
+		const secondsLeft = Math.round((then - Date.now()) / 1000);
+		if(secondsLeft < 0) {
+			clearInterval(countdown);
+			return;
+		}
+		displayTimeLeft(secondsLeft);
+	}, 1000);
+}
+
+function displayTimeLeft(seconds) {
+	console.log(seconds);
+}
\ No newline at end of file

From 001696f3ccc594174541c33cae178d0509c2be8f Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Sat, 21 Jan 2017 09:33:12 -0600
Subject: [PATCH 39/41] add funcs for displaying time left and end time.

---
 29 - Countdown Timer/scripts-START.js | 29 ++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js
index afb97f3949..a25e791a52 100644
--- a/29 - Countdown Timer/scripts-START.js	
+++ b/29 - Countdown Timer/scripts-START.js	
@@ -1,9 +1,15 @@
 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);
@@ -16,5 +22,26 @@ function timer(seconds) {
 }
 
 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();
+	const adjustedMinutes = minutes < 10 ? '0' : '';
+	endTime.textContent = `The world ends at ${adjustedHour}:${adjustedMinutes}${minutes}`;
+}
+
+function startTimer() {
+	const seconds = parseInt(this.dataset.time);
+	timer(seconds);
 	console.log(seconds);
-}
\ No newline at end of file
+}
+
+buttons.forEach(button => button.addEventListener('click', startTimer));

From 5da8ddd5d76beb8bc625592e7f646e772c0040fb Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Sat, 21 Jan 2017 09:50:56 -0600
Subject: [PATCH 40/41] Complete challenge for timer.

---
 29 - Countdown Timer/scripts-START.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js
index a25e791a52..b7fe7e2633 100644
--- a/29 - Countdown Timer/scripts-START.js	
+++ b/29 - Countdown Timer/scripts-START.js	
@@ -45,3 +45,10 @@ function startTimer() {
 }
 
 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();
+});

From 6b38e887f7568cf08b170d4d16ff723e2a11f062 Mon Sep 17 00:00:00 2001
From: Caden Albaugh <CadenAlbaugh@gmail.com>
Date: Sun, 22 Jan 2017 12:14:48 -0600
Subject: [PATCH 41/41] Coded Whack A Mole project.

---
 30 - Whack A Mole/index-START.html | 45 ++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
index 2014ff458c..9b99b79a33 100644
--- a/30 - Whack A Mole/index-START.html	
+++ b/30 - Whack A Mole/index-START.html	
@@ -36,6 +36,51 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
   const holes = document.querySelectorAll('.hole');
   const scoreBoard = document.querySelector('.score');
   const moles = document.querySelectorAll('.mole');
+  let lastHole;
+  let timeUp = false;
+  let score = 0;
+
+  function randomTime(min, max) {
+    return Math.round(Math.random() * (max - min) + min);
+  }
+
+  function randomHole(holes) {
+    const idx = Math.floor(Math.random() * holes.length);
+    const hole = holes[idx];
+    if (hole === lastHole) {
+      return randomHole(holes);
+    }
+
+    lastHole = hole;
+    return hole;
+  }
+
+  function peep() {
+    const time = randomTime(200, 1000);
+    const hole = randomHole(holes);
+    hole.classList.add('up');
+    setTimeout(() => {
+      hole.classList.remove('up');
+      if (!timeUp) peep();
+    }, time);
+  }
+
+  function startGame() {
+    scoreBoard.textContent = 0;
+    timeUp = false;
+    score = 0;
+    peep();
+    setTimeout(() => timeUp = true, 10000)
+  }
+
+  function bonk(e) {
+    if(!e.isTrusted) return;
+    score++;
+    this.classList.remove('up');
+    scoreBoard.textContent = score;
+  }
+
+  moles.forEach(mole => mole.addEventListener('click', bonk));
 
 </script>
 </body>