From e91bd8c12556d1b9339986096cc7a16667d84747 Mon Sep 17 00:00:00 2001
From: Steven Scaffidi <sscaff1@gmail.com>
Date: Wed, 11 Jan 2017 13:19:30 -0800
Subject: [PATCH 1/3] fun with vanilla js

---
 01 - JavaScript Drum Kit/index-START.html   | 19 ++++++++++
 02 - JS + CSS Clock/index-START.html        | 22 +++++++++++-
 03 - CSS Variables/index-START.html         | 23 ++++++++++++
 04 - Array Cardio Day 1/index-START.html    | 30 +++++++++++++++-
 05 - Flex Panel Gallery/index-START.html    | 28 +++++++++++++++
 06 - Type Ahead/index-START.html            | 37 ++++++++++++++++++-
 07 - Array Cardio Day 2/index-START.html    | 21 +++++++++--
 08 - Fun with HTML5 Canvas/index-START.html | 40 +++++++++++++++++++++
 8 files changed, 215 insertions(+), 5 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..d29f84319f 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,26 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <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/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..e63904092a 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -53,6 +53,7 @@
       width: 100%;
       height: 100%;
       transform: translateY(-3px); /* account for the height of the clock hands */
+      transition: all 0.05s;
     }
 
     .hand {
@@ -61,13 +62,32 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
     }
 
   </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();
+      // seconds
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+      // minutes
+      const minutes = now.getMinutes();
+      const minuteDegrees = ((minutes / 60) * 360) + 90;
+      minHand.style.transform = `rotate(${minuteDegrees}deg)`;
+      //hours
+      const hours = now.getHours();
+      const hourDegrees = ((hours / 12) * 360) + 90;
+      hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+    }
+    setInterval(setDate, 1000);
   </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..b284c3f632 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,14 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    function handleUpdate() {
+      const suffix = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+
+    const inputs = document.querySelectorAll('.controls input');
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..e33bf3b698 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,28 +31,56 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifInventors = inventors.filter(inv => (inv.year >= 1500 && inv.year < 1600));
+    console.log(fifInventors);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const nameArray = inventors.map(inv => (`${inv.first} ${inv.last}`));
+    console.log(nameArray);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const oldestToYoungest = inventors.sort((a, b) => (a.year < b.year ? -1 : 1));
+    console.log(oldestToYoungest);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const cumulativeLived = inventors.reduce((total, i) => (total + (i.passed - i.year)), 0);
+    console.log(cumulativeLived);
 
     // 5. Sort the inventors by years lived
+	const yearsLivedUtil = (born, died) => (died - born);
+    const yearsLived = inventors.sort((a, b) => (yearsLivedUtil(a.year, a.passed) < yearsLivedUtil(b.year, b.passed) ? -1 : 1));
+	console.log(yearsLived);
 
     // 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 streets = document.querySelector('.mw-category');
+	const links = Array.from(streets.querySelectorAll('a'));
+	const containsDe = links.map(link => link.textContent).filter(text => text.includes('de'));
+	console.log(containsDe);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+	const byLastName = people.sort((last, current) => {
+		const [lastName] = last.split(',');
+		const [currentName] = current.split(',');
+		return lastName < currentName ? -1 : 1;
+	});
+	console.log(byLastName);
 
     // 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 tally = data.reduce((obj, current) => {
+		if (!obj[current]) {
+			obj[current] = 0;
+		}
+		obj[current] += 1;
+		return obj;
+	}, {});
+	console.log(tally);
 
   </script>
 </body>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..e5852adb26 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;
+	  display: flex;
+	  flex-direction: column;
+	  justify-content: center;
+	  align-items: center;
     }
 
 
@@ -54,8 +60,16 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+	  display: flex;
+	  align-items: center;
+	  justify-content: center;
+	  flex: 1 0 auto;
     }
 
+	.panel > *:first-child { transform: translateY(-100%); }
+	.panel > *:last-child { transform: translateY(100%);}
+	.panel.open-active > *:first-child, .panel.open-active > *:last-child { transform: translateY(0); }
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -67,6 +81,7 @@
     }
 
     .panel.open {
+	  flex: 5;
       font-size:40px;
     }
 
@@ -107,7 +122,20 @@
   </div>
 
   <script>
+	const 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>
 
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..64da86471e 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,7 +15,42 @@
     </ul>
   </form>
 <script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+	const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+	const cities = [];
+	fetch(endpoint)
+	.then(blob => blob.json())
+	.then(data => cities.push(...data));
+
+	function findMatches(word, set) {
+		const regex = new RegExp(word, 'gi');
+		return set.filter(place => place.city.match(regex) || place.state.match(regex));
+	}
+
+	function numberWithCommas(x) {
+    	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+	}
+
+	function displayMatches() {
+		const matchArray = findMatches(this.value, cities);
+		const html = matchArray.map(place => {
+			const regex = new RegExp(this.value, 'gi');
+			const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+			const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+			return `
+			<li>
+				<span class="name">${cityName}, ${stateName}</span>
+				<span class="population">${numberWithCommas(place.population)}</span>
+			</li>
+			`
+		}).join('');
+		suggestions.innerHTML = html;
+	}
+
+	const searchInput = document.querySelector('.search');
+	const suggestions = document.querySelector('.suggestions');
+
+	searchInput.addEventListener('change', displayMatches);
+	searchInput.addEventListener('keyup', displayMatches);
 
 </script>
   </body>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..d564f76c92 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -21,21 +21,38 @@
       { text: 'Super good', id: 823423 },
       { text: 'You are the best', id: 2039842 },
       { text: 'Ramen is my fav food ever', id: 123523 },
-      { text: 'Nice Nice Nice!', id: 542328 }
+      { text: 'Nice Nice Nice!', id: 542328 },
     ];
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+	const todayYear = (new Date()).getFullYear();
+	const nineteen = people.some(person => (todayYear - person.year >= 19));
+	console.log(nineteen);
+
     // Array.prototype.every() // is everyone 19 or older?
+	const nineteenEvery = people.every(person => (todayYear - person.year >= 19));
+	console.log(nineteenEvery);
 
     // 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
+	function commentWithId (commentId, id = 823423) {
+		return commentId === id;
+	}
+	const commentOne = comments.find(({ id }) => commentWithId(id));
+	console.log(commentOne);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
+	const commentOneIndex = comments.findIndex(({ id }) => commentWithId(id));
+	console.log(commentOneIndex);
     // delete the comment with the ID of 823423
-
+	const newComments = [
+		...comments.slice(0, commentOneIndex),
+		...comments.slice(commentOneIndex + 1),
+	];
+	console.table(newComments);
   </script>
 </body>
 </html>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..2215775cb1 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,46 @@
 <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;
+
+	let isDrawing = false;
+	let lastX = 0;
+	let lastY = 0;
+	let hue = 0;
+	let direction = true;
+
+	function draw(e) {
+		if (!isDrawing) {
+			return;
+		}
+
+		ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+		ctx.beginPath();
+		ctx.moveTo(lastX, lastY);
+		ctx.lineTo(e.offsetX, e.offsetY);
+		ctx.stroke();
+		[lastX, lastY] = [e.offsetX, e.offsetY];
+		hue++;
+		if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+			direction = !direction;
+		}
+		ctx.lineWidth += direction ? 1 : -1;
+	}
+	
+	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 4f24a65f76b99c366d601108fbe3702e2e0bb9d8 Mon Sep 17 00:00:00 2001
From: Steven Scaffidi <sscaff1@gmail.com>
Date: Fri, 13 Jan 2017 12:31:42 -0800
Subject: [PATCH 2/3] doing more javascript30 :fire:

---
 .../index-START.html                          | 43 ++++++++++-
 11 - Custom Video Player/index.html           |  1 +
 11 - Custom Video Player/scripts.js           | 51 +++++++++++++
 11 - Custom Video Player/style.css            |  1 -
 12 - Key Sequence Detection/index-START.html  |  9 +++
 13 - Slide in on Scroll/index-START.html      | 18 +++++
 15 - LocalStorage/index-START.html            | 73 ++++++++++++++++++-
 15 - LocalStorage/style.css                   | 12 ++-
 16 - Mouse Move Shadow/index-start.html       | 17 +++++
 17 - Sort Without Articles/index-START.html   | 23 ++++++
 .../index-START.html                          | 16 ++++
 21 - Geolocation/index-START.html             |  7 ++
 12 files changed, 264 insertions(+), 7 deletions(-)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index b6a1cc32ec..4bc56aac1d 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -103,7 +103,46 @@
     </div>
   </div>
 
-<script>
-</script>
+	<script>
+		// my code to do this is below (not watching the video)
+		// let shouldSelectMultiple = false;
+		// let firstElementChecked = undefined;
+		// const inputs = document.querySelectorAll('input');
+		// inputs.forEach((input, i) => input.addEventListener('change', (e) => {
+		// 	if ((this.checked && !firstElementChecked) || !e.shiftKey) {
+		// 		firstElementChecked = i;
+		// 	}
+		// 	if (firstElementChecked !== undefined && e.shiftKey) {
+		// 		if (firstElementChecked > i) {
+		// 			for (let j = firstElementChecked; j > i; j--) {
+		// 				inputs[j].checked = true;
+		// 			}
+		// 		} else {
+		// 			for (let j = firstElementChecked; j < i; j++) {
+		// 				inputs[j].checked = true;
+		// 			}
+		// 		}
+		// 	}
+		// }));
+
+		// wes code
+		let lastChecked;
+		const checkboxes = document.querySelectorAll('input');
+		function handleCheck(e) {
+			let inBetween = false;
+			if (e.shiftKey && this.checked) {
+				checkboxes.forEach(checkbox => {
+					if (checkbox === this || checkbox === lastChecked) {
+						inBetween = !inBetween
+					}
+					if (inBetween) {
+						checkbox.checked = true;
+					}
+				});
+			}
+			lastChecked = this;
+		}
+		checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck))
+	</script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 281a15eaa8..a97d8c1f30 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -19,6 +19,7 @@
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
+	   <button class="player__button fullScreen">[ ]</button>
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..93c5d06177 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,51 @@
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+const fullScreenToggle = player.querySelector('.fullScreen');
+
+function togglePlay() {
+	const method = video.paused ? 'play' : 'pause';
+	video[method]();
+}
+
+function updateButton() {
+	const icon = this.paused ? '►' : '❚ ❚';
+	toggle.textContent = icon;
+}
+
+function skip() {
+	video.currentTime += parseInt(this.dataset.skip, 10);
+}
+
+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
+}
+
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+toggle.addEventListener('click', togglePlay);
+skipButtons.forEach(button => button.addEventListener('click', skip));
+ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
+let mousedown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);
+progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
+fullScreenToggle.addEventListener('click', () => player.webkitRequestFullscreen());
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
index c07581c1c0..07e465ee3a 100644
--- a/11 - Custom Video Player/style.css	
+++ b/11 - Custom Video Player/style.css	
@@ -18,7 +18,6 @@ body {
 }
 
 .player {
-  max-width:750px;
   border:5px solid rgba(0,0,0,0.2);
   box-shadow:0 0 20px rgba(0,0,0,0.2);
   position: relative;
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..b11d24b793 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,15 @@
 </head>
 <body>
 <script>
+	const pressed = [];
+	const secretCode = 'wesbos';
+	window.addEventListener('keyup', (e) => {
+		pressed.push(e.key);
+		pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
+		if (pressed.join('').includes(secretCode)) {
+			cornify_add();
+		}
+	});
 </script>
 </body>
 </html>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..08b079f27c 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -58,6 +58,24 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+	const sliderImages = document.querySelectorAll('.slide-in');
+
+	function checkSlide(e) {
+		sliderImages.forEach(sliderImage => {
+			const slideInAt = window.scrollY + window.innerHeight - sliderImage.height / 2;
+			const imageBottom = sliderImage.offsetTop + sliderImage.height;
+			const isHalfShown = slideInAt > sliderImage.offsetTop;
+			const isNotScrolledPast = window.scrollY < imageBottom;
+			if (isHalfShown && isNotScrolledPast) {
+				sliderImage.classList.add('active');
+			} else {
+				sliderImage.classList.remove('active');
+			}
+		})
+	}
+
+	window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..baedac07fd 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,16 +23,85 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+	<div class="actionList">
+		<a href="#" class="action" data-action="clear">
+			Clear List
+		</a>
+		<a href="#" class="action" data-action="check">
+			Check All
+		</a>
+		<a href="#" class="action" data-action="uncheck">
+			Uncheck All
+		</a>
+	</div>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+  const actions = document.querySelectorAll('.action');
 
+  	function saveToStorage(savedItems) {
+		localStorage.setItem('items', JSON.stringify(savedItems));
+		populateList(savedItems, itemsList);
+	}
+
+  	function addItem(e) {
+		e.preventDefault();
+		const { value: text } = this.querySelector('[name=item]');
+		const item = {
+			text,
+			done: false,
+		};
+		items.push(item);
+		saveToStorage(items);
+		this.reset();
+	}
+
+	function populateList(plates = [], platesList) {
+		platesList.innerHTML = plates.map((plate, i) => {
+			return `
+				<li>
+					<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
+					<label for="item${i}">${plate.text}</label>
+				</li>
+			`;
+		}).join('');
+	}
+
+	function toggleDone(e) {
+		if (!e.target.matches('input')) {
+			return;
+		}
+		const el = e.target;
+		const { index } = el.dataset;
+		items[index].done = !items[index].done;
+		saveToStorage(items);
+	}
+	// Wes' Challenge from the video :hurray:
+	function handleAction(e) {
+		e.preventDefault();
+		const { action } = this.dataset
+		switch (action) {
+			case 'clear':
+				return saveToStorage([]);
+			case 'check':
+				return saveToStorage(items.map(item => Object.assign({}, item, { done: true })));
+			case 'uncheck':
+				return saveToStorage(items.map(item => Object.assign({}, item, { done: false })));
+			default:
+				break;
+		}
+	}
+
+	addItems.addEventListener('submit', addItem);
+	itemsList.addEventListener('click', toggleDone);
+	actions.forEach(action => action.addEventListener('click', handleAction));
+
+	populateList(items, itemsList);
 </script>
 
 
 </body>
 </html>
-
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
index ea5bab179c..2fba5e6abc 100644
--- a/15 - LocalStorage/style.css	
+++ b/15 - LocalStorage/style.css	
@@ -54,7 +54,7 @@
 
     }
 
-    .plates input {
+    /*.plates input {
       display: none;
     }
 
@@ -65,7 +65,7 @@
 
     .plates input:checked + label:before {
       content: '🌮';
-    }
+    }*/
 
     .add-items {
       margin-top: 20px;
@@ -76,3 +76,11 @@
       outline:0;
       border:1px solid rgba(0,0,0,0.1);
     }
+
+	.actionList {
+		margin-top: 15px;
+	}
+
+	.action {
+		padding: 0 10px;
+	}
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..3fca19d225 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,23 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+	const hero = document.querySelector('.hero');
+	const text = hero.querySelector('h1');
+	const walk = 100;
+
+	function shadow(e) {
+		const { offsetWidth: width, offsetHeight: height } = hero;
+		let { offsetX: x, offsetY: y} = e;
+		if (this !== e.target) {
+			x += e.target.offsetLeft;
+			y += e.target.offsetTop;
+		}
+		const xWalk = Math.round((x / width * walk) - (walk / 2));
+		const yWalk = Math.round((y / height * walk) - (walk / 2));
+		text.style.textShadow = `${xWalk}px ${yWalk}px 0 rgba(255, 0, 255, 0.7)`;
+	}
+
+	hero.addEventListener('mousemove', shadow);
 </script>
 </body>
 </html>
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..2697977332 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -43,8 +43,31 @@
   <ul id="bands"></ul>
 
 <script>
+// my approach without watching the video...Clearly need more practice with regex
 const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
+const bandList = document.querySelector('#bands');
+const regexs = [/^the /, /^a /, /^an /];
 
+function removeExpressions(word, regex) {
+	return word.replace(regex, '');
+}
+
+const sortedBands = bands.sort((a, b) => {
+	let word1 = a;
+	let word2 = b;
+	regexs.forEach(regex => {
+		const regexVar = new RegExp(regex, 'gi');
+		if (a.match(regexVar)) {
+			word1 = removeExpressions(a, regexVar);
+		}
+		if (b.match(regexVar)) {
+			word2 = removeExpressions(b, regexVar);
+		}
+	});
+	return word1 < word2 ? -1 : 1;
+});
+
+bandList.innerHTML = sortedBands.map(band => `<li>${band}</li>`).join('');
 
 </script>
 
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index 3eaee0f3ef..4aba495d54 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,22 @@
     </li>
 
 <script>
+	// my solution without watching the video
+	const items = document.querySelectorAll('li');
+	const timeArray = Array.from(items);
+
+	const totalTime = timeArray.reduce((obj, item) => {
+		const [minutes, seconds] = item.dataset.time.split(':').map(parseFloat);
+		obj.totalMinutes += minutes;
+		obj.totalSeconds += seconds;
+		return obj;
+	}, { totalHours: 0, totalMinutes: 0, totalSeconds: 0 });
+
+	totalTime.totalMinutes += Math.floor(totalTime.totalSeconds / 60);
+	totalTime.totalSeconds %= 60;
+	totalTime.totalHours += Math.floor(totalTime.totalMinutes / 60);
+	totalTime.totalMinutes %= 60;
+	console.log(totalTime);
 </script>
 </body>
 </html>
diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
index a1b981b1cd..e484e60c25 100644
--- a/21 - Geolocation/index-START.html	
+++ b/21 - Geolocation/index-START.html	
@@ -57,6 +57,13 @@ <h1 class="speed">
     /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
   </style>
   <script>
+  	const arrow = document.querySelector('.arrow');
+	const speed = document.querySelector('.speed');
+
+	navigator.geolocation.watchPosition(data => {
+		speed.textContent = data.coords.speed;
+		arrow.style.transform = `rotate(${data.coords.heading}deg)`;
+	}, error => console.log(error));
   </script>
 </body>
 </html>

From be18a47c6561d6be2befa42c407acb31759889f8 Mon Sep 17 00:00:00 2001
From: Steven Scaffidi <sscaff1@gmail.com>
Date: Tue, 24 Jan 2017 15:34:55 -0800
Subject: [PATCH 3/3] need to solve the rest at home

---
 .tern-project                                 |  8 +++
 .../index-START.html                          | 19 ++++++-
 23 - Speech Synthesis/index-START.html        | 41 +++++++++++++---
 24 - Sticky Nav/index-START.html              | 16 +++++-
 24 - Sticky Nav/style-START.css               | 13 +++++
 .../index-START.html                          | 13 ++++-
 26 - Stripe Follow Along Nav/index-START.html | 32 ++++++++++++
 27 - Click and Drag/index-START.html          | 31 ++++++++++++
 28 - Video Speed Controller/index-START.html  | 17 +++++++
 29 - Countdown Timer/scripts-START.js         | 49 +++++++++++++++++++
 30 - Whack A Mole/index-START.html            | 48 ++++++++++++++++++
 11 files changed, 277 insertions(+), 10 deletions(-)
 create mode 100644 .tern-project

diff --git a/.tern-project b/.tern-project
new file mode 100644
index 0000000000..d6340ba088
--- /dev/null
+++ b/.tern-project
@@ -0,0 +1,8 @@
+{
+  "ecmaVersion": 6,
+  "libs": [
+    "browser",
+    "jquery"
+  ],
+  "plugins": {}
+}
\ No newline at end of file
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..40115d233e 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,8 +26,23 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+	const triggers = document.querySelectorAll('a');
+	const highlight = document.createElement('span');
+	highlight.classList.add('highlight');
+	document.body.append(highlight);
+	function highlightLink() {
+		const linkCoords = this.getBoundingClientRect();
+		const coords = {
+			top: linkCoords.top + window.scrollY,
+			left: linkCoords.left + window.scrollX,
+			width: linkCoords.width,
+			height: linkCoords.height,
+		};
+		highlight.style.width = `${coords.width}px`;
+		highlight.style.height = `${coords.height}px`;
+		highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`
+	}
+	triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
   </script>
 </body>
 </html>
-
diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..4b9a0419a1 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -29,12 +29,41 @@ <h1>The Voiceinator 5000</h1>
     </div>
 
 <script>
-  const msg = new SpeechSynthesisUtterance();
-  let voices = [];
-  const voicesDropdown = document.querySelector('[name="voice"]');
-  const options = document.querySelectorAll('[type="range"], [name="text"]');
-  const speakButton = document.querySelector('#speak');
-  const stopButton = document.querySelector('#stop');
+	const msg = new SpeechSynthesisUtterance();
+	let voices = [];
+	const voicesDropdown = document.querySelector('[name="voice"]');
+	const options = document.querySelectorAll('[type="range"], [name="text"]');
+	const speakButton = document.querySelector('#speak');
+	const stopButton = document.querySelector('#stop');
+	msg.text = document.querySelector('[name="text"]').value;
+	function populateVoices() {
+		voices = this.getVoices();
+		voicesDropdown.innerHTML = voices
+		.filter(voice => voice.lang.includes('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()
+		return startOver && speechSynthesis.speak(msg);
+	}
+
+	function setOption() {
+		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>
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..7c27a13a45 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,7 +54,21 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-
+	const nav = document.querySelector('#main');
+	const topOfNav = nav.offsetTop;
+	function fixNav() {
+		if (window.scrollY >= topOfNav) {
+			console.log(`${nav.offsetHeight} px`);
+			document.body.style.paddingTop = `${nav.offsetHeight}px`;
+			document.body.classList.add('fixed-nav');
+		} 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..d53447804c 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;
@@ -39,6 +43,11 @@ h1 {
   text-shadow: 3px 4px 0 rgba(0,0,0,0.2)
 }
 
+.fixed-nav nav {
+	position: fixed;
+	box-shadow: 0 5px rgba(0, 0, 0, 0.1);
+}
+
 nav {
   background:black;
   top:0;
@@ -72,6 +81,10 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+	max-width: 500px;
+}
+
 li.logo a {
   color:black;
 }
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
index 98f5e070c4..d49e45b239 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,18 @@
 
 <button></button>
 <script>
-
+	const divs = document.querySelectorAll('div');
+	const button = document.querySelector('button');
+	function logText(e) {
+		console.log(this.classList.value);
+	}
+
+	divs.forEach(div => div.addEventListener('click', logText, { once: true }));
+	button.addEventListener('click', () => {
+		console.log('Click')
+	}, {
+		once: true,
+	});
 </script>
 </body>
 </html>
diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 9780d0d1ac..0f18d6a6d3 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -208,6 +208,38 @@ <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();
+
+		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>
diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
index b8609315f7..8307ce30e2 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -35,6 +35,37 @@
   </div>
 
 <script>
+	const slider = document.querySelector('.items');
+	let isDown = false;
+	let startX;
+	let scrollLeft;
+
+	slider.addEventListener('mousedown', (e) =>{
+		isDown = true;
+		startX = e.pageX - slider.offsetLeft;
+		scrollLeft = slider.scrollLeft;
+		slider.classList.add('active');
+	});
+
+	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) * 3;
+		slider.scrollLeft = scrollLeft - walk;
+	});
 </script>
 
   </body>
diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
index c4cbd4259a..88b91ca16f 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 = speed.querySelector('.speed-bar');
+	const video = document.querySelector('.flex');
+
+	function changeSpeed(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', changeSpeed);
 </script>
 </body>
 </html>
diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js
index e69de29bb2..d578b365cf 100644
--- a/29 - Countdown Timer/scripts-START.js	
+++ b/29 - Countdown Timer/scripts-START.js	
@@ -0,0 +1,49 @@
+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) {
+	clearInterval(countdown);
+	const now = Date.now();
+	const then = now + seconds * 1000;
+	displayTimeLeft(seconds);
+	displayEndTime(then);
+	countdown = setInterval(() => {
+		const secondsLeft = Math.round((then - Date.now()) / 1000);
+		if (secondsLeft < 0) {
+			clearInterval(countdown);
+			return;
+		}
+		displayTimeLeft(secondsLeft);
+		displayEndTime(then);
+	}, 1000);
+}
+
+function displayTimeLeft(seconds) {
+	const minutes = Math.floor(seconds / 60);
+	const remainderSeconds = seconds % 60;
+	const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
+	document.title = display;
+	timerDisplay.textContent = display;
+}
+
+function displayEndTime(timestamp) {
+	const end = new Date(timestamp);
+	const hour = end.getHours();
+	const minutes = end.getMinutes();
+	endTime.textContent = `Be Back at ${hour > 12 ? hour - 12 : hour}:${minutes < 10 ? '0': ''}${minutes}`;
+}
+
+function startTimer() {
+	const seconds = parseInt(this.dataset.time, 10);
+	timer(seconds);
+}
+
+buttons.forEach(button => button.addEventListener('click', startTimer))
+document.customForm.addEventListener('submit', function(e) {
+	e.preventDefault();
+	const mins = this.minutes.value;
+	timer(mins * 60);
+	this.reset();
+})
diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
index 2014ff458c..cad8544fa1 100644
--- a/30 - Whack A Mole/index-START.html	
+++ b/30 - Whack A Mole/index-START.html	
@@ -37,6 +37,54 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
   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(listHoles) {
+		const ind = Math.floor(Math.random() * listHoles.length)
+		const hole = listHoles[ind];
+		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(() => {
+			if (!timeUp) {
+				peep();
+			}
+			hole.classList.remove('up');
+		}, 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>
 </html>