From be4c87f7cff6975f2226e7fa23742113ffdae2d0 Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Tue, 13 Dec 2016 21:07:25 -0800
Subject: [PATCH 01/14] Solution for lesson 1.

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

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

From 38415479515e602c4d78232372f57da4632afe65 Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Sun, 18 Dec 2016 13:15:21 -0800
Subject: [PATCH 02/14] Lesson 3 complate.

---
 02 - JS + CSS Clock/index-START.html | 37 +++++++++++++++++++++++++++-
 03 - CSS Variables/index-START.html  | 25 +++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..98198c4e3c 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -60,13 +60,48 @@
       height:6px;
       background:black;
       position: absolute;
-      top:50%;
+      top: 50%;
+      transform-origin: 100%;
+      transform:rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.9, 0.43, 0, 0.96);
+    }
+
+    .hour-hand {
+      width: 25%;
+      top: 50%;
+      left: 25%;
+    }
+
+    .min-hand {
+      width: 40%;
+      left: 10%;
     }
 
   </style>
 
   <script>
+    var secondHand = document.querySelector('.second-hand');
+    var minuteHand = document.querySelector('.min-hand');
+    var hourHand = document.querySelector('.hour-hand');
+
+    function setDate() {
+      var now = new Date();
+
+      var seconds = now.getSeconds();
+      var minutes = now.getMinutes();
+      var hours = now.getHours();
+
+      var secondsDegrees = ((seconds / 60) * 360) + 90;
+      var minutesDegrees = ((minutes / 60) * 360) + 90;
+      var hoursDegrees = ((hours / 60) * 360) + 90;
+
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+    };
 
+    setInterval(setDate, 1000);
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..bcbc5efb07 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -22,6 +22,22 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <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 +64,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+    function handleUpdate() {
+      const suffix = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(
+        `--${this.name}`, this.value + suffix
+      );
+    };
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>

From 6895ebd3559783153cb4581227e417f6b76196b9 Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Sat, 24 Dec 2016 15:04:19 -0800
Subject: [PATCH 03/14] Lesson 4 complete.

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..5bc393e67a 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -27,35 +27,83 @@
       { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
     ];
 
-    const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
-
     const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    function isBorn(inventor) {
+      return (inventor.year >= 1500 && inventor.year < 1600);
+    }
+    var born = inventors.filter(isBorn);
+    console.table(born);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    var names = inventors.map(inventor => {
+      return (inventor.first + ' ' + inventor.last);
+    })
+    console.log('names: ' + names);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    inventors.sort(function (a, b) {
+      return a.year - b.year;
+    });
+    console.log(inventors);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    var yearsLived = inventors.reduce(function (total, inventor) {
+      return total + (inventor.passed - inventor.year);
+    }, 0);
+
+    console.log(yearsLived);
 
     // 5. Sort the inventors by years lived
+    var sortedYears = inventors.sort(function (a, b) {
+      var aYears = (a.passed - a.year);
+      var bYears = (b.passed - b.year);
+      return aYears - bYears;
+    });
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    var blvds = ['Boulevard Auguste-Blanqui', 'Boulevard Barbès',
+      'Boulevard Beaumarchais', 'Boulevard de l\'Amiral-Bruix',
+      'Boulevard de Strasbourg', 'Boulevard des Capucines',
+      'Boulevard de la Chapelle', 'Boulevard de Clichy', 'Boulevard du Crime',
+      'Boulevard Haussmann', 'Boulevard des Italiens', 'Boulevard de la Madeleine',
+      'Boulevard de Magenta', 'Boulevard Montmartre', 'Boulevard du Montparnasse',
+      'Boulevard Raspail', 'Boulevard Richard-Lenoir', 'Boulevard de Rochechouart',
+      'Boulevard Saint-Germain', 'Boulevard Saint-Michel', 'Boulevard de Sébastopol',
+      'Boulevard du Temple', 'Boulevard Voltaire', 'Boulevard de la Zone'
+     ];
 
+     var de = blvds.filter(function(blvd) {
+       return blvd.match(/de/);
+     })
+     console.log('de: ' + de);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    var sorted = people.sort(function(a, b) {
+      var [aLast, aFirst] = a.split(', ');
+      var [bLast, bFirst] = b.split(', ');
+      return aLast > bLast ? 1 : -1;
+    });
+    console.log(sorted);
 
     // 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' ];
-
+    var enumData = {};
+    data.forEach(function(item) {
+      if (enumData[item]) {
+        enumData[item] += 1;
+      } else {
+        enumData[item] = 1;
+      };
+    });
   </script>
 </body>
 </html>

From 1af0ef78ac071359025055cc13e68ae9f40563ae Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Sun, 25 Dec 2016 14:53:58 -0800
Subject: [PATCH 04/14] Lesson 5 complete.

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

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..ba1b444385 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -41,6 +42,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -54,6 +60,10 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .panel p {
@@ -62,12 +72,30 @@
       text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
     }
+
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+
+    .panel.open-active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
+    }
+
     .panel p:nth-child(2) {
       font-size: 4em;
     }
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -107,9 +135,21 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
 
-  </script>
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
 
+    function  toggleActive(event) {
+      if (event.propertyName.includes('flex')) {
+        this.classList.toggle('open-active');
+      }
+    }
+
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+  </script>
 
 
 </body>

From 063c15ed356b446da9719a92c453abb6de1fe3ad Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Mon, 26 Dec 2016 22:35:42 -0800
Subject: [PATCH 05/14] Lesson 6 complete.

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

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..99bcb7ce36 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,7 +15,43 @@
     </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)
+    })
+
+    const search = document.querySelector('.search');
+    const suggestions = document.querySelector('.suggestions');
+
+    function findMatches(word, cities) {
+      return cities.filter(place => {
+        const regex = new RegExp(word, 'gi');
+        return place.city.match(regex);
+      })
+    }
+
+    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">${place.city}, ${place.state}</span>
+            <span class="population">${place.population}</span>
+          </li>
+        `
+      }).join('');
+      suggestions.innerHTML = html;
+    }
+
+    search.addEventListener('change', displayMatches);
+    search.addEventListener('keyup', displayMatches);
 
 </script>
   </body>

From cb87ddba8ab9cde59be9dd9ac98e7a98b99ab334 Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Sat, 31 Dec 2016 16:38:09 -0800
Subject: [PATCH 06/14] Lesson 7 solutions.

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..2cc7f46aac 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,28 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
+    const year = new Date().getFullYear();
+    const year19 = year - 19;
+    console.log('At least one person 19: ' + people.some(person => person.year < year19));
+
     // Array.prototype.every() // is everyone 19?
+    console.log('Every person 19: ' + people.every(person => person.year < year19));
 
     // 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
+    var commentText = comments.filter(comment => comment.id === 823423);
+    console.table(commentText);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
+    var commentTextIndex = comments.findIndex(comment => comment.id === 823423);
     // delete the comment with the ID of 823423
+    var newComments = [
+      ...comments.slice(0, commentTextIndex),
+      ...comments.slice(commentTextIndex + 1)
+    ]
+    console.table(newComments);
 
   </script>
 </body>

From d34a3070724cab8ac970083b4809d0aabcad5971 Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Sun, 1 Jan 2017 16:42:06 -0800
Subject: [PATCH 07/14] Lesson 8 complete.

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..436245aef0 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -5,14 +5,64 @@
   <title>HTML5 Canvas</title>
 </head>
 <body>
-<canvas id="draw" width="800" height="800"></canvas>
+  <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 = 0;
+  let lastY = 0;
+  let hue = 0;
+  let direction = true;
+
+  function draw(event) {
+    if (!isDrawing) return;
+    console.log(event);
+    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(event.offsetX, event.offsetY);
+    ctx.stroke();
+    [lastX, lastY] = [event.offsetX, event.offsetY];
+    hue+=10;
+
+    if (hue >= 360) {
+      hue = 0;
+    };
+    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+      direction = !direction;
+    }
+    if (direction) {
+      ctx.lineWidth += 1;
+    } else {
+      ctx.lineWidth -= 1;
+    }
+  }
+
+  canvas.addEventListener('mousedown', (event) => {
+    isDrawing = true;
+    [lastX, lastY] = [event.offsetX, event.offsetY];
+  });
+
+  canvas.addEventListener('mousemove', draw);
+
+  canvas.addEventListener('mouseup', () => isDrawing = false);
+  canvas.addEventListener('mouseout', () => isDrawing = false);
 </script>
 
 <style>
   html, body {
     margin:0;
   }
+  #draw {
+    border: 1px solid black;
+  }
 </style>
 
 </body>

From 41b001e76d6879b993d365adcebb7cffcc73d4e9 Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Sun, 1 Jan 2017 17:30:43 -0800
Subject: [PATCH 08/14] Lesson 9 complete.

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

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..c28c7e3311 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,56 @@
     }
 
     // Regular
+    console.log('Hello world');
 
     // Interpolated
+    console.log('Hello %s', '🌐');
 
     // Styled
+    console.log('%c Code is stylish', 'color: red, background: blue');
 
     // warning!
+    console.warn('you shouldn\'t be doing this');
 
     // Error :|
+    console.error('Oh noes');
 
     // Info
+    console.info('This is informative');
 
     // Testing
+    console.assert('1' === 1, 'not equal!');
 
     // clearing
+    //console.clear();
 
     // Viewing DOM Elements
+    const p = document.querySelector('p');
+    console.dir(p);
 
     // Grouping together
+    dogs.forEach(dog => {
+      console.group(`${dog.name}`);
+        console.log(`This is ${dog.name}`);
+        console.log(`${dog.name} is ${dog.age} years old`);
+      console.groupEnd();
+    })
 
     // counting
+    console.count('Loki');
+    console.count('Loki');
+    console.count('Keebler');
+    console.count('Loki');
+    console.count('Loki');
 
     // timing
+    console.time('Fetching Data');
+    fetch('https://api.github.com/users/zivi')
+      .then(data => data.json)
+      .then(data => {
+        console.timeEnd('fetching data');
+        console.log(data);
+      })
 
   </script>
 </body>

From 889c0fe791c01ab7a226bcef1c8a479dee8a3bd3 Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Mon, 2 Jan 2017 10:39:53 -0800
Subject: [PATCH 09/14] Lesson 10 complete.

---
 .../index-START-zivis-solution.html           | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 10 - Hold Shift and Check Checkboxes/index-START-zivis-solution.html

diff --git a/10 - Hold Shift and Check Checkboxes/index-START-zivis-solution.html b/10 - Hold Shift and Check Checkboxes/index-START-zivis-solution.html
new file mode 100644
index 0000000000..d17b25310e
--- /dev/null
+++ b/10 - Hold Shift and Check Checkboxes/index-START-zivis-solution.html	
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+  <style>
+
+    html {
+      font-family: sans-serif;
+      background:#ffc600;
+    }
+
+    .inbox {
+      max-width:400px;
+      margin:50px auto;
+      background:white;
+      border-radius:5px;
+      box-shadow:10px 10px 0 rgba(0,0,0,0.1);
+    }
+
+    .item {
+      display:flex;
+      align-items:center;
+      border-bottom: 1px solid #F1F1F1;
+    }
+
+    .item:last-child {
+      border-bottom:0;
+    }
+
+
+    input:checked + p {
+      background:#F9F9F9;
+      text-decoration: line-through;
+    }
+
+    input[type="checkbox"] {
+      margin:20px;
+    }
+
+    p {
+      margin:0;
+      padding:20px;
+      transition:background 0.2s;
+      flex:1;
+      font-family:'helvetica neue';
+      font-size: 20px;
+      font-weight: 200;
+      border-left: 1px solid #D1E2FF;
+    }
+
+    .details {
+      text-align: center;
+      font-size: 15px;
+    }
+
+
+  </style>
+   <!--
+   The following is a common layout you would see in an email client.
+
+   When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
+
+  -->
+  <div class="inbox">
+    <div class="item">
+      <input type="checkbox" data-index="0">
+      <p>This is an inbox layout.</p>
+    </div>
+    <div class="item">
+      <input type="checkbox" data-index="1">
+      <p>Check one item</p>
+    </div>
+    <div class="item">
+      <input type="checkbox" data-index="2">
+      <p>Hold down your Shift key</p>
+    </div>
+    <div class="item">
+      <input type="checkbox" data-index="3">
+      <p>Check a lower item</p>
+    </div>
+    <div class="item">
+      <input type="checkbox" data-index="4">
+      <p>Everything inbetween should also be set to checked</p>
+    </div>
+    <div class="item">
+      <input type="checkbox" data-index="5">
+      <p>Try do it with out any libraries</p>
+    </div>
+    <div class="item">
+      <input type="checkbox" data-index="6">
+      <p>Just regular JavaScript</p>
+    </div>
+    <div class="item">
+      <input type="checkbox" data-index="7">
+      <p>Good Luck!</p>
+    </div>
+    <div class="item">
+      <input type="checkbox" data-index="8">
+      <p>Don't forget to tweet your result!</p>
+    </div>
+  </div>
+
+<script>
+  const inbox = document.querySelector('.inbox');
+  let startingChild = null;
+  let endingChild = null;
+
+  inbox.addEventListener('click', (event) => {
+    if (event.target.type !='checkbox') return;
+
+    if (event.shiftKey) {
+      endingChild = parseInt(event.target.dataset.index);
+      // check the other boxes if there's a startingChild
+      if (startingChild != null) {
+        // increment if startingChild < endingChild
+        if (startingChild < endingChild) {
+          let inputs = document.querySelectorAll('input');
+          for (let i = startingChild; i < endingChild; i += 1) {
+            let el = document.querySelector(`[data-index="${i}"]`);
+            el.checked = true;
+          };
+        } else {
+          for (let i = endingChild + 1; i < startingChild; i += 1) {
+            let el = document.querySelector(`[data-index="${i}"]`);
+            el.checked = true;
+          };
+        };
+      };
+    } else {
+      startingChild = parseInt(event.target.dataset.index);
+    };
+  })
+
+</script>
+</body>
+</html>

From c7e0a35a9c7b88af1cbf98e5231d9ee552e6d67b Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Sun, 8 Jan 2017 20:56:48 -0800
Subject: [PATCH 10/14] Play/pause button.

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

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..08fb4d9d67 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,15 @@
+var videoPlayer = document.getElementsByTagName('video')[0];
+var play = document.querySelector('.player__button');
+var isPlaying = false;
+
+play.onclick = () => {
+  if (isPlaying) {
+    videoPlayer.pause();
+    isPlaying = false;
+    play.textContent = '►';
+  } else {
+    videoPlayer.play();
+    isPlaying = true;
+    play.textContent = '♊';
+  }
+}

From 9c5f3eaf0f3961c88bb969b605de225d43c5b2c3 Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Mon, 9 Jan 2017 20:59:20 -0800
Subject: [PATCH 11/14] Skip, volume controls.

---
 11 - Custom Video Player/index.html |  2 +-
 11 - Custom Video Player/scripts.js | 38 +++++++++++++++++++++++------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 281a15eaa8..4977b53c6b 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -15,7 +15,7 @@
         <div class="progress__filled"></div>
        </div>
        <button class="player__button toggle" title="Toggle Play">►</button>
-       <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
+       <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="0.5">
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index 08fb4d9d67..cd67339826 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -1,15 +1,37 @@
 var videoPlayer = document.getElementsByTagName('video')[0];
-var play = document.querySelector('.player__button');
-var isPlaying = false;
+var progress = document.querySelector('.progress');
+var progressFilled = document.querySelector('.progress__filled');
+var play = document.querySelector('.toggle');
+var skip25 = document.querySelector('[data-skip="25"]');
+var back10 = document.querySelector('[data-skip="-10"]');
+var volume = document.getElementsByName('volume')[0];
+var playbackRate = document.getElementsByName('playbackRate')[0];
+
+videoPlayer.volume = 0.5
+volume.onmousemove = () => {
+  videoPlayer.volume = volume.value;
+}
+
+playbackRate.onmousemove = () => {
+  videoPlayer.playbackRate = playbackRate.value;
+}
 
 play.onclick = () => {
-  if (isPlaying) {
+  if (videoPlayer.paused) {
+    videoPlayer.play();
+    videoPlayer.paused = false;
+    play.textContent = '❚❚';
+  } else {
     videoPlayer.pause();
-    isPlaying = false;
+    videoPlayer.paused = true;
     play.textContent = '►';
-  } else {
-    videoPlayer.play();
-    isPlaying = true;
-    play.textContent = '♊';
   }
 }
+
+skip25.onclick = () => {
+  videoPlayer.currentTime += 25;
+}
+
+back10.onclick = () => {
+  videoPlayer.currentTime -= 10;
+}

From 8ce8b3ff785c4596529a97665707ef197b8f515e Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Thu, 12 Jan 2017 20:10:46 -0800
Subject: [PATCH 12/14] Leson 11 done.

---
 11 - Custom Video Player/scripts.js | 40 ++++++++++++++++++++---------
 11 - Custom Video Player/style.css  |  2 +-
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index cd67339826..0bb38d2a49 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -1,11 +1,16 @@
-var videoPlayer = document.getElementsByTagName('video')[0];
-var progress = document.querySelector('.progress');
-var progressFilled = document.querySelector('.progress__filled');
-var play = document.querySelector('.toggle');
-var skip25 = document.querySelector('[data-skip="25"]');
-var back10 = document.querySelector('[data-skip="-10"]');
-var volume = document.getElementsByName('volume')[0];
-var playbackRate = document.getElementsByName('playbackRate')[0];
+const videoPlayer = document.getElementsByTagName('video')[0];
+const progress = document.querySelector('.progress');
+const progressFilled = document.querySelector('.progress__filled');
+const play = document.querySelector('.toggle');
+const skipButtons = document.querySelectorAll('[data-skip]');
+const volume = document.getElementsByName('volume')[0];
+const playbackRate = document.getElementsByName('playbackRate')[0];
+var playProgressRate = null;
+var unPlayed = true;
+var progressStatus = 0;
+
+videoPlayer.addEventListener('timeupdate', updateStatusBar);
+progress.addEventListener('click', scrub);
 
 videoPlayer.volume = 0.5
 volume.onmousemove = () => {
@@ -21,6 +26,7 @@ play.onclick = () => {
     videoPlayer.play();
     videoPlayer.paused = false;
     play.textContent = '❚❚';
+    unPlayed = false;
   } else {
     videoPlayer.pause();
     videoPlayer.paused = true;
@@ -28,10 +34,20 @@ play.onclick = () => {
   }
 }
 
-skip25.onclick = () => {
-  videoPlayer.currentTime += 25;
+function updateStatusBar() {
+  const percent = (videoPlayer.currentTime / videoPlayer.duration) * 100;
+  progressFilled.style.flexBasis = `${percent}%`;
+}
+
+function scrub(event) {
+  var scrubTime = (event.offsetX / progress.offsetWidth) * videoPlayer.duration;
+  videoPlayer.currentTime = scrubTime;
 }
 
-back10.onclick = () => {
-  videoPlayer.currentTime -= 10;
+skipButtons.forEach(button => button.addEventListener('click', skip));
+var skip = () => {
+  let skiptime = parseFloat(this.dataset.skip);
+  videoPlayer.currentTime += skiptime;
+  progressStatus += (playProgressRate * skiptime);
+  progressFilled.style.flexBasis = `${progressStatus}%`;
 }
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
index c07581c1c0..b6253af905 100644
--- a/11 - Custom Video Player/style.css	
+++ b/11 - Custom Video Player/style.css	
@@ -89,7 +89,7 @@ body {
   width:50%;
   background:#ffc600;
   flex:0;
-  flex-basis:50%;
+  flex-basis:0%;
 }
 
 /* unholy css to style input type="range" */

From f8e20629f83167550e7243acf830fcfe658217fd Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Sun, 15 Jan 2017 20:23:14 -0800
Subject: [PATCH 13/14] Lesson 12 complete.

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

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

From 3f4228f87b57014c0284206a5983fc9c19e5a880 Mon Sep 17 00:00:00 2001
From: Zivi Weinstock <zivi.weinstock@gmail.com>
Date: Sun, 22 Jan 2017 11:26:53 -0800
Subject: [PATCH 14/14] Lesson 13 complete.

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

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..1db2ac8ad0 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(event) {
+      sliderImages.forEach(function(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>