From d6be1996755e281972faabc83812849211c7762c Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Fri, 23 Dec 2016 03:06:28 -0800
Subject: [PATCH 01/27]  Day 1: Drum Kit

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..c8701e2e6a 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,24 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  function playSound(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    if (!audio) return;
+    audio.currentTime = 0;
+    audio.play();
 
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return;
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  window.addEventListener("keyup", playSound);
 </script>
 
 

From 6054a0a0f8c77e9e5ff18562f4a0a4dd66eb2886 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Fri, 23 Dec 2016 03:47:32 -0800
Subject: [PATCH 02/27] Day 2: Clock

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

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..72d5395db3 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,44 @@
       background:black;
       position: absolute;
       top:50%;
+      right:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      /*transition: 0.05s;*/
+      /*transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);*/
+    }
+
+    .hour-hand {
+      width: 20%;
+    }
+
+    .min-hand {
+      width: 50%;
+    }
+
+    .second-hand{
+      width: 40%;
     }
 
   </style>
 
   <script>
+  const hourhand = document.querySelector('.hour-hand');
+  const minutehand = document.querySelector('.min-hand');
+  const secondhand = document.querySelector('.second-hand');
+
+  function updateTime() {
+    const now = new Date();
+    const hour = now.getHours();
+    const minute = now.getMinutes();
+    const second = now.getSeconds();
+
+    secondhand.style.transform = `rotate(${90 + second * 6}deg)`;
+    minutehand.style.transform = `rotate(${90 + minute * 6}deg)`;
+    hourhand.style.transform = `rotate(${90 + hour * 30}deg)`;
+  }
 
+  setInterval(updateTime, 1000);
 
   </script>
 </body>

From bfe275585c56fb7e0c417721783f590e9cb3a78d Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Sat, 24 Dec 2016 03:19:34 -0800
Subject: [PATCH 03/27] Day 3: Update CSS Variables

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..797c358320 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,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+  var inputs = document.querySelectorAll(".controls input");
+
+  function handleUpdate() {
+    var suffix = this.dataset.sizing || '';
+    var val = this.value;
+    document.documentElement.style.setProperty(`--${this.name}`, val + suffix);
+  }
+
+  inputs.forEach(input => input.addEventListener("input", handleUpdate));
+
   </script>
 
 </body>

From b0cda3a4d14b0e615192785107652a6743a43a47 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Sat, 24 Dec 2016 23:01:04 -0800
Subject: [PATCH 04/27] Day 4: Javascript Arrays

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 317883a4c1..8a10669277 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,28 +31,74 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    function checkFifteen(inventor) {
+      return (inventor.year >= 1500 && inventor.year < 1600);
+    }
+    const fifteen = inventors.filter(checkFifteen);
+    console.log(fifteen);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    function mapName(inventor) {
+      return inventor.first + " " + inventor.last;
+    }
+    const inventorNames = inventors.map(mapName);
+    console.log(inventorNames);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    function compareBirth(a, b) {
+      return a.year - b.year;
+    }
+    const sortedBirth = inventors.sort(compareBirth);
+    console.log(sortedBirth);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    function reduceYears(sum, inventor) {
+      return sum + (inventor.passed - inventor.year);
+    }
+    const totalYears = inventors.reduce(reduceYears, 0);
+    console.log(totalYears);
 
     // 5. Sort the inventors by years lived
+    function compareYears(a, b) {
+      return (a.passed - a.year) - (b.passed - b.year);
+    }
+    const yearsLived = inventors.sort(compareYears);
+    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 wrapper = document.querySelector(".mw-category");    
+    // const links = Array.prototype.slice.call(wrapper.querySelectorAll("a"));
+    // const boulevardNames = links.map(link => link.textContent);
+    // const de = boulevardNames.filter(name => name.includes("de"));
+    // console.log(de);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    function compareLast(a, b) {
+      const lasta = a.split(", ")[0];
+      const lastb = b.split(", ")[0];
+      return lasta.localeCompare(lastb);
+    }
+    const sortedLast = people.sort(compareLast);
+    console.log(sortedLast);
 
     // 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' ];
+    function sumWords(obj, word) {
+      if (obj[word] == null) {
+        obj[word] = 1;
+      } else {
+        obj[word] += 1;
+      }
+      return obj;
+    }
+    const sumInstances = data.reduce(sumWords, {});
+    console.log(sumInstances);
 
   </script>
 </body>

From 5def6ba1da35cca2b6deba559c9efbd5af31f713 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Sun, 25 Dec 2016 00:13:40 -0800
Subject: [PATCH 05/27] Day 5: Adjust flex box size

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

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..74fd170a2f 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,10 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      /*justify-content: center;*/
     }
 
 
@@ -54,6 +59,26 @@
       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.open-active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
     }
 
     .panel p {
@@ -68,6 +93,7 @@
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -107,7 +133,27 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll(".panel");
+    
+    function close(p) {
+      if (p != this) {
+        p.classList.toggle("open", false);
+      }
+    }
+
+    function toggleOpen() {
+      panels.forEach(close, this);
+      this.classList.toggle("open");
+    }
+
+    function toggleActive(e) {
+      if (e.propertyName == "flex-grow") {
+        this.classList.toggle("open-active");
+      }
+    }
 
+    panels.forEach(panel => panel.addEventListener("click", toggleOpen));
+    panels.forEach(panel => panel.addEventListener("transitionend", toggleActive));
   </script>
 
 

From 5e8a9a33f44de812250820201349566404f859ad Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Mon, 26 Dec 2016 23:18:23 -0800
Subject: [PATCH 06/27] Day 6: Search Suggestions from JSON

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

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..3c941a7de5 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,47 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+var request = new XMLHttpRequest();
+var cities = [];
+request.onreadystatechange = function () {
+  if (this.readyState == 4 && this.status == 200) {
+    var json = JSON.parse(this.responseText);
+    json.forEach(item => cities.push(item));
+  }
+}
+request.open("GET", endpoint, true);
+request.send();
+
+function matchWord(subtext) {
+  subtext = subtext.toLowerCase();
+  return cities.filter(c => c.city.toLowerCase().includes(subtext) || c.state.toLowerCase().includes(subtext));
+}
+
+function updateMatches(e) {
+  var updatedCities = matchWord(this.value);
+
+  while (suggestions.firstChild) {
+    suggestions.removeChild(suggestions.firstChild);
+  }
+
+  const updatedHTML = updatedCities.map(c => {
+    const regex = new RegExp(this.value, "gi");
+    const cityName = c.city.replace(regex, `<span class="hl">${this.value}</span>`)
+    const stateName = c.state.replace(regex, `<span class="hl">${this.value}</span>`)
+    return `
+    <li>
+      <span class="name">${cityName}, ${stateName}</span>
+      <span class="population">${c.population}</span>
+    </li>
+    `;
+  }).join('');
+  suggestions.innerHTML = updatedHTML;
+}
+
+var input = document.querySelector(".search");
+var suggestions = document.querySelector(".suggestions");
+input.addEventListener("keyup", updateMatches);
+
 </script>
   </body>
 </html>

From 44efe5f831b2559be90f27e5ee54c55b026718c0 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Mon, 26 Dec 2016 23:31:42 -0800
Subject: [PATCH 07/27] Day 7: Array Cardio 2

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..0315bc291f 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -27,14 +27,26 @@
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
     // Array.prototype.every() // is everyone 19 or older?
+    function nineteen(person) {
+      const y = new Date().getFullYear();
+      const age = y - person.year;
+      return age >= 19;
+    }
+    console.log(people.some(nineteen));
+    console.log(people.every(nineteen));
 
     // 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 findID(comment) {
+      return comment.id == this;
+    }
+    console.log(comments.find(findID, 823423));
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    console.log(comments.findIndex(findID, 823423));
 
   </script>
 </body>

From b822322877bf1a7ef845933d88b9ba625692ddd0 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Tue, 27 Dec 2016 12:34:36 -0800
Subject: [PATCH 08/27] Day 8: Drawing on canvas

---
 07 - Array Cardio Day 2/index-START.html    |  2 +-
 08 - Fun with HTML5 Canvas/index-START.html | 38 +++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 0315bc291f..2ab19e4e1b 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -28,7 +28,7 @@
     // Array.prototype.some() // is at least one person 19 or older?
     // Array.prototype.every() // is everyone 19 or older?
     function nineteen(person) {
-      const y = new Date().getFullYear();
+      const y = (new Date()).getFullYear();
       const age = y - person.year;
       return age >= 19;
     }
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..dc992f5d4e 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -6,7 +6,45 @@
 </head>
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
+
 <script>
+const canvas = document.querySelector('#draw');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+ctx.strokeStyle = '#BADA55';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+
+let isDrawing = false;
+let lastX = null;
+let lastY = null;
+let hue = 0;
+let direction = true;
+
+function draw(e) {
+  if (!isDrawing) return;
+  ctx.beginPath();
+  if (!lastX) lastX = e.offsetX;
+  if (!lastY) lastY = e.offsetY;
+  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+  ctx.moveTo(lastX, lastY);
+  ctx.lineTo(e.offsetX, e.offsetY);
+  ctx.stroke();
+  lastX = e.offsetX;
+  lastY = e.offsetY;
+  hue++;
+  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) direction = !direction;
+  if (direction) ctx.lineWidth++;
+  else ctx.lineWidth--;
+}
+
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mousedown', () => isDrawing = true);
+canvas.addEventListener('mouseup', () => {
+  isDrawing = false; lastX = null; lastY = null;});
+canvas.addEventListener('mouseout', () => {
+  isDrawing = false; lastX = null; lastY = null;});
 </script>
 
 <style>

From f8fd11011426eca377f393ff761260ff81454026 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Tue, 27 Dec 2016 13:24:57 -0800
Subject: [PATCH 09/27] Day 10: Multiple checkbox

---
 .../index-START.html                          | 36 +++++++++++++++++++
 1 file changed, 36 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..c516a14878 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,42 @@
   </div>
 
 <script>
+const checkboxes = Array.prototype.slice.call(document.querySelectorAll("[type=checkbox]"));
+let shiftDown = false;
+let lastChecked = null;
+
+function checkBetween() {
+  if (!shiftDown) {
+    lastChecked = checkboxes.indexOf(this);
+    return;
+  }
+  else if (lastChecked == null) {
+    lastChecked = checkboxes.indexOf(this);
+    return;
+  }
+
+  let index = checkboxes.indexOf(this);
+  let toCheck = this.checked;
+
+  for (i = Math.min(lastChecked, index); i <= Math.max(lastChecked, index); i++) {
+    checkboxes[i].checked = toCheck;
+  }
+
+  lastChecked = null;
+}
+
+checkboxes.forEach(box => box.addEventListener("click", checkBetween));
+
+function shiftTrue(e) {
+  if (e.key == "Shift") shiftDown = true;
+}
+
+function shiftFalse(e) {
+  if (e.key == "Shift") shiftDown = false;
+}
+
+window.addEventListener("keydown", shiftTrue);
+window.addEventListener("keyup", shiftFalse);
 </script>
 </body>
 </html>

From 8459aabe5ecc1b588d7de61b6b4c9eaccd6a0ad4 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Wed, 28 Dec 2016 21:55:15 -0800
Subject: [PATCH 10/27] Day 11: Video Controls

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

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..09f69b6d35 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,58 @@
+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');
+
+function togglePlay() {
+	if (video.paused) {
+		video.play();
+	}
+	else {
+		video.pause();
+	}
+}
+
+function updateButton() {
+	const icon = this.paused ? '►' : '❚ ❚';
+	toggle.innerHTML = icon;
+}
+
+function updateProgress() {
+	let currentTime = video.currentTime;
+	let duration = video.duration;
+	let percent = (currentTime / duration) * 100;
+	progressBar.style.flexBasis = `${percent}%`;
+}
+
+function skipButton() {
+	let amt = parseInt(this.dataset.skip);
+	video.currentTime += amt;
+}
+
+function updateRange() {
+	video[this.name] = this.value;
+}
+
+function scrub(e) {
+	let newTime = (e.offsetX / progress.offsetWidth) * video.duration;
+	video.currentTime = newTime;
+}
+
+toggle.addEventListener("click", togglePlay);
+video.addEventListener("click", togglePlay);
+video.addEventListener("timeupdate", updateProgress);
+video.addEventListener("play", updateButton);
+video.addEventListener("pause", updateButton);
+skipButtons.forEach(button => button.addEventListener("click", skipButton));
+ranges.forEach(range => {
+	range.addEventListener("change", updateRange)
+	range.addEventListener("mousemove", updateRange);
+	});
+let mousedown = false;
+progress.addEventListener("click", scrub);
+progress.addEventListener("mousemove", e => mousedown && scrub(e));
+progress.addEventListener("mousedown", () => mousedown = true);
+progress.addEventListener("mouseup", () => mousedown = false);
\ No newline at end of file

From 8021e3cdef109e71cad1a8ebead8e03e3590ac64 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Wed, 28 Dec 2016 22:10:02 -0800
Subject: [PATCH 11/27] Day 12: Type "michael" to add unicorns

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

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..e63d2be228 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,18 @@
 </head>
 <body>
 <script>
+const secretCode = 'michael';
+let seq = [];
+function updateSeq(e) {
+	let key = e.key;
+	seq.push(key);
+	seq = seq.slice(-secretCode.length);
+	if (seq.join('') == secretCode) {
+		cornify_add();
+	}
+}
+
+window.addEventListener("keyup", updateSeq);
 </script>
 </body>
 </html>

From 0529ea694ed7c7fe36ce2ac66e825727646afec9 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Wed, 28 Dec 2016 23:20:16 -0800
Subject: [PATCH 12/27] Day 13: Slide in images on scroll

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

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..3956c950c4 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -58,6 +58,35 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    function checkSlide(e) {
+      let windowTop = window.scrollY;
+      let windowBot = windowTop + window.innerHeight;
+      images.forEach(image => {
+        let imageTop = image.offsetTop;
+        let imageBot = imageTop + image.height;
+        let seeTop = imageTop > windowTop && imageTop < windowBot;
+        let seeBot = imageBot > windowTop && imageBot < windowBot;
+        if (seeTop || seeBot) {
+          image.classList.add('active');
+        }
+        else {
+          image.classList.remove('active');
+        }
+      });
+    }
+
+    let ticking = false;
+    const images = document.querySelectorAll('.slide-in');
+    window.addEventListener('scroll', e => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          checkSlide(e);
+          ticking = false;
+        });
+      }
+      ticking = true;
+    });
+
   </script>
 
   <style>

From 0d43feeea47e8e63d1c78de9d3de812d2d000c68 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Thu, 29 Dec 2016 02:46:32 -0800
Subject: [PATCH 13/27] Day 15: LocalStorage

---
 15 - LocalStorage/index-START.html | 48 ++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..b1721c596d 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,12 +23,54 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <button id="delete">Delete All</button>
   </div>
 
 <script>
-  const addItems = document.querySelector('.add-items');
-  const itemsList = document.querySelector('.plates');
-  const items = [];
+  var addItems = document.querySelector('.add-items');
+  var itemsList = document.querySelector('.plates');
+  var items = JSON.parse(localStorage.getItem('items')) || [];
+  var deleteBtn = document.getElementById('delete');
+
+  function submitItem(e) {
+    e.preventDefault();
+    const txt = this.querySelector('[name=item]').value;
+    const item = {
+      text: txt,
+      done: false
+    };
+    this.reset();
+    items.push(item);
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  function populateList(plates = [], platesList) {
+    platesList.innerHTML = plates.map((plate, i) => {
+      return `
+        <li>
+          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''}>
+          <label for="item${i}">${plate.text}</label>
+        </li>
+      `
+    }).join('');
+  }
+
+  function toggleItem(e) {
+    if (!e.target.matches('input')) return;
+    items[e.target.dataset.index].done = !items[e.target.dataset.index].done;
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  addItems.addEventListener('submit', submitItem);
+  populateList(items, itemsList);
+  itemsList.addEventListener('click', toggleItem);
+  deleteBtn.addEventListener('click', () => {
+    localStorage.removeItem('items');
+    items = [];
+    populateList(items, itemsList);
+  });
 
 </script>
 

From d1050d76d145e0f5e9268fd7e6bbad4631c3b060 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Sat, 31 Dec 2016 00:42:06 -0800
Subject: [PATCH 14/27] Day 16: Mouse move shadow

---
 13 - Slide in on Scroll/index-START.html |  7 ++----
 16 - Mouse Move Shadow/index-start.html  | 27 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 3956c950c4..a0025c673e 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -35,9 +35,6 @@ <h1>Slide in on Scroll</h1>
     <img src="http://unsplash.it/400/400" class="align-right slide-in">
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
-
-
 
 
   </div>
@@ -62,8 +59,8 @@ <h1>Slide in on Scroll</h1>
       let windowTop = window.scrollY;
       let windowBot = windowTop + window.innerHeight;
       images.forEach(image => {
-        let imageTop = image.offsetTop;
-        let imageBot = imageTop + image.height;
+        let imageTop = image.offsetTop + image.height / 3;
+        let imageBot = imageTop + image.height * 2 / 3;
         let seeTop = imageTop > windowTop && imageTop < windowBot;
         let seeBot = imageBot > windowTop && imageBot < windowBot;
         if (seeTop || seeBot) {
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..89dcf5df3e 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,33 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const walk = 100;
+  console.dir(text);
+
+  function shadow(e) {
+    var width = hero.offsetWidth;
+    var height = hero.offsetHeight;
+    var x = e.offsetX;
+    var y = e.offsetY;
+
+    if (e.target !== this) {
+      x += e.target.offsetLeft;
+      y += e.target.offsetTop;
+    }
+
+    var xWalk = Math.round(walk * x / width - walk / 2);
+    var yWalk = Math.round(walk * y / height - walk / 2);
+
+    text.style.textShadow = `
+      ${xWalk}px ${yWalk}px 0 rgba(255,255,0,1),
+      ${-xWalk}px ${-yWalk}px 0 rgba(0,0,255,1)
+    `;
+  }
+
+  hero.addEventListener('mousemove', shadow);
+
 </script>
 </body>
 </html>

From 924d21fdf334247809e8a7e8215251c994fa8963 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Sat, 31 Dec 2016 01:04:33 -0800
Subject: [PATCH 15/27] Day 17: Sort and Display

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

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..9d358bece8 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -43,8 +43,28 @@
   <ul id="bands"></ul>
 
 <script>
-const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
+  const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
+  const articles = ['A ', 'An ', 'The '];
 
+  function sortBands(a, b) {
+    var newa = a;
+    var newb = b;
+    articles.forEach(article => {
+      if (a.startsWith(article)) {
+        newa = a.slice(article.length);
+      }
+      if (b.startsWith(article)) {
+        newb = b.slice(article.length);
+      }
+    });
+    return newa.localeCompare(newb);
+  }
+
+  const sorted = bands.sort(sortBands);
+  const bandsHTML = document.querySelector('#bands');
+  bandsHTML.innerHTML = sorted.map(band => {
+    return `<li>${band}</li>`;
+  }).join('');
 
 </script>
 

From abfd1bfb3d371888c59c215423171c85183c6032 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Sun, 1 Jan 2017 22:32:15 -0800
Subject: [PATCH 16/27] Day 18: Array reduce

---
 18 - Adding Up Times with Reduce/index-START.html | 10 ++++++++++
 1 file changed, 10 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..19f2f654ff 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,16 @@
     </li>
 
 <script>
+  const times = Array.from(document.querySelectorAll('[data-time]'), (video) => video.dataset.time);
+  const timeSec = times.map((time) => {
+    var minSec = time.split(':').map((boy) => parseInt(boy, '10'));
+    return (minSec[0] * 60) + minSec[1];
+  });
+  const total = timeSec.reduce((a, b) => a + b);
+  var hours = Math.floor(total / 3600);
+  var minutes = Math.floor((total % 3600) / 60);
+  var seconds = ((total % 3600) % 60) % 60;
+  console.log(`${hours}:${minutes}:${seconds}`);
 </script>
 </body>
 </html>

From 312b3504935741371bcbd77b0f51e788d2dbd69d Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Sun, 1 Jan 2017 23:57:25 -0800
Subject: [PATCH 17/27] Day 19: Webcam + Filters

---
 19 - Webcam Fun/index.html |   8 ++-
 19 - Webcam Fun/scripts.js | 107 +++++++++++++++++++++++++++++++++++++
 2 files changed, 113 insertions(+), 2 deletions(-)

diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html
index d4ffc4dc2a..30ce2bd395 100755
--- a/19 - Webcam Fun/index.html	
+++ b/19 - Webcam Fun/index.html	
@@ -10,7 +10,11 @@
   <div class="photobooth">
     <div class="controls">
       <button onClick="takePhoto()">Take Photo</button>
-<!--       <div class="rgb">
+      <p><input type="checkbox" id="redEffect">Red Effect</p>
+      <p><input type="checkbox" id="rgbSplit">RGB Split</p>
+      <p><input type="checkbox" id="ghostEffect">Ghost Effect</p>
+      <p><input type="checkbox" id="greenScreen">Green Screen</p>
+      <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 +33,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..c8be9586b8 100644
--- a/19 - Webcam Fun/scripts.js	
+++ b/19 - Webcam Fun/scripts.js	
@@ -3,3 +3,110 @@ const canvas = document.querySelector('.photo');
 const ctx = canvas.getContext('2d');
 const strip = document.querySelector('.strip');
 const snap = document.querySelector('.snap');
+const filters = document.querySelectorAll('[type=checkbox]');
+
+function getVideo() {
+  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+    .then(localMediaStream => {
+      console.log(localMediaStream);
+      video.src = window.URL.createObjectURL(localMediaStream);
+      video.play();
+    })
+    .catch(err => {
+      console.error(`OH NO!!!`, err);
+    });
+}
+
+function paintToCanvas() {
+  const width = video.videoWidth;
+  const height = video.videoHeight;
+  canvas.width = width;
+  canvas.height = height;
+
+  setInterval(() => {
+    ctx.drawImage(video, 0, 0, width, height);
+    let pixels = ctx.getImageData(0, 0, width, height);
+    ctx.globalAlpha = 1.0;
+    filters.forEach(filter => {
+    	if (!filter.checked) return;
+    	switch (filter.id) {
+    		case 'redEffect':
+    			pixels = redEffect(pixels);
+    			break;
+    		case 'rgbSplit':
+    			pixels = rgbSplit(pixels);
+    			break;
+    		case 'ghostEffect':
+    			ctx.globalAlpha = 0.1;
+    			break;
+    		case 'greenScreen':
+    			pixels = greenScreen(pixels);
+    			break;
+    		default:
+    			throw 'Unknown filter';
+    	}
+    });
+    ctx.putImageData(pixels, 0, 0);
+  }, 16);
+}
+
+function takePhoto() {
+	snap.currentTime = 0;
+	snap.play();
+
+	var data = canvas.toDataURL('image/jpeg');
+	var link = document.createElement('a');
+	link.href = data;
+	// link.setAttribute('download', 'handsome');
+	link.setAttribute('target', '_blank');
+  link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
+  strip.insertBefore(link, strip.firstChild);
+}
+
+function redEffect(pixels) {
+  for(let i = 0; i < pixels.data.length; i += 4) {
+    pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
+    pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
+    pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
+  }
+  return pixels;
+}
+
+function rgbSplit(pixels) {
+  for(let i = 0; i < pixels.data.length; i+=4) {
+    pixels.data[i - 150] = pixels.data[i + 0]; // RED
+    pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
+    pixels.data[i - 550] = pixels.data[i + 2]; // Blue
+  }
+  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);

From 08fa958a54ce50d6988e17b0a193683d26fab2ef Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Tue, 3 Jan 2017 09:52:05 -0800
Subject: [PATCH 18/27] Day 20: Web Speech API

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

diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index d3395cca35..44a8195bd9 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -5,12 +5,54 @@
   <title>Speech Detection</title>
 </head>
 <body>
-
+  <h1 id="status">Ready</h1>
+  <button type="button" id="start">Start</button> 
   <div class="words" contenteditable>
+    <p id="speech"></p>
   </div>
 
 <script>
   window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+  const recognition = new SpeechRecognition();
+  recognition.interimResults = true;
+  recognition.lang = 'en-US';
+  recognition.maxAlternatives = 1;
+
+  const status = document.querySelector('#status');
+  const start = document.querySelector('#start');
+  const words = document.querySelector('.words');
+  const speech = words.querySelector('#speech');
+
+  start.addEventListener('click', () => {
+    if (start.classList.contains('disable')) {
+      start.classList.remove('disable');
+      start.innerHTML = 'Start';
+      status.innerHTML = 'Ready';
+      recognition.stop();
+      return;
+    }
+    start.classList.add('disable');
+    start.innerHTML = 'Stop';
+    status.innerHTML = 'Receiving';
+    recognition.start();
+  });
+
+  recognition.addEventListener('speechstart', () => {
+    speech.innerHTML = '';
+    spoken = '';
+  });
+
+  recognition.addEventListener('result', (e) => {
+    var newWords = e.results.map(word => word[0].transcript);
+    speech.innerHTML += ' ' + newWords.join(' ');
+  });
+
+  recognition.addEventListener('speechend', () => {
+    recognition.stop();
+    start.classList.remove('disable');
+    start.innerHTML = 'Start';
+    status.innerHTML = 'Ready';
+  })
 
 
 </script>
@@ -28,6 +70,20 @@
       font-size: 20px;
     }
 
+    button {
+      opacity: 1.0;
+      cursor: allowed;
+      background-color: purple;
+      border: none;
+      color: white;
+      text-align: center;
+      padding: 10px;
+    }
+
+    button.disable {
+      background-color: red;
+    }
+
     .words {
       max-width:500px;
       margin:50px auto;

From aff833c56b133726bf9038b858edbbb0b2de47bb Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Tue, 3 Jan 2017 10:29:32 -0800
Subject: [PATCH 19/27] Day 21: Geolocation

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

diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
index a1b981b1cd..73be0d3800 100644
--- a/21 - Geolocation/index-START.html	
+++ b/21 - Geolocation/index-START.html	
@@ -57,6 +57,21 @@ <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');
+
+  function updateCompass(e) {
+    console.dir(e);
+    // debugger;
+    speed.innerHTML = e.coords.speed;
+    arrow.style.transform = `rotate(${e.coords.heading}deg)`;
+  }
+
+  if (navigator.geolocation) {
+    navigator.geolocation.watchPosition(updateCompass);
+  } else {
+    console.log('Unable to watch location');
+  }
   </script>
 </body>
 </html>

From a8e96e4a721e14c8b12d8376798a60a58de2ea4c Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Tue, 3 Jan 2017 19:19:08 -0800
Subject: [PATCH 20/27] Day 20 Fixes

---
 20 - Speech Detection/index-FINISHED.html |  2 ++
 20 - Speech Detection/index-START.html    | 30 +++++++++++++----------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/20 - Speech Detection/index-FINISHED.html b/20 - Speech Detection/index-FINISHED.html
index 413c3eeaaf..03e775247b 100644
--- a/20 - Speech Detection/index-FINISHED.html	
+++ b/20 - Speech Detection/index-FINISHED.html	
@@ -31,7 +31,9 @@
       if (e.results[0].isFinal) {
         p = document.createElement('p');
         words.appendChild(p);
+        console.count('New p element');
       }
+      console.log(transcript);
   });
 
   recognition.addEventListener('end', recognition.start);
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index 44a8195bd9..b0cf070b8e 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -8,7 +8,6 @@
   <h1 id="status">Ready</h1>
   <button type="button" id="start">Start</button> 
   <div class="words" contenteditable>
-    <p id="speech"></p>
   </div>
 
 <script>
@@ -22,6 +21,8 @@ <h1 id="status">Ready</h1>
   const start = document.querySelector('#start');
   const words = document.querySelector('.words');
   const speech = words.querySelector('#speech');
+  let p = document.createElement('p');
+  words.appendChild(p);
 
   start.addEventListener('click', () => {
     if (start.classList.contains('disable')) {
@@ -37,22 +38,25 @@ <h1 id="status">Ready</h1>
     recognition.start();
   });
 
-  recognition.addEventListener('speechstart', () => {
-    speech.innerHTML = '';
-    spoken = '';
-  });
+  // recognition.addEventListener('speechstart', () => {
+  //   speech.innerHTML = '';
+  //   spoken = '';
+  // });
 
   recognition.addEventListener('result', (e) => {
-    var newWords = e.results.map(word => word[0].transcript);
-    speech.innerHTML += ' ' + newWords.join(' ');
+    var newWords = Array.from(e.results).map(word => word[0].transcript).join('');
+    p.textContent = newWords;
+    if (e.results[0].isFinal) {
+      p = document.createElement('p');
+      words.appendChild(p);
+    }
   });
 
-  recognition.addEventListener('speechend', () => {
-    recognition.stop();
-    start.classList.remove('disable');
-    start.innerHTML = 'Start';
-    status.innerHTML = 'Ready';
-  })
+  recognition.addEventListener('end', () => {
+    if (start.classList.contains('disable')) {
+      recognition.start();
+    }
+  });
 
 
 </script>

From 8d2680f3870ed8abf7382b687efc2510543c9b80 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Wed, 4 Jan 2017 23:19:15 -0800
Subject: [PATCH 21/27] Day 22: Link highlighter

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

diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..b153c95bdc 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -27,6 +27,23 @@
 
   <script>
     // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+    const highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+    var x = 0;
+    var y = 0;
+
+    function highlightLink() {
+      const coords = this.getBoundingClientRect();
+      console.dir(coords);
+      highlight.style.width = `${coords.width}px`;
+      highlight.style.height = `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left + window.scrollX}px,
+       ${coords.top + window.scrollY}px)`;
+    }
+
+    triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
   </script>
 </body>
 </html>

From 93a35042b1e0c57c7156deed8d00b9f78e7d824b Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Thu, 5 Jan 2017 00:12:48 -0800
Subject: [PATCH 22/27] Day 23: Speech Synthesis

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

diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..58d72862c8 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -30,11 +30,49 @@ <h1>The Voiceinator 5000</h1>
 
 <script>
   const msg = new SpeechSynthesisUtterance();
-  let voices = [];
+  var voices = null;
   const voicesDropdown = document.querySelector('[name="voice"]');
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+
+
+  function populateVoices() {
+    voices = window.speechSynthesis.getVoices();
+
+    for (i = 0; i < voices.length; i++) {
+      var option = document.createElement('option');
+      option.textContent = `${voices[i].name} (${voices[i].lang})`;
+      voicesDropdown.appendChild(option);
+    }
+  }
+
+  function setVoice() {
+    var voice = voices[this.selectedIndex - 1];
+    msg.voice = voice;
+    stop();
+  }
+
+  function updateRange() {
+    msg[this.name] = this.value;
+    stop();
+  }
+
+  function speak() {
+    stop();
+    msg.text = options[2].value;
+    window.speechSynthesis.speak(msg);
+  }
+
+  function stop() {
+    window.speechSynthesis.cancel();
+  }
+
+  speechSynthesis.addEventListener('voiceschanged', populateVoices);
+  voicesDropdown.addEventListener('change', setVoice);
+  options.forEach(range => range.addEventListener('change', updateRange));
+  speakButton.addEventListener('click', speak);
+  stopButton.addEventListener('click', stop);
 </script>
 
 </body>

From 94ecfd133da79cfd2c8b251c90666a34ae09b7f2 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Sat, 7 Jan 2017 22:34:29 -0800
Subject: [PATCH 23/27] Day 24: Fixed Nav Bar

---
 24 - Sticky Nav/index-START.html | 17 ++++++++++++++++-
 24 - Sticky Nav/style-START.css  | 14 ++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..0f66eb3e53 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,7 +54,22 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-
+  const nav = document.querySelector('#main');
+  const topOfNav = nav.offsetTop;
+
+  function setNav() {
+    if (window.scrollY >= topOfNav) {
+      document.body.style.paddingTop = `${nav.offsetHeight}px`;
+      document.body.classList.add('fixed-nav');
+    }
+    else {
+      document.body.style.paddingTop = 0;
+      document.body.classList.remove('fixed-nav');
+    }
+    return;
+  }
+
+  window.addEventListener('scroll', setNav);
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..c1eb5656a6 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -56,7 +56,7 @@ nav ul {
 }
 
 nav li {
-  flex:1;
+  flex: 1;
   text-align: center;
   display: flex;
   justify-content: center;
@@ -64,7 +64,8 @@ nav li {
 }
 
 li.logo {
-  max-width:0;
+  /*max-width:0;*/
+  flex: 0 1 0;
   overflow: hidden;
   background: white;
   transition: all .5s;
@@ -72,6 +73,11 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  /*max-width: 500px;*/
+  flex: 1;
+}
+
 li.logo a {
   color:black;
 }
@@ -84,3 +90,7 @@ nav a {
   transition:all 0.2s;
   text-transform: uppercase;
 }
+
+.fixed-nav nav {
+  position: fixed;
+}

From 2ab7e85074e883a627e8469a16a9a123ab1a9c56 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Sat, 7 Jan 2017 22:46:28 -0800
Subject: [PATCH 24/27] Day 25: Understanding Capture

---
 .../index-START.html                           | 18 ++++++++++++++++++
 1 file changed, 18 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..1c6dbfcc20 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,25 @@
 
 <button></button>
 <script>
+  const divs = document.querySelectorAll('div');
+  const button = document.querySelector('button');
 
+  function logText(e) {
+    console.log(this.classList.value);
+    // e.stopPropagation(); // stop bubbling!
+    // console.log(this);
+  }
+
+  divs.forEach(div => div.addEventListener('click', logText, {
+    capture: false,
+    once: true
+  }));
+
+  button.addEventListener('click', () => {
+    console.log('Click!!!');
+  }, {
+    once: true
+  });
 </script>
 </body>
 </html>

From 6d6613d64efa1a98b70d65c9ab2903b3e5752e2b Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Mon, 9 Jan 2017 22:14:37 -0800
Subject: [PATCH 25/27] Day 26: Nav Moving Dropdown Menu

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

diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 9780d0d1ac..d9d7809e53 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -143,7 +143,7 @@ <h2>Cool</h2>
     background: #fff;
     border-radius: 4px;
     box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
-    transition:all 0.3s, opacity 0.1s, translate 0.2s;
+    transition:all 0.3s, opacity 0.3s, translate 0.05s;
     transform-origin: 50% 0%;
     display: flex;
     justify-content: center;
@@ -208,6 +208,36 @@ <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');
+    background.classList.add('open');
+    setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
+    const dropdown = this.querySelector('.dropdown');
+    const dropdownCoords = dropdown.getBoundingClientRect();
+    const navCoords = nav.getBoundingClientRect();
+    const coords = {
+      height: dropdownCoords.height,
+      width: dropdownCoords.width,
+      left: dropdownCoords.left - navCoords.left,
+      top: dropdownCoords.top - navCoords.top
+    };
+    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-active', 'trigger-enter');
+    background.classList.remove('open');
+  }
+
+  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
+  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
+
 </script>
 
 </body>

From cfc6dba91bc2bc58fb82976cad98530706745943 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Mon, 9 Jan 2017 22:41:54 -0800
Subject: [PATCH 26/27] Day 27: Drag Scroll

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

diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
index b8609315f7..52e5c01601 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -35,6 +35,36 @@
   </div>
 
 <script>
+  const slider = document.querySelector('.items');
+  let isDown = false;
+  let startX;
+  let scrollLeft;
+
+  slider.addEventListener('mousedown', (e) => {
+    isDown = true;
+    slider.classList.add('active');
+    console.dir(e);
+    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) * 3;
+    slider.scrollLeft = scrollLeft - walk;
+  });
 </script>
 
   </body>

From d24ace8f261aeab6e02cba72c971b41772488501 Mon Sep 17 00:00:00 2001
From: Michael Tamaki <michaeltamaki@berkeley.edu>
Date: Mon, 9 Jan 2017 22:59:04 -0800
Subject: [PATCH 27/27] Day 28: Video Speed Controller

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

diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
index c4cbd4259a..7c58ca3a5d 100644
--- a/28 - Video Speed Controller/index-START.html	
+++ b/28 - Video Speed Controller/index-START.html	
@@ -15,6 +15,25 @@
   </div>
 
 <script>
+	const speed = document.querySelector('.speed');
+	const speedBar = speed.querySelector('.speed-bar');
+	const video = document.querySelector('.flex');
+	let mouseDown = false;
+
+	speed.addEventListener('mousedown', () => mouseDown = true);
+	speed.addEventListener('mouseup', () => mouseDown = false);
+	speed.addEventListener('mouseleave', () => mouseDown = false);
+	speed.addEventListener('mousemove', (e) => {
+		e.preventDefault();
+		if (!mouseDown) return;
+		const percent = Math.round(100 * e.offsetY / speed.offsetHeight);
+		speedBar.style.setProperty('height', `${percent}%`);
+		const min = 0.4;
+		const max = 4;
+		const speedUp = (percent / 100) * (max - min) + min;
+		speedBar.textContent = `${speedUp.toFixed(2)}x`;
+		video.playbackRate = speedUp;
+	});
 </script>
 </body>
 </html>