From 52547a000da2633008100a0db132a6ccc25ef2ba Mon Sep 17 00:00:00 2001
From: Caroline Horn <chorn@42six.com>
Date: Tue, 31 Jan 2017 13:00:54 -0500
Subject: [PATCH 1/9] Day 1 complete

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..59ff7b07ae 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,6 +58,25 @@
   <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; // stop function from running
+    audio.currentTime = 0; // rewind to start
+    audio.play();
+
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return; // skip it if it's not a transform
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+  window.addEventListener('keydown', playSound);
 
 </script>
 

From e930898d0bcdfe5576a2bada63cfd0b59b8c9ca7 Mon Sep 17 00:00:00 2001
From: Caroline Horn <chorn@42six.com>
Date: Tue, 31 Jan 2017 13:29:21 -0500
Subject: [PATCH 2/9] Day 2 done

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

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..8a60531709 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -10,7 +10,7 @@
     <div class="clock">
       <div class="clock-face">
         <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
+        <div class="hand minute-hand"></div>
         <div class="hand second-hand"></div>
       </div>
     </div>
@@ -61,12 +61,36 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s cubic-bezier(.1, 2.7,.58,1);
     }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const minuteHand = document.querySelector('.minute-hand');
+    const hourHand = document.querySelector('.hour-hand');
 
+    function setDate() {
+      const now = new Date();
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds/60) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      const minutes = now.getMinutes();
+      const minutesDegrees = ((minutes/60) * 360) + 90;
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+      const hours = now.getHours();
+      const hoursDegrees = ((hours/12) * 360) + 90;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+
+      //console.log(secondHand.style.transform);
+    }
+
+    setInterval(setDate, 1000)
 
   </script>
 </body>

From 26d3b0564c3f9bbacc5051eb3940c7c247cfa046 Mon Sep 17 00:00:00 2001
From: Caroline Horn <chorn@42six.com>
Date: Tue, 31 Jan 2017 13:47:35 -0500
Subject: [PATCH 3/9] Day 3 done

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..8ff7b79286 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,18 @@ <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 d7cf6cd4eb61496ae2d6075da0c9fd3113163b5c Mon Sep 17 00:00:00 2001
From: Caroline Horn <chorn@42six.com>
Date: Tue, 31 Jan 2017 14:41:08 -0500
Subject: [PATCH 4/9] day 4 done

---
 04 - Array Cardio Day 1/index-START.html | 74 ++++++++++++++++++++++--
 1 file changed, 70 insertions(+), 4 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..e8b1862609 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -29,31 +29,97 @@
 
     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()
+    // Array.prototype.filter() -- loops over each item in array and decide to keep or not
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteen = inventors.filter(function(inventor) {
+      if(inventor.year >= 1500 && inventor.year < 1600) {
+        return true; // keep it
+      }
+    })
 
-    // Array.prototype.map()
+    // shorthand:
+    // const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+
+    console.table(fifteen);
+
+    // Array.prototype.map() -- takes in an array, does something with it, then returns new array of same length
     // 2. Give us an array of the inventors' first and last names
+    const fullNames = inventors.map(inventor => inventor.first + ' ' + inventor.last);
+    console.log(fullNames);
 
-    // Array.prototype.sort()
+    // Array.prototype.sort() -- sorts by giving 1 or -1
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const ordered = inventors.sort(function(a, b){
+      if (a.year > b.year) {
+        return 1;
+      } else {
+        return -1;
+      }
+    });
+
+    // shorthand:
+    // ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));
+
+    console.table(ordered);
 
-    // Array.prototype.reduce()
+    // Array.prototype.reduce() -- builds something on each item
     // 4. How many years did all the inventors live?
 
+    const totalYears = inventors.reduce((total, inventor) => {
+      return total + (inventor.passed - inventor.year);
+    }, 0)
+
+    console.log(totalYears);
+
     // 5. Sort the inventors by years lived
 
+    const oldest = inventors.sort(function(a,b) {
+      const lastGuy = a.passed - a.year;
+      const nextGuy = b.passed - b.year;
+      return lastGuy > nextGuy ? -1 : 1;
+    })
+
+    console.table(oldest);
+
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
+    /*
+        const category = document.querySelector('.mw-category');
+        const links = Array.from(category.querySelectorAll('a'));
+
+        const de = links
+                    .map(link => link.textContent)
+                    .filter(streetName => streetName.includes('de'));
+    */
+
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
 
+    const alpha = people.sort((lastOne, nextOne) => {
+      const [alast, afirst] = lastOne.split(', ');
+      const [blast, bfirst] = nextOne.split(', ');
+      return alast > blast ? -1 : 1;
+    })
+
+    console.log(alpha);
+
     // 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 transportation = data.reduce(function(obj, item) {
+      if(!obj[item]) {
+        obj[item] = 0;
+      }
+
+      obj[item]++;
+      return obj;
+    }, {})
+
+    console.log(transportation);
+
   </script>
 </body>
 </html>

From 4ea13ef78202d2327ba86c4e82928960ac6d918a Mon Sep 17 00:00:00 2001
From: Caroline Horn <chorn@42six.com>
Date: Wed, 1 Feb 2017 17:55:06 -0500
Subject: [PATCH 5/9] Days 5,6,7 done

---
 05 - Flex Panel Gallery/index-START.html | 43 ++++++++++++++++++++++++
 06 - Type Ahead/index-START.html         | 36 ++++++++++++++++++++
 07 - Array Cardio Day 2/index-START.html | 39 +++++++++++++++++++++
 3 files changed, 118 insertions(+)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..0c2f98ebea 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,9 +24,16 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
@@ -54,6 +61,18 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
     }
 
     .panel p {
@@ -67,9 +86,18 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
+    .panel.open.active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel.open.active > *:last-child {
+      transform: translateY(0);
+    }
+
     .cta {
       color:white;
       text-decoration: none;
@@ -108,6 +136,21 @@
 
   <script>
 
+    const panels = document.querySelectorAll('.panel');
+
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
+
+    function toggleActive(e) {
+      if(e.propertyName.includes('flex')) {
+        this.classList.toggle('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..c59cc00b79 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,42 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities = [];
+
+fetch(endpoint)
+  .then(blob => blob.json())
+  .then(data => cities.push(...data));
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    // here we need to figure out if the city or state matches what was searched
+    const regex = new RegExp(wordToMatch, 'gi');
+    return place.city.match(regex) || place.state.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">${cityName}, ${stateName}</span>
+        <span class="population">${place.population}</span>
+      </li>
+    `;
+  }).join('');
+  suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches);
+searchInput.addEventListener('keyup', displayMatches);
+
 </script>
   </body>
 </html>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..4176dc2a9d 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,54 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+/*
+    const isAdult = people.some(function(person){
+      const currentYear = (new Date().getFullYear());
+
+      if(currentYear - person.year >= 19) {
+        return true;
+      }
+    })
+*/
+
+    const isAdult = people.some(person => {
+      const currentYear = (new Date().getFullYear());
+      return currentYear - person.year >= 19;
+    })
+
+    console.log({isAdult});
+
     // Array.prototype.every() // is everyone 19 or older?
 
+    const allAdults = people.every(person => {
+      const currentYear = (new Date().getFullYear());
+      return currentYear - person.year >= 19;
+    })
+
+    console.log({allAdults});
+
+
     // Array.prototype.find()
     // Find is like filter, but instead returns just the one you are looking for
     // find the comment with the ID of 823423
 
+    const comment = comments.find(comment => comment.id === 823423);
+
+    console.log(comment);
+
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(comment => comment.id === 823423);
+    //comments.splice(index, 1);
+    const newComments = [
+      ...comments.slice(0, index),
+      ...comments.slice(index + 1)
+    ]
+
+    console.table(comments);
+    console.table(newComments);
+
 
   </script>
 </body>

From 23e2fa4f98233a4f8bccc8a6d8ded501a9d64619 Mon Sep 17 00:00:00 2001
From: Caroline Horn <chorn@42six.com>
Date: Wed, 1 Feb 2017 18:12:36 -0500
Subject: [PATCH 6/9] day 9 done

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

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..ff9f89891c 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -20,26 +20,57 @@
     // Regular
 
     // Interpolated
+    console.log('Hello I am a %s string!', 'poop');
 
     // Styled
+    console.log('%c I am some great text', 'font-size: 24px');
 
     // warning!
+    console.warn('Oh NO');
 
     // Error :|
+    console.error('Crap!');
 
     // Info
+    console.info('Fun fact!');
 
     // Testing
+    console.assert(1 === 2, 'That is wrong!');
 
     // clearing
+    //console.clear();
 
     // Viewing DOM Elements
+    const p = document.querySelector('p');
+    console.dir(p);
 
     // Grouping together
+    dogs.forEach(dog => {
+      console.groupCollapsed(`${dog.name}`);
+      console.log(`This is ${dog.name}`);
+      console.log(`${dog.name} is ${dog.age *7} dog years old`);
+      console.groupEnd(`${dog.name}`);
+    })
 
     // counting
+    console.count('Wes');
+    console.count('Wes');
+    console.count('Wes');
+    console.count('Me');
+    console.count('Wes');
+    console.count('Wes');
+    console.count('Me');
+    console.count('Me');
+    console.count('Wes');
 
     // timing
+    console.time('fetching data');
+    fetch('https://api.github.com/users/cchaos')
+      .then(data => data.json())
+      .then(data => {
+        console.timeEnd('fetching data');
+        console.log(data);
+      });
 
   </script>
 </body>

From f0535bca5d7065726817208ce5cf212335c3977f Mon Sep 17 00:00:00 2001
From: Caroline Horn <chorn@42six.com>
Date: Thu, 2 Feb 2017 10:39:10 -0500
Subject: [PATCH 7/9] up to day 15 done

---
 .../index-START.html                          | 27 ++++++++
 13 - Slide in on Scroll/index-START.html      | 21 ++++++
 .../index-START.html                          | 30 +++++++++
 15 - LocalStorage/index-START.html            | 64 ++++++++++++++++++-
 4 files changed, 141 insertions(+), 1 deletion(-)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index eb7ed310bb..078b5d7bea 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,33 @@
   </div>
 
 <script>
+
+  const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
+
+  let lastChecked;
+
+  function handleCheck(e) {
+    // Check if they had the shift key down
+    // And that they are checking it
+    let inBetween = false;
+    if (e.shiftKey && this.checked) {
+      //loop over every single checkbox
+      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/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..56266b402a 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -58,6 +58,27 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      sliderImages.forEach(sliderImage => {
+        // halfway through the image
+        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
+        // bottom of image
+        const imageBottom = sliderImage.offsetTop + sliderImage.height;
+        const isHalfShown = slideInAt > sliderImage.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+
+        if(isHalfShown && isNotScrolledPast) {
+          sliderImage.classList.add('active');
+        } else {
+          sliderImage.classList.remove('active');
+        }
+      });
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index 4da1bac2ea..d54b8ab167 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -13,9 +13,12 @@
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+    const team = players;
 
     // You might think we can just do something like this:
+    team[3] = 'Lux';
 
+    console.log(players, team);
     // however what happens when we update that array?
 
     // now here is the problem!
@@ -25,26 +28,53 @@
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
 
     // So, how do we fix this? We take a copy instead!
+    const team2 = players.slice();
 
     // one day
 
     // or create a new array and concat the old one in
+    const team3 = [].concat(players);
 
     // or use the new ES6 Spread
+    const team4 = [...players];
+
+    const team5 = Array.from(players);
 
     // now when we update it, the original one isn't changed
 
     // The same thing goes for objects, let's say we have a person object
 
     // with Objects
+    const person = {
+      name: "Person Name",
+      age: 35
+    }
 
     // and think we make a copy:
+    const captain = person;
+    captain.age = 76;
 
     // how do we take a copy instead?
+    const cap2 = Object.assign({}, person, {age: 86});
+    console.log(cap2, person);
 
     // We will hopefully soon see the object ...spread
+    //const cap3 = {...person};
 
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
+    const wes = {
+      name: 'Wes',
+      age: 99,
+      social: {
+        twitter: "@",
+        facebook: "face"
+      }
+    }
+    console.log(wes);
+
+    const dev = Object.assign({}, wes);
+
+    const dev2 = JSON.parse(JSON.stringify(wes));
 
   </script>
 
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..ab08d7559a 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,12 +23,74 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <hr>
+    <button data-check-all="true">Check All</button>
+    <button data-uncheck-all="true">Uncheck All</button>
+    <br>
+    <button data-clear="true">Clear List</button>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+  const buttons = document.querySelectorAll('button');
+
+  function addItem(e) {
+    e.preventDefault();
+    const text = (this.querySelector('[name="item"]')).value;
+    const item = {
+      text,
+      done: false
+    };
+
+    items.push(item);
+    populateList(items, itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+    this.reset();
+  }
+
+  function populateList(plates = [], platesList) {
+    platesList.innerHTML = plates.map((plate, i) => {
+      return `
+        <li>
+          <input type="checkbox" data-index="${i}" id="item${i}" ${plate.done ? 'checked' : ''} />
+          <label for="item${i}">${plate.text}</label>
+        </li>
+      `;
+    }).join('');
+  }
+
+  function toggleDone(e) {
+    if (!e.target.matches('input')) return; // skip this unless it's an input
+    const el = e.target;
+    const index = el.dataset.index;
+    items[index].done = !items[index].done;
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  function buttonHandler(e) {
+    if (e.currentTarget.dataset.checkAll) {
+      items.forEach(item => item.done = true);
+      localStorage.setItem('items', JSON.stringify(items));
+
+    } else if (e.currentTarget.dataset.uncheckAll) {
+      items.forEach(item => item.done = false);
+      localStorage.setItem('items', JSON.stringify(items));
+
+    } else if (e.currentTarget.dataset.clear) {
+      items.length = 0;
+      localStorage.removeItem('items');
+    }
+
+    populateList(items, itemsList);
+  }
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+  buttons.forEach(button => button.addEventListener('click', buttonHandler));
+  populateList(items, itemsList);
 
 </script>
 

From fd541b00ca49a85368ec1541a145605b38c64c32 Mon Sep 17 00:00:00 2001
From: Caroline Horn <chorn@42six.com>
Date: Thu, 2 Feb 2017 13:47:26 -0500
Subject: [PATCH 8/9] upt o 17 done

---
 17 - Sort Without Articles/index-START.html   | 10 +++++++++
 .../index-START.html                          | 22 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..659e3ab818 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -45,6 +45,16 @@
 <script>
 const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
 
+function strip(bandName) {
+  return bandName.replace(/^(a |the |an )/i, '').trim();
+}
+
+const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
+
+console.log(sortedBands);
+
+document.querySelector('#bands').innerHTML = sortedBands.map(band => `<li>${band}</li>`).join('');
+
 
 </script>
 
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..81fb888cc2 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,7 +26,27 @@
     </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 = {
+        width: linkCoords.width,
+        height: linkCoords.height,
+        top: linkCoords.top + window.scrollY,
+        left: linkCoords.left + window.scrollX,
+      }
+
+      highlight.style.width = `${coords.width}px`;
+      highlight.style.height = `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
+    }
+
+    triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
+
   </script>
 </body>
 </html>

From b796227a38c89ebde4ae2f57d5b035b4734bbb2f Mon Sep 17 00:00:00 2001
From: Caroline Horn <chorn@42six.com>
Date: Sat, 11 Nov 2017 03:37:02 -0500
Subject: [PATCH 9/9] blah

---
 04 - Array Cardio Day 1/index-START.html      |  13 +-
 06 - Type Ahead/index-FINISHED.html           |   2 +
 07 - Array Cardio Day 2/index-START.html      |   4 +-
 24 - Sticky Nav/index-START.html              |  15 +-
 24 - Sticky Nav/style-START.css               |  13 ++
 .../index-START.html                          |  19 +++
 26 - Stripe Follow Along Nav/index-START.html |  45 +++++-
 27 - Click and Drag/index-START.html          |  33 ++++
 Books/index.html                              |  21 +++
 Books/listBooks.html                          |  22 +++
 Books/src/ctrl/initialize.js                  |   2 +
 Books/src/model/Book.js                       |  99 ++++++++++++
 Books/src/view/listBooks.js                   |  17 ++
 MVC/App.js                                    |   5 +
 MVC/EventDispatcher.js                        |  18 +++
 MVC/TaskController.js                         |  65 ++++++++
 MVC/TaskModel.js                              |  62 +++++++
 MVC/TaskView.js                               | 152 ++++++++++++++++++
 MVC/index.html                                |  33 ++++
 19 files changed, 631 insertions(+), 9 deletions(-)
 create mode 100644 Books/index.html
 create mode 100644 Books/listBooks.html
 create mode 100644 Books/src/ctrl/initialize.js
 create mode 100644 Books/src/model/Book.js
 create mode 100644 Books/src/view/listBooks.js
 create mode 100644 MVC/App.js
 create mode 100644 MVC/EventDispatcher.js
 create mode 100644 MVC/TaskController.js
 create mode 100644 MVC/TaskModel.js
 create mode 100644 MVC/TaskView.js
 create mode 100644 MVC/index.html

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index e8b1862609..2972f458cd 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -41,11 +41,12 @@
     // const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
 
     console.table(fifteen);
+    console.table(inventors);
 
     // Array.prototype.map() -- takes in an array, does something with it, then returns new array of same length
     // 2. Give us an array of the inventors' first and last names
     const fullNames = inventors.map(inventor => inventor.first + ' ' + inventor.last);
-    console.log(fullNames);
+    //console.log(fullNames);
 
     // Array.prototype.sort() -- sorts by giving 1 or -1
     // 3. Sort the inventors by birthdate, oldest to youngest
@@ -60,7 +61,7 @@
     // shorthand:
     // ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));
 
-    console.table(ordered);
+    //console.table(ordered);
 
     // Array.prototype.reduce() -- builds something on each item
     // 4. How many years did all the inventors live?
@@ -69,7 +70,7 @@
       return total + (inventor.passed - inventor.year);
     }, 0)
 
-    console.log(totalYears);
+    //console.log(totalYears);
 
     // 5. Sort the inventors by years lived
 
@@ -79,7 +80,7 @@
       return lastGuy > nextGuy ? -1 : 1;
     })
 
-    console.table(oldest);
+    //console.table(oldest);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
@@ -103,7 +104,7 @@
       return alast > blast ? -1 : 1;
     })
 
-    console.log(alpha);
+    //console.log(alpha);
 
     // 8. Reduce Exercise
     // Sum up the instances of each of these
@@ -118,7 +119,7 @@
       return obj;
     }, {})
 
-    console.log(transportation);
+    //console.log(transportation);
 
   </script>
 </body>
diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html
index 5902b43936..b526d13223 100644
--- a/06 - Type Ahead/index-FINISHED.html	
+++ b/06 - Type Ahead/index-FINISHED.html	
@@ -22,6 +22,8 @@
   .then(blob => blob.json())
   .then(data => cities.push(...data));
 
+console.log(typeof(cities));
+
 function findMatches(wordToMatch, cities) {
   return cities.filter(place => {
     // here we need to figure out if the city or state matches what was searched
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 4176dc2a9d..596ae499b4 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -57,7 +57,9 @@
     // Find is like filter, but instead returns just the one you are looking for
     // find the comment with the ID of 823423
 
-    const comment = comments.find(comment => comment.id === 823423);
+    const comment = comments.find(function(comment){
+      return comment.text === "Super good";
+    });
 
     console.log(comment);
 
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..c97e58012f 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,7 +54,20 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-
+  const nav = document.querySelector('#main');
+  const topOfNav = nav.offsetTop;
+
+  function fixNav(){
+    if (window.scrollY >= topOfNav) {
+      document.body.style.paddingTop = nav.offsetHeight + 'px';
+      document.body.classList.add('fixed-nav');
+    } else {
+      document.body.style.paddingTop = 0;
+      document.body.classList.remove('fixed-nav');
+    }
+  }
+
+  window.addEventListener('scroll', fixNav);
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..6703d93f1c 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -23,6 +23,10 @@ body {
   transition: transform 0.5s;
 }
 
+.fixed-nav .site-wrap {
+  transform: scale(1);
+}
+
 header {
   text-align: center;
   height:50vh;
@@ -48,6 +52,11 @@ nav {
   z-index: 1;
 }
 
+.fixed-nav nav {
+  position: fixed;
+  box-shadow: 0 5px 5px rgba(0,0,0,.25);
+}
+
 nav ul {
   margin: 0;
   padding:0;
@@ -72,6 +81,10 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  max-width: 500px;
+}
+
 li.logo a {
   color:black;
 }
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..1e34a99e98 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -40,6 +40,25 @@
 <button></button>
 <script>
 
+  const divs = document.querySelectorAll('div');
+  const button = document.querySelector('button');
+
+  function logText(e) {
+    console.log(this.classList.value);
+    //e.stopPropagation();
+  }
+
+  divs.forEach(div => div.addEventListener('click', logText, {
+    capture: false, // on the way down not up if true
+    once: true // removes listener
+  }));
+
+  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..59a4164d66 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -5,7 +5,8 @@
   <title>Follow Along Nav</title>
 </head>
 <body>
-  <h2>Cool</h2>
+  <h2>https://stripe.com/</h2>
+
   <nav class="top">
     <div class="dropdownBackground">
       <span class="arrow"></span>
@@ -208,6 +209,48 @@ <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(() => {
+      if (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..d40a9dc45e 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -35,6 +35,39 @@
   </div>
 
 <script>
+
+  const slider = document.querySelector('.items');
+  let isDown = false;
+  let startX;
+  let scrollLeft;
+
+
+
+  slider.addEventListener('mousedown', (e) => {
+    isDown = true;
+    slider.classList.add('active');
+    startX = e.pageX - slider.offsetLeft;
+    scrollLeft = slider.scrollLeft;
+  });
+  slider.addEventListener('mouseleave', () => {
+    isDown = false;
+    slider.classList.remove('active');
+  });
+  slider.addEventListener('mouseup', () => {
+    isDown = false;
+    slider.classList.remove('active');
+  });
+  slider.addEventListener('mousemove', (e) => {
+    if (!isDown) return;
+
+    e.preventDefault();
+    const x = e.pageX - slider.offsetLeft;
+    const walk = (x - startX) * 1.5;
+
+    slider.scrollLeft = scrollLeft - walk;
+    console.log(walk);
+  });
+
 </script>
 
   </body>
diff --git a/Books/index.html b/Books/index.html
new file mode 100644
index 0000000000..e4d8c258db
--- /dev/null
+++ b/Books/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Minimal JS front-end App Example</title>
+  <script src="src/model/Book.js"></script>
+</head>
+<body>
+  <h1>Public Library</h1>
+  <h2>An Example of a Minimal JavaScript front-end App</h2>
+  <p>This app supports the following operations:</p>
+  <menu>
+    <li><a href="listBooks.html"><button type="button">List all books</button></a></li>
+    <li><a href="createBook.html"><button type="button">Add a new book</button></a></li>
+    <li><a href="updateBook.html"><button type="button">Update a book</button></a></li>
+    <li><a href="deleteBook.html"><button type="button">Delete a book</button></a></li>
+    <li><button type="button" onclick="Book.clearData()">Clear database</button></li>
+    <li><button type="button" onclick="Book.createTestData()">Create test data</button></li>
+  </menu>
+</body>
+</html>
\ No newline at end of file
diff --git a/Books/listBooks.html b/Books/listBooks.html
new file mode 100644
index 0000000000..eba4bd652d
--- /dev/null
+++ b/Books/listBooks.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Minimal JS front-end App Example</title>
+  <script src="src/ctrl/initialize.js"></script>
+  <script src="src/model/Book.js"></script>
+  <script src="src/view/listBooks.js"></script>
+  <script>
+    Book.createTestData();
+   window.addEventListener( "load", pl.view.listBooks.setupUserInterface);
+  </script>
+</head>
+<body>
+  <h1>Public Library: List all books</h1>
+  <table id="books">
+    <thead><tr><th>ISBN</th><th>Title</th><th>Year</th></tr></thead>
+    <tbody></tbody>
+  </table>
+  <nav><a href="index.html">Back to main menu</a></nav>
+</body>
+</html>
\ No newline at end of file
diff --git a/Books/src/ctrl/initialize.js b/Books/src/ctrl/initialize.js
new file mode 100644
index 0000000000..bd09a0ad77
--- /dev/null
+++ b/Books/src/ctrl/initialize.js
@@ -0,0 +1,2 @@
+// instantiate the namespaces for Public Library
+var pl = { model:{}, view:{}, ctrl:{} };
\ No newline at end of file
diff --git a/Books/src/model/Book.js b/Books/src/model/Book.js
new file mode 100644
index 0000000000..50765076ee
--- /dev/null
+++ b/Books/src/model/Book.js
@@ -0,0 +1,99 @@
+function Book( slots ) {
+  this.isbn  = slots.isbn;
+  this.title = slots.title;
+  this.year  = slots.year;
+};
+
+//
+// A class-level property Book.instances representing the collection of all Book instances managed by the application in the form of a map.
+Book.instances = {};
+
+//
+// A static class-level method Book.convertRow2Obj for converting a row into a corresponding object of type Book.
+Book.convertRow2Obj = function (bookRow) {
+  var book = new Book( bookRow);
+  return book;
+};
+
+//
+// A class-level method Book.loadAll for loading all managed Book instances from the persistent data store.
+Book.loadAll = function () {
+  var i=0, key="", keys=[], bookTableString="", bookTable={};
+  try {
+    if (localStorage["bookTable"]) {
+      bookTableString = localStorage["bookTable"];
+    }
+  } catch (e) {
+    alert("Error when reading from Local Storage\n" + e);
+  }
+  if (bookTableString) {
+    bookTable = JSON.parse( bookTableString);
+    keys = Object.keys( bookTable);
+    console.log( keys.length +" books loaded.");
+    for (i=0; i < keys.length; i++) {
+      key = keys[i];
+      Book.instances[key] = Book.convertRow2Obj( bookTable[key]);
+    }
+  }
+};
+
+//
+// A class-level method Book.saveAll for saving all managed Book instances to the persistent data store.
+Book.saveAll = function () {
+  var bookTableString="", error=false,
+      nmrOfBooks = Object.keys( Book.instances).length;
+  try {
+    bookTableString = JSON.stringify( Book.instances);
+    localStorage["bookTable"] = bookTableString;
+  } catch (e) {
+    alert("Error when writing to Local Storage\n" + e);
+    error = true;
+  }
+  if (!error) console.log( nmrOfBooks + " books saved.");
+};
+
+//
+// A class-level method Book.add for creating and storing a new Book record.
+Book.add = function (slots) {
+  var book = new Book( slots);
+  Book.instances[slots.isbn] = book;
+  console.log("Book " + slots.isbn + " created!");
+};
+
+//
+// A class-level method Book.update for updating an existing Book record.
+Book.update = function (slots) {
+  var book = Book.instances[slots.isbn];
+  var year = parseInt( slots.year);
+  if (book.title !== slots.title) { book.title = slots.title;}
+  if (book.year !== year) { book.year = year;}
+  console.log("Book " + slots.isbn + " modified!");
+};
+
+//
+// A class-level method Book.destroy for deleting a Book instance.
+Book.destroy = function (isbn) {
+  if (Book.instances[isbn]) {
+    console.log("Book " + isbn + " deleted");
+    delete Book.instances[isbn];
+  } else {
+    console.log("There is no book with ISBN " + isbn + " in the database!");
+  }
+};
+
+//
+// A class-level method Book.createTestData for creating a few example book records to be used as test data.
+Book.createTestData = function () {
+  Book.instances["006251587X"] = new Book({isbn:"006251587X", title:"Weaving the Web", year:2000});
+  Book.instances["0465026567"] = new Book({isbn:"0465026567", title:"Gödel, Escher, Bach", year:1999});
+  Book.instances["0465030793"] = new Book({isbn:"0465030793", title:"I Am A Strange Loop", year:2008});
+  Book.saveAll();
+};
+
+//
+// A class-level method Book.clearData for clearing the book datastore.
+Book.clearData = function () {
+  if (confirm("Do you really want to delete all book data?")) {
+    localStorage["bookTable"] = "{}";
+  }
+};
\ No newline at end of file
diff --git a/Books/src/view/listBooks.js b/Books/src/view/listBooks.js
new file mode 100644
index 0000000000..0ae6e91292
--- /dev/null
+++ b/Books/src/view/listBooks.js
@@ -0,0 +1,17 @@
+pl.view.listBooks = {
+  setupUserInterface: function () {
+    var tableBodyEl = document.querySelector("table#books>tbody");
+    var i=0, keys=[], key="", row={};
+    // load all book objects
+    Book.loadAll();
+    keys = Object.keys( Book.instances);
+    // for each book, create a table row with a cell for each attribute
+    for (i=0; i < keys.length; i++) {
+      key = keys[i];
+      row = tableBodyEl.insertRow();
+      row.insertCell(-1).textContent = Book.instances[key].isbn;
+      row.insertCell(-1).textContent = Book.instances[key].title;
+      row.insertCell(-1).textContent = Book.instances[key].year;
+    }
+  }
+};
\ No newline at end of file
diff --git a/MVC/App.js b/MVC/App.js
new file mode 100644
index 0000000000..a9968d8ead
--- /dev/null
+++ b/MVC/App.js
@@ -0,0 +1,5 @@
+$(function () {
+     var model = new TaskModel(),
+         view = new TaskView(model),
+         controller = new TaskController(model, view);
+ });
diff --git a/MVC/EventDispatcher.js b/MVC/EventDispatcher.js
new file mode 100644
index 0000000000..1425c14ee1
--- /dev/null
+++ b/MVC/EventDispatcher.js
@@ -0,0 +1,18 @@
+var Event = function (sender) {
+    this._sender = sender;
+    this._listeners = [];
+}
+
+Event.prototype = {
+
+    attach: function (listener) {
+        this._listeners.push(listener);
+    },
+
+    notify: function (args) {
+        for (var i = 0; i < this._listeners.length; i += 1) {
+            this._listeners[i](this._sender, args);
+        }
+    }
+
+};
\ No newline at end of file
diff --git a/MVC/TaskController.js b/MVC/TaskController.js
new file mode 100644
index 0000000000..57ed2eb9d6
--- /dev/null
+++ b/MVC/TaskController.js
@@ -0,0 +1,65 @@
+var TaskController = function (model, view) {
+    this.model = model;
+    this.view = view;
+
+    this.init();
+};
+
+TaskController.prototype = {
+
+    init: function () {
+        this.createChildren()
+            .setupHandlers()
+            .enable();
+    },
+
+    createChildren: function () {
+        // no need to create children inside the controller
+        // this is a job for the view
+        // you could all as well leave this function out
+        return this;
+    },
+
+    setupHandlers: function () {
+
+        this.addTaskHandler = this.addTask.bind(this);
+        this.selectTaskHandler = this.selectTask.bind(this);
+        this.unselectTaskHandler = this.unselectTask.bind(this);
+        this.completeTaskHandler = this.completeTask.bind(this);
+        this.deleteTaskHandler = this.deleteTask.bind(this);
+        return this;
+    },
+
+    enable: function () {
+
+        this.view.addTaskEvent.attach(this.addTaskHandler);
+        this.view.completeTaskEvent.attach(this.completeTaskHandler);
+        this.view.deleteTaskEvent.attach(this.deleteTaskHandler);
+        this.view.selectTaskEvent.attach(this.selectTaskHandler);
+        this.view.unselectTaskEvent.attach(this.unselectTaskHandler);
+
+        return this;
+    },
+
+
+    addTask: function (sender, args) {
+        this.model.addTask(args.task);
+    },
+
+    selectTask: function (sender, args) {
+        this.model.setSelectedTask(args.taskIndex);
+    },
+
+    unselectTask: function (sender, args) {
+        this.model.unselectTask(args.taskIndex);
+    },
+
+    completeTask: function () {
+        this.model.setTasksAsCompleted();
+    },
+
+    deleteTask: function () {
+        this.model.deleteTasks();
+    }
+
+};
\ No newline at end of file
diff --git a/MVC/TaskModel.js b/MVC/TaskModel.js
new file mode 100644
index 0000000000..0f8860eceb
--- /dev/null
+++ b/MVC/TaskModel.js
@@ -0,0 +1,62 @@
+var TaskModel = function() {
+    this.tasks         = [];
+    this.selectedTasks = [];
+
+    this.addTaskEvent             = new Event(this);
+    this.removeTaskEvent          = new Event(this);
+    this.setTasksAsCompletedEvent = new Event(this);
+    this.deleteTasksEvent         = new Event(this);
+
+  };
+
+TaskModel.prototype = {
+
+  addTask: function(task) {
+    this.tasks.push({
+      taskName: task,
+      taskStatus: 'uncompleted'
+    });
+    this.addTaskEvent.notify();
+  },
+
+  getTasks: function() {
+    return this.tasks;
+  },
+
+  setSelectedTask: function(taskIndex) {
+    this.selectedTasks.push(taskIndex);
+  },
+
+  unselectTask: function(taskIndex) {
+    this.selectedTasks.splice(taskIndex, 1);
+  },
+
+  setTasksAsCompleted: function() {
+    var selectedTasks = this.selectedTasks;
+    for (var index in selectedTasks) {
+      this.tasks[selectedTasks[index]].taskStatus = 'completed';
+    }
+
+    this.setTasksAsCompletedEvent.notify();
+
+    this.selectedTasks = [];
+
+  },
+
+
+  deleteTasks: function() {
+    var selectedTasks = this.selectedTasks.sort();
+
+    for (var i = selectedTasks.length - 1; i >= 0; i--) {
+      this.tasks.splice(this.selectedTasks[i], 1);
+    }
+
+    // clear the selected tasks
+    this.selectedTasks = [];
+
+    this.deleteTasksEvent.notify();
+
+  }
+
+
+};
\ No newline at end of file
diff --git a/MVC/TaskView.js b/MVC/TaskView.js
new file mode 100644
index 0000000000..214f7f3f6c
--- /dev/null
+++ b/MVC/TaskView.js
@@ -0,0 +1,152 @@
+var TaskView = function (model) {
+    this.model = model;
+    this.addTaskEvent = new Event(this);
+    this.selectTaskEvent = new Event(this);
+    this.unselectTaskEvent = new Event(this);
+    this.completeTaskEvent = new Event(this);
+    this.deleteTaskEvent = new Event(this);
+
+    this.init();
+};
+
+TaskView.prototype = {
+
+    init: function () {
+        this.createChildren()
+            .setupHandlers()
+            .enable();
+    },
+
+    createChildren: function () {
+        // cache the document object
+        this.$container = $('.js-container');
+        this.$addTaskButton = this.$container.find('.js-add-task-button');
+        this.$taskTextBox = this.$container.find('.js-task-textbox');
+        this.$tasksContainer = this.$container.find('.js-tasks-container');
+
+        return this; // allows for the method chaining inside the previous init() call
+    },
+
+    setupHandlers: function () {
+
+        // setting up the event handlers and changing the scope of the this keyword inside that handler
+
+        this.addTaskButtonHandler = this.addTaskButton.bind(this);
+        this.selectOrUnselectTaskHandler = this.selectOrUnselectTask.bind(this);
+        this.completeTaskButtonHandler = this.completeTaskButton.bind(this);
+        this.deleteTaskButtonHandler = this.deleteTaskButton.bind(this);
+
+        /**
+        Handlers from Event Dispatcher
+        */
+        this.addTaskHandler = this.addTask.bind(this);
+        this.clearTaskTextBoxHandler = this.clearTaskTextBox.bind(this);
+        this.setTasksAsCompletedHandler = this.setTasksAsCompleted.bind(this);
+        this.deleteTasksHandler = this.deleteTasks.bind(this);
+
+        return this;
+    },
+
+    enable: function () {
+
+        this.$addTaskButton.click(this.addTaskButtonHandler);
+        this.$container.on('click', '.js-task', this.selectOrUnselectTaskHandler);
+        this.$container.on('click', '.js-complete-task-button', this.completeTaskButtonHandler);
+        this.$container.on('click', '.js-delete-task-button', this.deleteTaskButtonHandler);
+
+        /**
+         * Event Dispatcher
+         */
+        this.model.addTaskEvent.attach(this.addTaskHandler);
+        this.model.addTaskEvent.attach(this.clearTaskTextBoxHandler);
+        this.model.setTasksAsCompletedEvent.attach(this.setTasksAsCompletedHandler);
+        this.model.deleteTasksEvent.attach(this.deleteTasksHandler);
+
+        return this;
+    },
+
+    addTaskButton: function () {
+        this.addTaskEvent.notify({
+            task: this.$taskTextBox.val()
+        });
+    },
+
+    completeTaskButton: function () {
+        this.completeTaskEvent.notify();
+    },
+
+    deleteTaskButton: function () {
+        this.deleteTaskEvent.notify();
+    },
+
+    selectOrUnselectTask: function () {
+
+        var taskIndex = $(event.target).attr("data-index");
+
+        if ($(event.target).attr('data-task-selected') == 'false') {
+            $(event.target).attr('data-task-selected', true);
+            this.selectTaskEvent.notify({
+                taskIndex: taskIndex
+            });
+        } else {
+            $(event.target).attr('data-task-selected', false);
+            this.unselectTaskEvent.notify({
+                taskIndex: taskIndex
+            });
+        }
+
+    },
+
+    show: function () {
+        this.buildList();
+    },
+
+    buildList: function () {
+        var tasks = this.model.getTasks();
+        var html = "";
+        var $tasksContainer = this.$tasksContainer;
+
+        $tasksContainer.html('');
+
+        var index = 0;
+        for (var task in tasks) {
+
+            if (tasks[task].taskStatus == 'completed') {
+                html += "<div style='color:green;'>";
+            } else {
+                html += "<div>";
+            }
+
+            $tasksContainer.append(html + '<label><input type="checkbox" class="js-task" data-index="" + index + "" data-task-selected="false">' + tasks[task].taskName + '</label></div>');
+
+            index++;
+        }
+
+    },
+
+
+
+    /* -------------------- Handlers From Event Dispatcher ----------------- */
+
+    clearTaskTextBox: function () {
+        this.$taskTextBox.val('');
+    },
+
+    addTask: function () {
+        this.show();
+    },
+
+    setTasksAsCompleted: function () {
+        this.show();
+
+    },
+
+    deleteTasks: function () {
+        this.show();
+
+    }
+
+    /* -------------------- End Handlers From Event Dispatcher ----------------- */
+
+
+};
\ No newline at end of file
diff --git a/MVC/index.html b/MVC/index.html
new file mode 100644
index 0000000000..e503fc7632
--- /dev/null
+++ b/MVC/index.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Javascript MVC</title>
+    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
+</head>
+
+
+<body>
+
+    <div class="js-container">
+
+        <input type="text" class="js-task-textbox">
+        <input type="button" class="js-add-task-button" value="Add Task">
+
+        <div class="js-tasks-container"></div>
+        <!-- end tasks -->
+        <input type="button" class="js-complete-task-button" value="Complete Tasks">
+        <input type="button" class="js-delete-task-button" value="Delete Tasks">
+
+    </div>
+    <!-- end js-container -->
+
+    <script src="EventDispatcher.js"></script>
+    <script src="TaskModel.js"></script>
+    <script src="TaskView.js"></script>
+    <script src="TaskController.js"></script>
+    <script src="App.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file