From bb5474e91b1d8414da28e9dfaa5c5483a41ecea0 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Tue, 20 Dec 2016 15:07:32 -0500
Subject: [PATCH 01/29] completed drum kit

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..894d769fed 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,99 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+// current key codes are for caps only
+let keyA = document.querySelectorAll("[data-key='65']")
+let keyS = document.querySelectorAll("[data-key='83']")
+let keyD = document.querySelectorAll("[data-key='68']")
+let keyF = document.querySelectorAll("[data-key='70']")
+let keyG = document.querySelectorAll("[data-key='71']")
+let keyH = document.querySelectorAll("[data-key='72']")
+let keyJ = document.querySelectorAll("[data-key='74']")
+let keyK = document.querySelectorAll("[data-key='75']")
+let keyL = document.querySelectorAll("[data-key='76']")
 
+
+  document.onkeydown = function(e) {
+    switch(e.keyCode) {
+      case 65:
+        keyA[0].className += ' playing';
+        keyA[1].currentTime = 0;
+        keyA[1].play()
+        break;
+      case 83:
+        keyS[0].className += ' playing';
+        keyS[1].currentTime = 0;
+        keyS[1].play(); 
+        break;
+      case 68:
+        keyD[0].className += ' playing';
+        keyD[1].currentTime = 0;
+        keyD[1].play(); 
+        break;
+      case 70:
+        keyF[0].className += ' playing';
+        keyF[1].currentTime = 0;
+        keyF[1].play(); 
+        break;
+      case 71:
+        keyG[0].className += ' playing';
+        keyG[1].currentTime = 0;
+        keyG[1].play(); 
+        break;
+      case 72:
+        keyH[0].className += ' playing';
+        keyH[1].currentTime = 0;
+        keyH[1].play(); 
+        break;
+      case 74:
+        keyJ[0].className += ' playing';
+        keyJ[1].currentTime = 0;
+        keyJ[1].play(); 
+        break;
+      case 75:
+        keyK[0].className += ' playing';
+        keyK[1].currentTime = 0;
+        keyK[1].play(); 
+        break;
+      case 76:
+        keyL[0].className += ' playing';
+        keyL[1].currentTime = 0;
+        keyL[1].play(); 
+        break;
+    }
+  }
+
+  document.onkeyup = function(e) {
+    switch(e.keyCode) {
+      case 65:
+        keyA[0].className = 'key';
+        break;
+      case 83:
+        keyS[0].className = 'key';
+        break;
+      case 68:
+        keyD[0].className = 'key';
+        break;
+      case 70:
+        keyF[0].className = 'key';
+        break;
+      case 71:
+        keyG[0].className = 'key';
+        break;
+      case 72:
+        keyH[0].className = 'key';
+        break;
+      case 74:
+        keyJ[0].className = 'key';
+        break;
+      case 75:
+        keyK[0].className = 'key';
+        break;
+      case 76:
+        keyL[0].className = 'key';
+        break;
+    }
+  }
 </script>
 
 

From f820785da6246c7a3689f76308509ae0b37d5a83 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Wed, 21 Dec 2016 14:37:07 -0500
Subject: [PATCH 02/29] completed clock

---
 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..9b7ac9a3f6 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%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      /*transition-timing-function: cubic-bezier(0, 2.68, 0.98, 1.04);*/
     }
 
   </style>
 
   <script>
+  let hands = document.getElementsByClassName('hand');
+  let secondHand = hands[2];
+  let minuteHand = hands[1];
+  let hourHand = hands[0];
 
+  function setDate() {
+    const now = new Date();
+    const seconds = now.getSeconds();
+    const secondsDegrees = (seconds/60 * 360) + 90;
+    // move second hand every second
+    secondHand.style.transform = `rotate(${secondsDegrees}deg)`
+
+    const minutes = now.getMinutes();
+    const minutesDegrees = (minutes/60 * 360) + 90;
+    minuteHand.style.transform = `rotate(${minutesDegrees}deg)`
+
+    const hours = now.getHours();
+    const hoursDegrees = (hours/12 * 360) + 90;
+    hourHand.style.transform = `rotate(${hoursDegrees}deg)`
+  }
+  //have an interval to move second hand - apply style?
+  // function moveHand() {
+  //   secondHand.style.transform = "rotate(2deg)"
+  // }
+  setInterval(setDate, 1000)
 
   </script>
 </body>

From f079ab4cc8fc3f22789bd4ace03c4e88e81e9031 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Wed, 21 Dec 2016 19:39:53 -0500
Subject: [PATCH 03/29] completed exercise

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..b13edc6320 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,7 +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 +62,19 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    let controls = document.querySelectorAll('.controls input')
+
+    function updateCSS() {
+      let name = this.name;
+      let sizing = this.dataset.sizing || '';
+      let value = this.value;
+      document.documentElement.style.setProperty(`--${name}`, `${value}${sizing}`);
+      // document.getElementsByClassName('hl')[0].style.setProperty('color', value)
+    }
+    controls.forEach(element => element.addEventListener('change', updateCSS))
+    controls.forEach(element => element.addEventListener('mousemove', updateCSS))
+
+
   </script>
 
 </body>

From c086ece712044e0a475037abec2f4989f07bcf7f Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Thu, 22 Dec 2016 14:54:49 -0500
Subject: [PATCH 04/29] completed exercise

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..c95d82974e 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,29 +33,82 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    let filter = inventors.filter((element, index) => {
+      return element.year < 1600 && element.year >= 1500
+    })
+    console.log(filter)
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    let result = inventors.map(inventor => `${inventor.first}, ${inventor.last}`)
+    console.log(result)
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    inventors.sort((inventor1, inventor2) => {
+      if (inventor1.year < inventor2.year) return -1;
+      if (inventor1.year > inventor2.year) return 1;
+      return 0;
+    })
+
+    console.log(inventors)
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
-
+    let yearCount = inventors.reduce((initialVal, currentVal) => {
+      return initialVal += (currentVal.passed - currentVal.year)
+    },0)
+    console.log(yearCount)
     // 5. Sort the inventors by years lived
+    inventors.sort((inventor, inventor2) => {
+      if (inventor.passed - inventor.year > inventor2.passed-inventor2.year) {
+        return -1;
+      }
+      if (inventor.passed - inventor.year < inventor2.passed-inventor2.year) {
+        return 1;
+      } 
+    })
+    console.log(inventors)
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    // Boulevards.map(index => {
+    //   if (index.indexOf('de') > -1) {
+    //     return index;
+    //   }
+    // })
 
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
 
+    people.sort((person1, person2) => {
+      let lastNameIndex = person1.indexOf(',') + 2;
+      let lastNameIndex2 = person2.indexOf(',') + 2;
+      if (person1[lastNameIndex] < person2[lastNameIndex2]) {
+        return -1;
+      }
+      if (person1[lastNameIndex] > person2[lastNameIndex2]) {
+        return 1;
+      }
+      // console.log(person1[lastNameIndex])
+    })
+    console.log(people)
+
     // 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' ];
 
+    let redResult = data.reduce((obj, word) => {
+      if (!obj[word]) {
+        obj[word] = 0;
+      }
+      obj[word] ++;
+      return obj;
+    },{})
+
+    console.log(redResult)
+
   </script>
 </body>
 </html>

From 15922d972488d1e276bd4c7d5c68f0653616e9b8 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Fri, 23 Dec 2016 22:03:19 -0500
Subject: [PATCH 05/29] completed exercise - helpful for filtering search
 results in future

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

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..86784e1f70 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,48 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+let places = [];
+
+fetch(endpoint)
+.then(res => res.json())
+.then(data => places.push(...data))
+
+// have data now much filter it based on text and then display these filtered results and then highlight matching text and show 
+// population in number w/ commas form
+
+function filterPlaces(word, placesArr) {
+  return placesArr.filter(place => {
+    let cityCaps = place.city.toUpperCase();
+    let stateCaps = place.state.toUpperCase();
+    let wordCaps = word.toUpperCase();
+    return cityCaps.indexOf(wordCaps) > -1 || stateCaps.indexOf(wordCaps) > -1
+  })
+}
+
+function comifyNumber(num) {
+  return num.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
+}
+
+function callFilterWithInput() {
+  let filteredResults = filterPlaces(this.value, places)
+  suggestions.innerHTML = filteredResults.map(place => {
+    const regex = new RegExp(this.value, 'gi');
+    const city = place.city.replace(regex, `<span class='hl'>${this.value}</span>`);
+    const state = place.state.replace(regex, `<span class='hl'>${this.value}</span>`);
+    return `
+    <li> 
+      <span>${city}, ${state}</span>
+      <span>${comifyNumber(place.population)}</span>
+    </li>`
+  }).join('')
+}
+
+let input = document.querySelector('.search');
+let suggestions = document.querySelector('.suggestions');
+input.addEventListener('keyup', callFilterWithInput);
+
+
+
 </script>
   </body>
 </html>

From 5d54c22d9f233263705ce4e3fb63c859cec2a199 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Sat, 24 Dec 2016 11:09:42 -0500
Subject: [PATCH 06/29] finished exercise

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..30b7940136 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,26 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
+    let someCheck = people.some(person => 2016 - person.year >= 19)
+    console.log(someCheck)
+
     // Array.prototype.every() // is everyone 19?
 
+    let everyCheck = people.every(person => 2016 - person.year === 19)
+    console.log(everyCheck)
+
     // 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
+    let findResult = comments.find(comment => comment.id === 823423)
+    console.log(findResult)
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    let result = comments.findIndex(comment => comment.id === 823423)
+    comments.splice(result, 1)
+    console.log(comments)
 
   </script>
 </body>

From fa147173951d33d9cb67e0588fae1db8fd864f78 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Tue, 27 Dec 2016 17:01:58 -0500
Subject: [PATCH 07/29] finished exercise

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..0cfc6bc2f9 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,41 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+	let canvas = document.getElementsByTagName('canvas')[0];
+	canvas.height = window.innerHeight;
+	canvas.width = window.innerWidth;
+	let ctx = canvas.getContext('2d');
+	let lastX = 0, lastY = 0, isDrawing = false, hue = 0;
+	ctx.lineCap = 'square';
+	ctx.lineWidth = 25;
+	ctx.lineJoin = 'bevel';
+
+
+	function draw(e) {
+		if (!isDrawing) return;
+		
+		ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+		ctx.beginPath();
+		ctx.moveTo(lastX,lastY);
+		ctx.lineTo(e.offsetX, e.offsetY);
+		ctx.stroke();
+		lastX = e.offsetX;
+		lastY = e.offsetY;
+		hue ++;
+	}
+
+	canvas.addEventListener('mousemove', draw);
+	canvas.addEventListener('mousedown', (e) => {
+		isDrawing = true;
+		lastX = e.offsetX;
+		lastY = e.offsetY;
+	});
+	canvas.addEventListener('mouseup', () => isDrawing = false);
+	canvas.addEventListener('mouseleave', () => isDrawing = false);
+
+
+
+
 </script>
 
 <style>

From f09e774460affa0de5b6cfc347d132a2ad043e42 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Wed, 28 Dec 2016 15:27:09 -0500
Subject: [PATCH 08/29] finished exercise

---
 .../index-START.html                          | 23 +++++++++++++++++++
 1 file changed, 23 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..65f9e0123c 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,29 @@
   </div>
 
 <script>
+
+  let checkBoxesArr = Array.from(document.getElementsByTagName('input'));
+  let lastChecked;
+
+  function handleClick (e) {
+    let inBetween = false;
+
+    if (e.shiftKey && this.checked) {
+      checkBoxesArr.forEach(checkbox => {
+        if (checkbox === this || checkbox === lastChecked) {
+          inBetween = !inBetween;
+        } 
+        if (inBetween) {
+          checkbox.checked = true;
+        }
+      })
+
+    }
+    lastChecked = this;
+  }
+
+  checkBoxesArr.forEach(checkbox => checkbox.addEventListener('click', handleClick))
+
 </script>
 </body>
 </html>

From 0efb0ee8c8dd5e545b28becc7e0ca68e3dc65429 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Fri, 30 Dec 2016 14:22:39 -0500
Subject: [PATCH 09/29] completed exercise

---
 11 - Custom Video Player/index.html |  3 +-
 11 - Custom Video Player/scripts.js | 96 +++++++++++++++++++++++++++++
 11 - Custom Video Player/style.css  |  2 +-
 3 files changed, 99 insertions(+), 2 deletions(-)

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index fe2b55b394..44cacb03b2 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -19,9 +19,10 @@
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
+       <button class="player__button" title="Fullscreen">&#xe140;</button>
      </div>
    </div>
 
   <script src="scripts.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..9b78d1c359 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,96 @@
+let videoPlayer = document.querySelector('.player__video');
+
+// ** PAUSE/PLAY BUTTON ** //
+let playBtn = document.querySelector('.toggle');
+
+function togglePlay() {
+	if (videoPlayer.paused) {
+		videoPlayer.play();
+		playBtn.innerHTML = '<button class="player__button toggle" title="Toggle Play">►</button>'
+	}
+	else {
+		videoPlayer.pause();
+		playBtn.innerHTML = '<button class="player__button toggle" title="Toggle Play">❚ ❚</button>'
+	}
+}
+
+playBtn.addEventListener('click', togglePlay);
+videoPlayer.addEventListener('click', togglePlay);
+
+// ** VOLUME ** //
+
+let volumeSlider = document.querySelector('input[name=volume]');
+
+function changeVolume() {
+	videoPlayer.volume = this.value;
+}
+
+volumeSlider.addEventListener('change', changeVolume);
+volumeSlider.addEventListener('mousemove', changeVolume);
+
+// ** VIDEO SPEED ** //
+
+let speedSlider = document.querySelector('input[name=playbackRate');
+
+function toggleSpeed() {
+	videoPlayer.playbackRate = this.value;
+}
+
+speedSlider.addEventListener('change', toggleSpeed);
+speedSlider.addEventListener('mousemove', toggleSpeed);
+
+// ** PROGRESS BAR ** //
+let progressBar = document.querySelector('.progress');
+let progressElapsed = document.querySelector('.progress__filled');
+
+function changeProgress() {
+	progressElapsed.style.flexBasis = videoPlayer.currentTime/videoPlayer.duration * 100 + '%';
+}
+
+function scrub(e) {
+	let percentClicked = e.offsetX/progressBar.offsetWidth * videoPlayer.duration;
+	videoPlayer.currentTime = percentClicked;
+}
+
+videoPlayer.addEventListener('timeupdate', changeProgress);
+
+let mousedown = false;
+progressBar.addEventListener('click', scrub);
+progressBar.addEventListener('mousemove', mousedown ? scrub : '');
+progressBar.addEventListener('mousedown', () => mousedown = true)
+progressBar.addEventListener('mouseup', () => mousedown = false)
+
+// ** FAST FORWARD & REWIND ** //
+
+let skipButtons = document.querySelectorAll('[data-skip]');
+
+function toggleSkip() {
+	videoPlayer.currentTime += Number(this.dataset.skip)
+}
+
+skipButtons.forEach(button => button.addEventListener('click', toggleSkip));
+
+//full screen & progress bar at beginning
+
+// ** FULLSCREEN ** //
+
+let fullscreenBtn = document.querySelector('button[title=Fullscreen]')
+
+function enableFullScreen() {
+	videoPlayer.webkitEnterFullscreen();
+}
+
+function exitFullScreen(e) {
+ if (e.key === 'Escape') {
+ 	videoPlayer.webkitExitFullscreen();
+ }
+}
+
+fullscreenBtn.addEventListener('click', enableFullScreen)
+document.addEventListener('keydown', exitFullScreen)
+
+
+
+
+
+
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
index c07581c1c0..b6253af905 100644
--- a/11 - Custom Video Player/style.css	
+++ b/11 - Custom Video Player/style.css	
@@ -89,7 +89,7 @@ body {
   width:50%;
   background:#ffc600;
   flex:0;
-  flex-basis:50%;
+  flex-basis:0%;
 }
 
 /* unholy css to style input type="range" */

From 6650de9830576ccde2e9559c87c3463b673db9dd Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Fri, 30 Dec 2016 15:00:01 -0500
Subject: [PATCH 10/29] completed exercise

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

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..bf05be8a68 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,20 @@
 </head>
 <body>
 <script>
+	let secretCode = 'osu';
+	let input = [];
+
+	function collectKeys(e) {
+		input.push(e.key)
+		input.splice(-secretCode.length - 1, input.length - secretCode.length)
+		console.log
+		if (input.join('').includes(secretCode)) {
+			cornify_add();
+		}
+	}
+	document.addEventListener('keypress', collectKeys)
+
+
 </script>
 </body>
 </html>

From fa5f80cadd133e2c55df8876b794eba477b62f78 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Sun, 1 Jan 2017 14:16:20 -0500
Subject: [PATCH 11/29] completed exercise

---
 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..4e03decadf 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>
       };
     }
 
+    // grab all imgs
+
+    const imgs = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      imgs.forEach(image => {
+        let slideInAt = (window.scrollY + window.innerHeight) - image.height / 2;
+        let imageBottom = image.offsetTop + image.height;
+        let isHalfShown = slideInAt > image.offsetTop;
+        let isNotScrolledPast = window.scrollY < imageBottom;
+        if (isHalfShown && isNotScrolledPast) {
+          image.classList.add('active');
+        }
+        else {
+          image.classList.remove('active');
+        }
+      })
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>

From 9429a7d21dcd8bdeab42cb42e6770965891a777b Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Sun, 1 Jan 2017 18:32:39 -0500
Subject: [PATCH 12/29] completed exercise

---
 15 - LocalStorage/index-START.html | 69 +++++++++++++++++++++++++++++-
 15 - LocalStorage/style.css        | 12 ++++++
 2 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..0e9f033a3c 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,12 +23,79 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <button name='uncheck'>Uncheck All</button>
+    <button name='check'>Check All</button>
+    <button name='clear'>Clear All</button>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  let items = JSON.parse(localStorage.getItem('listOfItems')) || [];
+  const input = addItems.querySelector('input')
+  const uncheckAllBtn = document.querySelector('[name=uncheck]')
+  const checkAllBtn = document.querySelector('[name=check]')
+  const clearAllBtn = document.querySelector('[name=clear]')
+
+
+  function submitForm(e) {
+    e.preventDefault();
+    let item = {'name': input.value, 'status' : false};
+    items.push(item);
+    localStorage.setItem('listOfItems', JSON.stringify(items));
+    createHTML(items, itemsList)
+    addItems.reset();
+  }
+
+  addItems.addEventListener('submit', submitForm)
+
+  function createHTML(dishes = [], dishList) {
+    dishList.innerHTML = dishes.map((dish, i) => {
+      return `
+      <li>
+        <input type="checkbox" data-index=${i} id="item${i}" ${dish.status ? 'checked' : ''} />
+        <label for="item${i}">${dish.name}</label>
+      </li>
+      `
+    }).join('');
+  }
+
+  createHTML(items, itemsList);
+
+  function toggleStatus(e) {
+    if (!e.target.matches('input')) return;
+    const itemIndex = e.target.dataset.index;
+    items[itemIndex].status = e.target.checked
+    localStorage.setItem('listOfItems', JSON.stringify(items));
+  }
+
+  itemsList.addEventListener('click', toggleStatus);
+
+  function uncheckAll() {
+    items.forEach(item => item.status = false)
+    localStorage.setItem('listOfItems', JSON.stringify(items));
+    createHTML(items, itemsList)
+  }
+
+  uncheckAllBtn.addEventListener('click', uncheckAll)
+
+  function checkAll() {
+    items.forEach(item => item.status = true)
+    localStorage.setItem('listOfItems', JSON.stringify(items));
+    createHTML(items, itemsList)
+  }
+
+  checkAllBtn.addEventListener('click', checkAll)
+
+  function clearList() {
+    localStorage.clear()
+    createHTML([], itemsList)
+  }
+
+  clearAllBtn.addEventListener('click', clearList)
+
+
+  //button for clear all, check all, uncheck all - bonus
 
 </script>
 
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
index ea5bab179c..a3a0ef16d4 100644
--- a/15 - LocalStorage/style.css	
+++ b/15 - LocalStorage/style.css	
@@ -76,3 +76,15 @@
       outline:0;
       border:1px solid rgba(0,0,0,0.1);
     }
+
+    button {
+      background-color: #80a5d4;
+      border: none;
+      color: white;
+      padding: 10px;
+      margin-top: 6px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 12px;
+    }

From d23e7cbc9296742d1ebd1922a1a105dbeb839003 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Mon, 2 Jan 2017 14:54:52 -0500
Subject: [PATCH 13/29] completed exercise

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

diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..dd951f1546 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,38 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+
+  const hero = document.querySelector('.hero');
+  const text = document.querySelector('h1');
+  const walk = 100; //100px
+
+  function applyShadow(e) {
+    const width = hero.offsetWidth;
+    const height = hero.offsetHeight;
+    let x = e.offsetX;
+    let y = e.offsetY;
+
+    if (this !== e.target) {
+      x += e.target.offsetLeft;
+      y += e.target.offsetTop;
+    }
+
+    // go from -50 to 50 instead of 0 to 100
+    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 * -1}px ${xWalk}px 0 rgba(0, 0, 255, 0.7),
+     ${yWalk}px ${xWalk * -1}px 0 rgba(0, 0, 255, 0.7)
+    `;
+
+  }
+
+  hero.addEventListener('mousemove', applyShadow);
+
+  // text-shadow: rgba(0,0,0,.17) -5px -10px 6px;
 </script>
 </body>
 </html>

From 4de4fa0fa3914a7027a3acbb7f7eff4171163ab3 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Mon, 2 Jan 2017 16:55:26 -0500
Subject: [PATCH 14/29] finished exercise

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

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..a1ccffe159 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -45,6 +45,37 @@
 <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'];
 
+let sortedBands = bands.sort((first, second) => {
+  let firstSpace = first.indexOf(' ');
+  let secondSpace = second.indexOf(' ');
+  let firstWord = first.slice(0, firstSpace);
+  let secondWord = second.slice(0, secondSpace);
+  let newFirstWord = first;
+  let newSecondWord = second;
+  if (firstWord === 'A' || firstWord === 'An' || firstWord === 'The') {
+    newFirstWord = first.slice(firstSpace + 1)
+  }
+  if (secondWord === 'A' || secondWord === 'An' || secondWord === 'The') {
+    newSecondWord = second.slice(secondSpace + 1)
+  }
+
+  if (newFirstWord < newSecondWord) {
+    return -1;
+  }
+
+  if (newFirstWord > newSecondWord) {
+    return 1;
+  }
+})
+
+console.log(sortedBands)
+
+let listEl = document.querySelector('#bands')
+listEl.innerHTML = sortedBands.map(band => {
+  return `
+    <li>${band}</li>
+  `
+}).join('');
 
 </script>
 

From dc80c94ebd12a9cc6f9083891ef28af51bb82591 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Mon, 2 Jan 2017 18:02:26 -0500
Subject: [PATCH 15/29] finished exercise

---
 .../index-START.html                          | 23 +++++++++++++++++++
 1 file changed, 23 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..c05400d7e2 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,29 @@
     </li>
 
 <script>
+  let liArray = document.querySelectorAll('[data-time]');
+  
+  let timesArray = [];
+
+  liArray.forEach(element => timesArray.push(element.dataset.time))
+
+  const seconds = timesArray.map(time => {
+    const [mins, secs] = time.split(':').map(parseFloat)
+    return (mins * 60) + secs;
+  })
+  .reduce((total, currentSeconds) => {
+    return total + currentSeconds
+  })
+
+  let secondsLeft = seconds;
+  const hours = Math.floor(secondsLeft / 3600);
+  secondsLeft = secondsLeft % 3600;
+
+  const mins = Math.floor(secondsLeft / 60);
+  secondsLeft = secondsLeft % 60;
+
+  console.log(hours, mins, secondsLeft)
+
 </script>
 </body>
 </html>

From e3f876c519ab5f25da0cc7ab739b3630db98f63d Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Tue, 3 Jan 2017 15:14:45 -0500
Subject: [PATCH 16/29] completed exercise

---
 19 - Webcam Fun/index.html |  4 +-
 19 - Webcam Fun/scripts.js | 95 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html
index d4ffc4dc2a..cb2d1b18a4 100755
--- a/19 - Webcam Fun/index.html	
+++ b/19 - Webcam Fun/index.html	
@@ -10,7 +10,7 @@
   <div class="photobooth">
     <div class="controls">
       <button onClick="takePhoto()">Take Photo</button>
-<!--       <div class="rgb">
+      <div class="rgb">
         <label for="rmin">Red Min:</label>
         <input type="range" min=0 max=255 name="rmin">
         <label for="rmax">Red Max:</label>
@@ -29,7 +29,7 @@
         <input type="range" min=0 max=255 name="bmin">
         <label for="bmax">Blue Max:</label>
         <input type="range" min=0 max=255 name="bmax">
-      </div> -->
+      </div>
     </div>
 
     <canvas class="photo"></canvas>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
index 00355f5a9c..5183c4b6e6 100644
--- a/19 - Webcam Fun/scripts.js	
+++ b/19 - Webcam Fun/scripts.js	
@@ -3,3 +3,98 @@ const canvas = document.querySelector('.photo');
 const ctx = canvas.getContext('2d');
 const strip = document.querySelector('.strip');
 const snap = document.querySelector('.snap');
+
+// video comes off webcame (video element) and we pipe it into the canvas. strip is where we put images
+
+function getVideo() {
+	navigator.mediaDevices.getUserMedia({video: true, audio: false})
+	.then(localMediaStream => {
+		video.src = window.URL.createObjectURL(localMediaStream);
+		video.play();
+	})
+	.catch(err => console.error("Webcam access was denied", err));
+}
+
+function paintToCanvas() {
+	const width = video.videoWidth;
+	const height = video.videoHeight;
+	canvas.width = width;
+	canvas.height = height;
+
+	return setInterval(() => {
+		ctx.drawImage(video, 0, 0, width, height);
+		// retrieve the pixels
+		let pixels = ctx.getImageData(0,0, width, height);
+		// add effect to pixels
+		// pixels = redEffect(pixels);
+		// pixels = rgbSplit(pixels);
+		// ctx.globalAlpha = 0.1;
+		pixels = greenScreen(pixels);
+		
+		// put pixels back
+		ctx.putImageData(pixels, 0, 0);
+	}, 16);
+}
+
+function takePhoto() {
+	// play camera snap audio
+	snap.currentTime = 0;
+	snap.play();
+
+	//take data out of canvas
+	const data = canvas.toDataURL('image/jpeg');
+	const link = document.createElement('a');
+	link.href = data;
+	link.setAttribute('download', 'handsome');
+	link.innerHTML = `<img src="${data}" alt="handsome person" />`
+	strip.insertBefore(link, strip.firstChild)
+}
+
+function redEffect(pixels) {
+	for (let i = 0; i < pixels.data.length; i += 4) {
+		pixels.data[i] = pixels.data[i] + 100; // r
+		pixels.data[i + 1] = pixels.data[i + 1] - 50; // g
+		pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // b
+	}
+	return pixels
+}
+
+function rgbSplit(pixels) {
+	for (let i = 0; i < pixels.data.length; i += 4) {
+		pixels.data[i - 150] = pixels.data[i]; // r
+		pixels.data[i + 400] = pixels.data[i + 1]; // g
+		pixels.data[i - 550] = pixels.data[i + 2]; // b
+	}
+	return pixels
+}
+
+function greenScreen(pixels) {
+	const levels = {};
+
+  document.querySelectorAll('.rgb input').forEach((input) => {
+    levels[input.name] = input.value;
+  });
+
+  for (i = 0; i < pixels.data.length; i = i + 4) {
+    red = pixels.data[i + 0];
+    green = pixels.data[i + 1];
+    blue = pixels.data[i + 2];
+    alpha = pixels.data[i + 3];
+
+    if (red >= levels.rmin
+      && green >= levels.gmin
+      && blue >= levels.bmin
+      && red <= levels.rmax
+      && green <= levels.gmax
+      && blue <= levels.bmax) {
+      // take it out!
+      pixels.data[i + 3] = 0;
+    }
+  }
+
+  return pixels;
+}
+
+getVideo();
+
+video.addEventListener('canplay', paintToCanvas);
\ No newline at end of file

From 4cc666427914e3a3226ff8c42f6999f7394283d9 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Fri, 6 Jan 2017 11:56:57 -0500
Subject: [PATCH 17/29] completed exercise

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

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

From 24c504c103597faba331dfc7540a57cfb5c704e3 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Fri, 6 Jan 2017 15:39:27 -0500
Subject: [PATCH 18/29] completed exercise

---
 21 - Geolocation/index-START.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
index d794c144ba..2c4236ef44 100644
--- a/21 - Geolocation/index-START.html	
+++ b/21 - Geolocation/index-START.html	
@@ -57,17 +57,19 @@ <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);
+    navigator.geolocation.watchPosition(data => {
       speed.textContent = data.coords.speed;
       arrow.style.transform = `rotate(${data.coords.heading}deg)`;
-    }, (err) => {
+    }, (err => {
       console.err(err);
-      alert('HEY! YOU GOTTA ALLOW THAT TO HAPPEN!!!');
-    });
+      alert('error accessing location');
+    }))
+
+    
 
   </script>
 </body>

From 618e15724422e130c4aee13221dde6470aabd978 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Sat, 7 Jan 2017 17:34:10 -0500
Subject: [PATCH 19/29] completed exercise

---
 .../index-START.html                          | 21 ++++++++++++++++++-
 22 - Follow Along Link Highlighter/style.css  |  4 ++++
 2 files changed, 24 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..1527dec258 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,7 +26,26 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+
+    let linkTags = document.querySelectorAll('a');
+    let highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+
+    function highlightLink(e) {
+      const linkCoords = this.getBoundingClientRect();
+      highlight.style.width = `${linkCoords.width}px`;
+      highlight.style.height = `${linkCoords.height}px`;
+      highlight.style.left = `${linkCoords.left}px`;
+      highlight.style.right = `${linkCoords.right}px`;
+      highlight.style.top = `${linkCoords.top + scrollY}px`;
+      highlight.style.bottom = `${linkCoords.bottom - scrollY}px`;
+    }
+
+    linkTags.forEach(link => {
+      link.addEventListener('mouseenter', highlightLink)
+    })
+
   </script>
 </body>
 </html>
diff --git a/22 - Follow Along Link Highlighter/style.css b/22 - Follow Along Link Highlighter/style.css
index 222e27ae68..598671fff5 100644
--- a/22 - Follow Along Link Highlighter/style.css	
+++ b/22 - Follow Along Link Highlighter/style.css	
@@ -57,3 +57,7 @@ a {
   margin:0 20px;
   color:black;
 }
+
+.hidden {
+  visibility: hidden;
+}

From ac5f3f01c689b7f5dc258e652abe9871c73a69e5 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Sun, 8 Jan 2017 17:44:19 -0500
Subject: [PATCH 20/29] completed exercise

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

diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..6f7fb042c5 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -35,6 +35,58 @@ <h1>The Voiceinator 5000</h1>
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+  const synth = window.speechSynthesis;
+  const form = document.querySelector('textarea');
+
+  function speakFn() {
+    msg.text = form.value;
+    synth.speak(msg)
+  }
+
+  function stopSpeaking() {
+    synth.cancel();
+  }
+
+  function handleChange() {
+    let name = this.name;
+    msg[`${name}`] = this.value;
+    synth.cancel();
+    speakFn()
+  }
+
+  speakButton.addEventListener('click', speakFn)
+  stopButton.addEventListener('click', stopSpeaking)
+  options.forEach(option => {
+    option.addEventListener('change', handleChange)
+  })
+
+  let item = document.createElement('option');
+
+  let timer = setInterval(function() {
+    voices = synth.getVoices();
+    voices = voices.filter(voice => {
+      return voice.lang.includes('en')
+    })
+
+    if (voices.length !== 0) {
+      voices.map((voice, index) => {
+        item = document.createElement('option');
+        item.value = index;
+        item.textContent = voice.name;
+        voicesDropdown.appendChild(item)
+      })
+      clearInterval(timer);
+    }
+}, 200);
+
+  function selectVoice() {
+    msg.voice = voices[this.value];
+    synth.cancel();
+    speakFn();
+  }
+
+  voicesDropdown.addEventListener('change', selectVoice)
+
 </script>
 
 </body>

From 61fd44c194a4c1857236f2a71f0f7c5956c72dd7 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Sun, 8 Jan 2017 20:11:07 -0500
Subject: [PATCH 21/29] completed exercise - useful navbar

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

diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..06a7c64f54 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -55,6 +55,24 @@ <h1>A story about getting lost.</h1>
 
 <script>
 
+  const nav = document.querySelector('#main');
+  const topOfNav = nav.offsetTop;
+
+  function fixNav() {
+    if (window.scrollY >= topOfNav) {
+      document.body.classList.add('fixed-nav');
+      document.body.style.paddingTop = nav.offsetHeight + 'px';
+    }
+    else {
+      document.body.classList.remove('fixed-nav');
+      document.body.style.paddingTop = 0;
+
+
+    }
+  }
+
+  window.addEventListener('scroll', fixNav);
+
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..b772633214 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -84,3 +84,16 @@ nav a {
   transition:all 0.2s;
   text-transform: uppercase;
 }
+
+.fixed-nav nav {
+  position: fixed;
+  box-shadow: 0 5px rgba(0,0,0,0.1);
+}
+
+.fixed-nav li.logo {
+  max-width: 500px;
+}
+
+.fixed-nav .site-wrap {
+  transform: scale(1);
+}

From 640acc5b23ba09580352135bd88260b607af8f4d Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Sun, 8 Jan 2017 20:31:03 -0500
Subject: [PATCH 22/29] finished exercise

---
 .../index-START.html                                      | 8 ++++++++
 1 file changed, 8 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..619afc5b04 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -39,6 +39,14 @@
 
 <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));
 
 </script>
 </body>

From 9dece2e709efbf2105b1cec18dd857eecbf6f62e Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Mon, 9 Jan 2017 15:43:00 -0500
Subject: [PATCH 23/29] finished awesome exercise

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

diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 9780d0d1ac..75c964fee0 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -208,6 +208,34 @@ <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.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
+    background.classList.add('open');
+
+    const dropdown = this.querySelector('.dropdown');
+    const dropdownCoords = dropdown.getBoundingClientRect();
+    const navCoords = nav.getBoundingClientRect();
+
+    background.style.height = dropdown.offsetHeight + 'px';
+    background.style.width = dropdown.offsetWidth + 'px';
+    background.style.left = dropdownCoords.left - navCoords.left + 'px';
+    background.style.top = dropdownCoords.top - navCoords.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 93c86339c8652aa1be7f3acd5225bb1b70e08fec Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Mon, 9 Jan 2017 16:15:23 -0500
Subject: [PATCH 24/29] finished exercise

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

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

From db655348712611fb991c591a94abcbe413f4e7cc Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Tue, 10 Jan 2017 18:29:26 -0500
Subject: [PATCH 25/29] completed exercise

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

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

From 335271cac3f816b75c47c48107cd58e0e2590ec6 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Tue, 17 Jan 2017 21:36:28 -0500
Subject: [PATCH 26/29] finished exercise

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

diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js
index e69de29bb2..106362e432 100644
--- a/29 - Countdown Timer/scripts-START.js	
+++ b/29 - Countdown Timer/scripts-START.js	
@@ -0,0 +1,55 @@
+let timeLeftElement = document.querySelector('.display__time-left');
+let endTimeElement = document.querySelector('.display__end-time');
+let buttons = document.querySelectorAll('button');
+let form = document.querySelector('[name=customForm');
+let input = form.querySelector('input');
+let countdown;
+
+function startTimer() {
+	timer(this.dataset.time);
+}
+
+function timer(seconds) {
+	clearInterval(countdown);
+	let now = Date.now();
+	let then = now + seconds * 1000;
+	displayTimeLeft(seconds);
+	displayEndTime(then);
+
+	countdown = setInterval(() => {
+		let secondsLeft = Math.round((then - Date.now()) / 1000);
+
+		if (secondsLeft < 1) {
+			clearInterval(countdown);
+		}
+
+		displayTimeLeft(secondsLeft);
+	}, 1000);
+
+}
+
+function displayTimeLeft(seconds) {
+	let minutes = Math.floor(seconds / 60);
+	let remainingSeconds = seconds % 60;
+	timeLeftElement.innerHTML = `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+	document.title = timeLeftElement.innerHTML;
+}
+
+function displayEndTime(timestamp) {
+	const endTime = new Date(timestamp);
+	let hours = endTime.getHours();
+	const minutes = endTime.getMinutes();
+	endTimeElement.innerHTML = `Be back at ${hours > 12 ? hours-= 12 : hours}:${minutes < 10 ? '0' : ''}${minutes}`;
+}
+
+
+buttons.forEach(button => {
+	button.addEventListener('click', startTimer);
+})
+
+form.addEventListener('submit', (e) => {
+	e.preventDefault();
+	let minutes = input.value;
+	form.reset();
+	timer(minutes * 60);
+});

From a20aa28bb2778e6ec583b13b7dc0446244dbaf1f Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Tue, 17 Jan 2017 23:57:25 -0500
Subject: [PATCH 27/29] finished exercise

---
 05 - Flex Panel Gallery/index-START.html | 44 ++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..cca12893d9 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -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;
     }
 
 
@@ -54,6 +60,18 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
     }
 
     .panel p {
@@ -62,12 +80,22 @@
       text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
     }
+
+    .panel.open-active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
+    }
+
     .panel p:nth-child(2) {
       font-size: 4em;
     }
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -108,6 +136,22 @@
 
   <script>
 
+  let panels = document.querySelectorAll('.panel');
+
+  function toggleOpen() {
+    this.classList.toggle('open');
+  }
+
+  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 99628bc6df3972bf576444ea772ee6f7b8137b2e Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Wed, 18 Jan 2017 19:03:18 -0500
Subject: [PATCH 28/29] completed 30 day challenge

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

diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
index 2014ff458c..f813eddaa6 100644
--- a/30 - Whack A Mole/index-START.html	
+++ b/30 - Whack A Mole/index-START.html	
@@ -36,6 +36,53 @@ <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;
+
+  function randomTime(min, max) {
+    return Math.round(Math.random() * (max-min) + min);
+  }
+
+  function randomHole(holes) {
+    let index = Math.floor(Math.random() * holes.length);
+    let hole = holes[index];
+    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 addPoint(e) {
+    // will exit if detects fake click
+    if (!e.isTrusted) return;
+    scoreBoard.textContent = Number(scoreBoard.textContent) + 1;
+    this.classList.remove('up');
+  }
+
+
+  function startGame() {
+    scoreBoard.textContent = 0;
+    timeUp = false;
+
+    moles.forEach(mole => {
+      mole.addEventListener('click', addPoint);
+    })
+
+    peep();
+    setTimeout(() => clearInterval(() => timeUp = true), 10000);
+
+  }
 
 </script>
 </body>

From fa90d218d8ce1a74c0d386e9f0a42a465c2b2f77 Mon Sep 17 00:00:00 2001
From: Brandon Culp <bculp513@gmail.com>
Date: Wed, 18 Jan 2017 19:09:44 -0500
Subject: [PATCH 29/29] fixed game timing issue

---
 30 - Whack A Mole/index-START.html | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
index f813eddaa6..8733e804fc 100644
--- a/30 - Whack A Mole/index-START.html	
+++ b/30 - Whack A Mole/index-START.html	
@@ -74,16 +74,14 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
   function startGame() {
     scoreBoard.textContent = 0;
     timeUp = false;
+    peep();
+    setTimeout(() => timeUp = true, 10000);
 
+  }
     moles.forEach(mole => {
       mole.addEventListener('click', addPoint);
     })
 
-    peep();
-    setTimeout(() => clearInterval(() => timeUp = true), 10000);
-
-  }
-
 </script>
 </body>
 </html>