From 8df08964b291a7dde25fe4525482796d8facf073 Mon Sep 17 00:00:00 2001
From: ttaghiyev <teytagiyev@gmail.com>
Date: Mon, 16 Oct 2017 15:50:20 -0400
Subject: [PATCH 1/8] day 2

---
 02 - JS and CSS Clock/index-START.html | 103 +++++++++++++++++++++++--
 1 file changed, 98 insertions(+), 5 deletions(-)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index ee7eaefb1f..e61f780290 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -8,10 +8,17 @@
 
 
     <div class="clock">
+      <div class="center"></div>
       <div class="clock-face">
-        <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
+        <div class="hand hour-hand">
+          <div class="inner"></div>
+        </div>
+        <div class="hand min-hand">
+          <div class="inner"></div>
+        </div>
+        <div class="hand second-hand">
+          <div class="inner"></div>
+        </div>
       </div>
     </div>
 
@@ -56,19 +63,105 @@
       transform: translateY(-3px); /* account for the height of the clock hands */
     }
 
+    .center {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0);
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: black;
+    }
+
+
     .hand {
       width:50%;
       height:6px;
-      background:black;
+      /*background:black;*/
       position: absolute;
       top:50%;
+      transform-origin: 100% center;
+    }
+
+    .inner {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      background-color: black;
+    }
+
+    .hour-hand .inner {
+      width: 50%;
+    }
+    .min-hand .inner {
+      width: 100%;
+    }
+    .second-hand .inner {
+      width: 100%;
+      height: 1px;
+      top: 1px;
     }
 
   </style>
 
   <script>
+  (() => {
+  // -------------------------
+  // HELPERS
+
+  // 0 is all the way left, we want to start at the 'top' of the clock
+  const ROTATION_OFFSET = 90;
+
+  // conversions for time range vs rotation range
+  const intervals = {
+    hours: 360 / 24,
+    minutes: 360 / 60,
+    seconds: 360 / 60
+  };
+
+  // grab the hand DOm elements
+  const hands = {
+    hours: document.querySelector('div.hour-hand'),
+    minutes: document.querySelector('div.min-hand'),
+    seconds: document.querySelector('div.second-hand')
+  };
+
+  // -------------------------
+  // UTILITY
+
+  // func: get the current time, note the conversion for hours from 23 base to 12 base
+  const getTimeInfo = (date = new Date()) => ({
+    hours: date.getHours() % 12 ? date.getHours() % 12 : 12,
+    minutes: date.getMinutes(),
+    seconds: date.getSeconds()
+  });
+
+  // func: given name of interval, and a time value, calculates the rotation to apply
+  const getRotationDegrees = (intervalKey, timeVal) =>
+    90 + intervals[intervalKey] * parseInt(timeVal);
+
+  // -------------------------
+  // EXECUTION FUNCTIONS
+
+  const updateClock = (elems, times) => {
+    for (let handName in elems) {
+      elems[handName].style.transform = `rotate(${getRotationDegrees(
+        handName,
+        times[handName]
+      )}deg)`;
+    }
+  };
 
+  // initial call to position the hands on load
+  updateClock(hands, getTimeInfo());
 
-  </script>
+  // run the clock indefinitely
+  const timer = setInterval(() => {
+    updateClock(hands, getTimeInfo());
+  }, 1000);
+})();
+</script>
 </body>
 </html>

From 08f533ade01fa16aa3376bbf34d1a26c88939c5b Mon Sep 17 00:00:00 2001
From: ttaghiyev <teytagiyev@gmail.com>
Date: Tue, 17 Oct 2017 10:00:45 -0400
Subject: [PATCH 2/8] Day 3 - Css Vars

---
 03 - CSS Variables/index-START.html | 57 +++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 8a4f0d556e..66fc3b595f 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -18,14 +18,10 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <input id="base" type="color" name="base" value="#ffc600">
   </div>
 
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+  <!-- <img class="target" src="https://source.unsplash.com/7bwQXzbF6KE/800x500"> -->
+  <img class="target" src="http://www.creativeapplications.net/wp-content/uploads/2015/03/google.jpg">
 
   <style>
-
-    /*
-      misc styles, nothing to do with CSS variables
-    */
-
     body {
       text-align: center;
       background: #193549;
@@ -42,10 +38,57 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width:100px;
     }
+
+    /* VARS */
+
+    .target {
+      --spacing: 0px;
+      --base: #06c;
+      --blur: 0px;
+
+
+      filter: blur(var(--blur));
+      padding: var(--spacing);
+      background-color: var(--base);
+    }
   </style>
 
   <script>
-  </script>
+  (() => {
+  // ----------------------
+  // CONSTANTS
+
+  const $img = document.querySelector('.target');
+  const $inputs = {
+    spacing: document.querySelector('#spacing'),
+    blur: document.querySelector('#blur'),
+    base: document.querySelector('#base')
+  };
+
+  // ----------------------
+  // UTIL FUNCTIONS
+
+  // given an element, a var name, and a value, sets css variable
+  const applyNewVal = (elem, propName, val) =>
+    elem.style.setProperty(`--${propName}`, val);
+
+  // given a DOM input, gets the input value and css suffix (i.e. px) and calls apply styles
+  const watchForChanges = e => {
+    const elem = e.target;
+    const propName = elem.getAttribute('name');
+    const val = elem.value + (elem.getAttribute('data-sizing') || '');
+
+    applyNewVal($img, propName, val);
+  };
+
+  // ----------------------
+  // INPUT EVENT BINDING
+
+  for (const i in $inputs) {
+    $inputs[i].addEventListener('input', watchForChanges);
+  }
+})();
+</script>
 
 </body>
 </html>

From 393f310e3baae7ed8b8044bc12130943e6c41c64 Mon Sep 17 00:00:00 2001
From: ttaghiyev <teytagiyev@gmail.com>
Date: Thu, 19 Oct 2017 09:20:03 -0400
Subject: [PATCH 3/8] and array cardio

---
 04 - Array Cardio Day 1/index-START.html | 189 ++++++++++++++++++-----
 1 file changed, 154 insertions(+), 35 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..7757b2bef5 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -7,53 +7,172 @@
 <body>
   <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
-    // Get your shorts on - this is an array workout!
-    // ## Array Cardio Day 1
+  // Get your shorts on - this is an array workout!
+// ## Array Cardio Day 1
 
-    // Some data we can work with
+// Some data we can work with
 
-    const inventors = [
-      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
-      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
-      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
-      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
-      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
-      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
-      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
-      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
-      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
-      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
-      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
-      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
-    ];
+const inventors = [
+  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
+  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
+  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
+  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
+  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
+  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
+  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
+  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
+  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
+  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
+  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
+  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
+];
 
-    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'];
+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
+// add age to make debugging easier
+inventors.forEach(i => (i.age = i.passed - i.year));
 
-    // Array.prototype.map()
-    // 2. Give us an array of the inventors' first and last names
+// Array.prototype.filter()
+// 1. Filter the list of inventors for those who were born in the 1500's
+const filterByBirth = (arr, log = true) => {
+  const result = arr.filter(person => person.year < 1600);
+  if (log) {
+    console.log('people born in the 1500s: ', result);
+  }
+};
 
-    // Array.prototype.sort()
-    // 3. Sort the inventors by birthdate, oldest to youngest
+// Array.prototype.map()
+// 2. Give us an array of the inventors' first and last names
+const mapFirstLast = (arr, log = true) => {
+  const result = arr.map(person => [person.first, person.last]);
+  if (log) {
+    console.log('inventors first and last names: ', result);
+  }
+};
 
-    // Array.prototype.reduce()
-    // 4. How many years did all the inventors live?
+// Array.prototype.sort()
+// 3. Sort the inventors by birthdate, oldest to younges
+const sortByBirthdate = (arr, log = true) => {
+  const result = arr.sort((a, b) => b.year - a.year);
+  if (log) {
+    console.log('sorted by birthdate (old -> young): ', result);
+  }
+};
 
-    // 5. Sort the inventors by years lived
+// Array.prototype.reduce()
+// 4. How many years did all the inventors live?
+const reduceYearsLived = (arr, log = true) => {
+  const result = arr.reduce((acc, i) => {
+    const age = i.passed - i.year;
+    return acc + age;
+  }, 0);
+  if (log) {
+    console.log('total lived ages: ', result);
+  }
+};
 
-    // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
-    // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+// 5. Sort the inventors by years lived
+const sortByAge = (arr, log = true) => {
+  const result = arr.sort((a, b) => {
+    const ageA = a.passed - a.year;
+    const ageB = b.passed - b.year;
+    return ageB - ageA;
+  });
+  if (log) {
+    console.log('sorted by age: ', result);
+  }
+};
 
+// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
+// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
-    // 7. sort Exercise
-    // Sort the people alphabetically by last name
+const filterBlvrd = () => {
+  return true;
+};
 
-    // 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' ];
+// 7. sort Exercise
+// Sort the people alphabetically by last name
+// @TODO - didnt do
 
-  </script>
+// 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 reduceSum = (arr, log = true) => {
+  const result = arr.reduce((acc, d) => {
+    acc.hasOwnProperty(d) ? (acc[d] = acc[d] + 1) : (acc[d] = 1);
+    return acc;
+  }, {});
+  if (log) {
+    console.log('sum of instances: ', result);
+  }
+};
+
+// run functions
+filterByBirth(inventors);
+mapFirstLast(inventors);
+sortByBirthdate(inventors);
+reduceYearsLived(inventors);
+sortByAge(inventors);
+filterBlvrd();
+reduceSum(data);
+</script>
 </body>
 </html>

From 9cb5e9e0773ad4036bdc005a75fe8711fe06a7cb Mon Sep 17 00:00:00 2001
From: ttaghiyev <teytagiyev@gmail.com>
Date: Thu, 19 Oct 2017 10:29:15 -0400
Subject: [PATCH 4/8] day5 - quick flex layout

---
 05 - Flex Panel Gallery/index-START.html | 63 ++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 4 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index c6509bed02..3d0f056ad4 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -22,11 +22,27 @@
     }
 
     .panels {
+      /* flex content */
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: stretch;
+      width: 100%;
+      /* end flex content */
+
       min-height:100vh;
       overflow: hidden;
     }
 
     .panel {
+
+      /* flex content */
+      flex: 1 0 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 15vh 0;
+      /* end flex content */
+
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
@@ -44,16 +60,23 @@
     }
 
 
-    .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
+    /*.
+      old images, wouldnt load
+     panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
     .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
     .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
-    .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
+    .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }*/
+    .panel1 { background-image:url(https://cdn.allwallpaper.in/wallpapers/1920x1080/12042/gorgeous-clouds-in-the-valley-hdr-1920x1080-wallpaper.jpg); }
+    .panel2 { background-image:url(https://cdn.allwallpaper.in/wallpapers/1500x1500/15213/original-content-clouds-scenic-skies-skyscapes-1500x1500-wallpaper.jpg); }
+    .panel3 { background-image:url(https://cdn.allwallpaper.in/wallpapers/1800x1200/16332/green-trees-autumn-wood-bridges-hdr-photography-colors-1800x1200-wallpaper.jpg); }
+    .panel4 { background-image:url(https://cdn.allwallpaper.in/wallpapers/3008x2000/584/flora-flowers-macro-nature-3008x2000-wallpaper.jpg); }
+    .panel5 { background-image:url(https://cdn.allwallpaper.in/wallpapers/1920x1080/6533/beaches-evening-landscapes-nature-rocky-1920x1080-wallpaper.jpg); }
 
     .panel > * {
       margin:0;
       width: 100%;
-      transition:transform 0.5s;
+      transition:transform 0.5s, opacity 0.5s;
     }
 
     .panel p {
@@ -62,14 +85,32 @@
       text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
     }
+    .panel p:nth-child(1) {
+      /* assignment */
+      opacity: 0;
+      transform: translateY(-30px);
+      /* assignment end */
+    }
     .panel p:nth-child(2) {
       font-size: 4em;
     }
+    .panel p:nth-child(3) {
+      /* assignment */
+      opacity: 0;
+      transform: translateY(30px);
+      /* assignment end */
+    }
 
     .panel.open {
       font-size:40px;
     }
 
+    .panel.open p:nth-child(1),
+    .panel.open p:nth-child(3) {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
   </style>
 
 
@@ -102,8 +143,22 @@
   </div>
 
   <script>
+  (() => {
+  const toggleOpen = elem => {
+    elem.classList.contains('open')
+      ? elem.classList.remove('open')
+      : elem.classList.add('open');
+  };
 
-  </script>
+  const panels = document.querySelectorAll('.panel');
+  // console.log(Array.isArray(panels));
+  Array.from(panels).map(p => {
+    p.addEventListener('click', e => {
+      toggleOpen(p);
+    });
+  });
+})();
+</script>
 
 
 

From 1ffa02f500d7b9b3d90f970bab4c57d2b31a56ee Mon Sep 17 00:00:00 2001
From: ttaghiyev <teytagiyev@gmail.com>
Date: Fri, 20 Oct 2017 16:28:48 -0400
Subject: [PATCH 5/8] day6 typing forward

---
 06 - Type Ahead/index-START.html |   7 +-
 06 - Type Ahead/index.js         |  48 +++
 06 - Type Ahead/test.js          |  77 +++++
 package.json                     |  17 ++
 yarn.lock                        | 510 +++++++++++++++++++++++++++++++
 5 files changed, 654 insertions(+), 5 deletions(-)
 create mode 100644 06 - Type Ahead/index.js
 create mode 100644 06 - Type Ahead/test.js
 create mode 100644 package.json
 create mode 100644 yarn.lock

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..cec804f03c 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -7,16 +7,13 @@
 </head>
 <body>
 
-  <form class="search-form">
+  <form class="search-form" data-state="empty">
     <input type="text" class="search" placeholder="City or State">
     <ul class="suggestions">
       <li>Filter for a city</li>
       <li>or a state</li>
     </ul>
   </form>
-<script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
-
-</script>
+  <script src="index.js"></script>
   </body>
 </html>
diff --git a/06 - Type Ahead/index.js b/06 - Type Ahead/index.js
new file mode 100644
index 0000000000..e4d119e0cb
--- /dev/null
+++ b/06 - Type Ahead/index.js	
@@ -0,0 +1,48 @@
+const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+
+const cities = [];
+
+fetch(endpoint)
+    .then( res => res.json())
+    .then( data => cities.push(...data));
+
+console.log(cities);
+
+const $form = document.querySelector('.search-form');
+const $input = document.querySelector('.search');
+const $list = document.querySelector('.suggestions');
+
+// utility: given a list and a target string, return any city wher the string is found
+// - ignores case 
+const getMatchingCities = (arr, target) => {
+    const exp = new RegExp(target, 'gi');
+    return arr.filter( c => c.city.match(exp) || c.state.match(exp));
+}
+
+// util: given a string and a part to highlight, returns html markup with a highlight class
+// - case insensitive
+const applyHighlight = (str, target) => {
+    const exp = new RegExp(target, 'gi');
+    return str.replace(exp, '<span class="hl">$&</span>');
+}
+
+// util: given an object, format the HTML for the output
+const getResultMarkup = (obj, target) => {
+    const hCity = applyHighlight(obj.city, target);
+    const hState = applyHighlight(obj.state, target);
+    // <span class="population">${numberWithCommas(place.population)}</span>
+    return `
+        <li>
+            <span class="name">${hCity}, ${hState}</span>
+        </li>
+        `;
+}
+
+const renderResults = (list, target) =>
+    getMatchingCities(list, target)
+        .map( obj => getResultMarkup(obj, target)).join('');
+
+
+
+$input.addEventListener('keyup', e => 
+    $list.innerHTML = renderResults(cities, e.target.value));
\ No newline at end of file
diff --git a/06 - Type Ahead/test.js b/06 - Type Ahead/test.js
new file mode 100644
index 0000000000..1432648731
--- /dev/null
+++ b/06 - Type Ahead/test.js	
@@ -0,0 +1,77 @@
+const test = require('tape');
+
+// generate generic data
+const listFactory = () => ([{
+    city: "New York",
+    growth_from_2000_to_2013: "4.8%",
+    latitude: 40.7127837,
+    longitude: -74.0059413,
+    population: "8405837",
+    rank: "1",
+    state: "New York"
+}, {
+    city: "Chicago",
+    growth_from_2000_to_2013: "-6.1%",
+    latitude: 41.8781136,
+    longitude: -87.6297982,
+    population: "2718782",
+    rank: "3",
+    state: "Illinois",
+}]);
+
+// utility: given a list and a target string, return any city wher the string is found
+// - ignores case 
+const getMatchingCities = (arr, target) => {
+    const exp = new RegExp(target, 'gi');
+    return arr.filter( c => c.city.match(exp) || c.state.match(exp));
+}
+
+test('Case sensitive filtering', assert => {
+    const list = listFactory();
+    const target = 'New';
+    
+    const actual = getMatchingCities(list, target);
+
+    assert.same(actual.length, 1, '...should return a single item');
+    assert.same(actual[0].city, 'New York');
+    assert.end();
+});
+
+test('Case insensitive filtering', assert => {
+    const list = listFactory();
+    const target = 'chi';
+    
+    const actual = getMatchingCities(list, target);
+    
+    assert.same(actual.length, 1, '...should return a single item');
+    assert.same(actual[0].city, 'Chicago');
+    assert.end();
+});
+
+// util: given a string and a part to highlight, returns html markup with a highlight class
+// - case insensitive
+const applyHighlight = (str, target) => {
+    const exp = new RegExp(target, 'gi');
+    return str.replace(exp, '<span class="hl">$&</span>');
+}
+
+test('Highlighting a word (same case)', assert => {
+    const source = 'New York';
+    const target = 'New';
+    
+    const actual = applyHighlight(source, target);
+    assert.ok(actual.includes('New'), '... should contain unmodified target word');
+    assert.ok(actual.includes('span'), '... should include span');
+    assert.end();
+});
+
+test('Highlighting a word (diff case case)', assert => {
+    const source = 'New York';
+    const target = 'new';
+    
+    const actual = applyHighlight(source, target);
+    console.log(actual);
+    assert.ok(actual.includes('New'), '... should contain unmodified target word');
+    assert.ok(actual.includes('span'), '... should include span');
+    assert.end();
+});
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..82efa171c8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "JavaScript30",
+  "version": "1.0.0",
+  "description": "30 day challenge",
+  "main": "index.js",
+  "repository": "https://github.com/ttaghiyev/JavaScript30.git",
+  "author": "ttaghiyev <teytagiyev@gmail.com>",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "test6": "babel-tape-runner 06\\ -\\ Type\\ Ahead/test.js"
+  },
+  "dependencies": {
+    "babel-tape-runner": "^2.0.1",
+    "tape": "^4.8.0"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000000..73af0a2797
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,510 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+ansi-regex@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+babel-code-frame@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-generator "^6.26.0"
+    babel-helpers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-register "^6.26.0"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    convert-source-map "^1.5.0"
+    debug "^2.6.8"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.7"
+    slash "^1.0.0"
+    source-map "^0.5.6"
+
+babel-generator@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
+  dependencies:
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    detect-indent "^4.0.0"
+    jsesc "^1.3.0"
+    lodash "^4.17.4"
+    source-map "^0.5.6"
+    trim-right "^1.0.1"
+
+babel-helpers@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-polyfill@^6.3.14:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
+  dependencies:
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    regenerator-runtime "^0.10.5"
+
+babel-register@^6.26.0, babel-register@^6.3.13:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  dependencies:
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
+
+babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+babel-tape-runner@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/babel-tape-runner/-/babel-tape-runner-2.0.1.tgz#9c012ff9ab0f30020ac11fcc8e848f203f222173"
+  dependencies:
+    babel-polyfill "^6.3.14"
+    babel-register "^6.3.13"
+    glob "^6.0.1"
+
+babel-template@^6.24.1, babel-template@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  dependencies:
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
+
+babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
+brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+
+convert-source-map@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
+
+core-js@^2.4.0, core-js@^2.5.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
+
+debug@^2.6.8:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+deep-equal@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
+define-properties@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+  dependencies:
+    foreach "^2.0.5"
+    object-keys "^1.0.8"
+
+defined@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+
+detect-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  dependencies:
+    repeating "^2.0.0"
+
+es-abstract@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+escape-string-regexp@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+
+for-each@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.2.tgz#2c40450b9348e97f281322593ba96704b9abd4d4"
+  dependencies:
+    is-function "~1.0.0"
+
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+
+function-bind@^1.0.2, function-bind@^1.1.1, function-bind@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+glob@^6.0.1:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@~7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has@^1.0.1, has@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  dependencies:
+    function-bind "^1.0.2"
+
+home-or-tmp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.1"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+
+invariant@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  dependencies:
+    loose-envify "^1.0.0"
+
+is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
+is-finite@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-function@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
+
+is-symbol@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+
+js-tokens@^3.0.0, js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+jsesc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+
+json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+
+lodash@^4.17.4:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
+loose-envify@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
+"minimatch@2 || 3", minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+
+minimist@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+
+mkdirp@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+
+object-inspect@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.3.0.tgz#5b1eb8e6742e2ee83342a637034d844928ba2f6d"
+
+object-keys@^1.0.8:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  dependencies:
+    wrappy "1"
+
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+
+os-tmpdir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+
+path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+private@^0.1.7:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+
+regenerator-runtime@^0.10.5:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+
+regenerator-runtime@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+
+repeating@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  dependencies:
+    is-finite "^1.0.0"
+
+resolve@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
+  dependencies:
+    path-parse "^1.0.5"
+
+resumer@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/resumer/-/resumer-0.0.0.tgz#f1e8f461e4064ba39e82af3cdc2a8c893d076759"
+  dependencies:
+    through "~2.3.4"
+
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+
+source-map-support@^0.4.15:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  dependencies:
+    source-map "^0.5.6"
+
+source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+
+string.prototype.trim@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz#d04de2c89e137f4d7d206f086b5ed2fae6be8cea"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.0"
+    function-bind "^1.0.2"
+
+strip-ansi@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  dependencies:
+    ansi-regex "^2.0.0"
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+tape@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/tape/-/tape-4.8.0.tgz#f6a9fec41cc50a1de50fa33603ab580991f6068e"
+  dependencies:
+    deep-equal "~1.0.1"
+    defined "~1.0.0"
+    for-each "~0.3.2"
+    function-bind "~1.1.0"
+    glob "~7.1.2"
+    has "~1.0.1"
+    inherits "~2.0.3"
+    minimist "~1.2.0"
+    object-inspect "~1.3.0"
+    resolve "~1.4.0"
+    resumer "~0.0.0"
+    string.prototype.trim "~1.1.2"
+    through "~2.3.8"
+
+through@~2.3.4, through@~2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

From 63ef4bf4db35d2e79d01692a97cc4a137e8ac3e3 Mon Sep 17 00:00:00 2001
From: ttaghiyev <teytagiyev@gmail.com>
Date: Mon, 23 Oct 2017 12:56:35 -0400
Subject: [PATCH 6/8] day7 more arrays

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..056044e1b2 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -7,35 +7,54 @@
 <body>
   <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
-    // ## Array Cardio Day 2
+  // ## Array Cardio Day 2
 
-    const people = [
-      { name: 'Wes', year: 1988 },
-      { name: 'Kait', year: 1986 },
-      { name: 'Irv', year: 1970 },
-      { name: 'Lux', year: 2015 }
-    ];
+const people = [
+  { name: 'Wes', year: 1988 },
+  { name: 'Kait', year: 1986 },
+  { name: 'Irv', year: 1970 },
+  { name: 'Lux', year: 2015 }
+];
 
-    const comments = [
-      { text: 'Love this!', id: 523423 },
-      { text: 'Super good', id: 823423 },
-      { text: 'You are the best', id: 2039842 },
-      { text: 'Ramen is my fav food ever', id: 123523 },
-      { text: 'Nice Nice Nice!', id: 542328 }
-    ];
+const comments = [
+  { text: 'Love this!', id: 523423 },
+  { text: 'Super good', id: 823423 },
+  { text: 'You are the best', id: 2039842 },
+  { text: 'Ramen is my fav food ever', id: 123523 },
+  { text: 'Nice Nice Nice!', id: 542328 }
+];
 
-    // Some and Every Checks
-    // Array.prototype.some() // is at least one person 19 or older?
-    // Array.prototype.every() // is everyone 19 or older?
+// Some and Every Checks
+// Array.prototype.some() // is at least one person 19 or older?
+const arraySome = arr => {
+  const currYear = new Date().getFullYear();
+  return arr.some(e => currYear - e.year > 19);
+  s;
+};
+// Array.prototype.every() // is everyone 19 or older?
+const arrayEvery = arr => {
+  const currYear = new Date().getFullYear();
+  return arr.every(e => currYear - e.year > 19);
+};
 
-    // 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
+// 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 arrayFind = arr => arr.find(e => e.id === 823423);
 
-    // Array.prototype.findIndex()
-    // Find the comment with this ID
-    // delete the comment with the ID of 823423
+// Array.prototype.findIndex()
+// Find the comment with this ID
+// delete the comment with the ID of 823423
+const arrayFindIndex = arr => {
+  const loc = arr.findIndex(e => e.id === 823423);
+  arr.splice(loc, 1);
+  return arr;
+};
 
-  </script>
+console.log(arraySome(people));
+console.log(arrayEvery(people));
+console.log(arrayFind(comments));
+console.log(arrayFindIndex(comments));
+</script>
 </body>
 </html>

From fcfcc9241e2490969613d3c121f5166bb3f100df Mon Sep 17 00:00:00 2001
From: ttaghiyev <teytagiyev@gmail.com>
Date: Mon, 23 Oct 2017 18:55:22 -0400
Subject: [PATCH 7/8] day8 fun with canvas

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..d7503f5c96 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,60 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+const canvas = document.querySelector('#draw');
+const ctx = canvas.getContext('2d');
+
+// set width / height to window
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// color of the stroke
+ctx.strokeStyle = 'BADA55';
+// how does the line look at the end
+ctx.lineCap = 'round';
+// how does the line look when it's combined with another
+ctx.lineJoin = 'round';
+
+// detect a draw state, like a mouse down + drag
+let isDrawing = false;
+
+// drawing needs a starting point
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+
+const draw = e => {
+  if (!isDrawing) return false;
+
+  hue = hue + 3;
+
+  if (hue >= 360) {
+    hue = 0;
+  }
+
+  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+  ctx.beginPath();
+  ctx.moveTo(lastX, lastY);
+  ctx.lineTo(e.offsetX, e.offsetY);
+  ctx.lineWidth = 20;
+  ctx.stroke();
+
+  // es6 destruct technique
+  [lastX, lastY] = [e.offsetX, e.offsetY];
+};
+
+const toggleState = () => {
+  isDrawing = !isDrawing;
+};
+
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mousedown', e => {
+  lastX = e.offsetX;
+  lastY = e.offsetY;
+  isDrawing = true;
+});
+canvas.addEventListener('mouseup', () => (isDrawing = false));
+canvas.addEventListener('mouseout', () => (isDrawing = false));
 </script>
 
 <style>

From d72c1c5a6bbc1ee2ddc54cfc94782bbcb4349f04 Mon Sep 17 00:00:00 2001
From: ttaghiyev <teytagiyev@gmail.com>
Date: Thu, 26 Oct 2017 20:44:35 -0400
Subject: [PATCH 8/8] days 6 10 and 12

---
 .gitignore                                    |  1 +
 .prettierrc                                   |  3 +
 06 - Type Ahead/index.js                      | 48 ++++++------
 .../index-START.html                          | 75 +++++++++++++++++++
 12 - Key Sequence Detection/index-START.html  | 62 ++++++++++++++-
 5 files changed, 162 insertions(+), 27 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.gitignore b/.gitignore
index 164ae8655c..5a2b04f8a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 *.log
 haters/
 .idea/
+.vscode
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..544138be45
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/06 - Type Ahead/index.js b/06 - Type Ahead/index.js
index e4d119e0cb..950314088e 100644
--- a/06 - Type Ahead/index.js	
+++ b/06 - Type Ahead/index.js	
@@ -1,48 +1,48 @@
-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( res => res.json())
-    .then( data => cities.push(...data));
-
-console.log(cities);
+  .then(res => res.json())
+  .then(data => cities.push(...data));
 
 const $form = document.querySelector('.search-form');
 const $input = document.querySelector('.search');
 const $list = document.querySelector('.suggestions');
 
 // utility: given a list and a target string, return any city wher the string is found
-// - ignores case 
+// - ignores case
 const getMatchingCities = (arr, target) => {
-    const exp = new RegExp(target, 'gi');
-    return arr.filter( c => c.city.match(exp) || c.state.match(exp));
-}
+  const exp = new RegExp(target, 'gi');
+  return arr.filter(c => c.city.match(exp) || c.state.match(exp));
+};
 
 // util: given a string and a part to highlight, returns html markup with a highlight class
 // - case insensitive
 const applyHighlight = (str, target) => {
-    const exp = new RegExp(target, 'gi');
-    return str.replace(exp, '<span class="hl">$&</span>');
-}
+  const exp = new RegExp(target, 'gi');
+  return str.replace(exp, '<span class="hl">$&</span>');
+};
 
 // util: given an object, format the HTML for the output
 const getResultMarkup = (obj, target) => {
-    const hCity = applyHighlight(obj.city, target);
-    const hState = applyHighlight(obj.state, target);
-    // <span class="population">${numberWithCommas(place.population)}</span>
-    return `
+  const hCity = applyHighlight(obj.city, target);
+  const hState = applyHighlight(obj.state, target);
+  // <span class="population">${numberWithCommas(place.population)}</span>
+  return `
         <li>
             <span class="name">${hCity}, ${hState}</span>
         </li>
         `;
-}
+};
 
 const renderResults = (list, target) =>
-    getMatchingCities(list, target)
-        .map( obj => getResultMarkup(obj, target)).join('');
-
-
-
-$input.addEventListener('keyup', e => 
-    $list.innerHTML = renderResults(cities, e.target.value));
\ No newline at end of file
+  getMatchingCities(list, target)
+    .map(obj => getResultMarkup(obj, target))
+    .join('');
+
+$input.addEventListener(
+  'keyup',
+  e => ($list.innerHTML = renderResults(cities, e.target.value))
+);
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index aeac48e7f9..0571c5c153 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -99,6 +99,81 @@
   </div>
 
 <script>
+(() => {
+  // get all the items, and index them
+  const $items = Array.from(document.querySelectorAll('.item'));
+
+  // @TODO add state
+
+  // selection states
+  let isSelectMode = false;
+  let lastChecked = null;
+
+  // ----------------
+  // HANDLE SHIFT KEY
+
+  // check if the keycode is for 'shift'
+  const isShift = code => code === 16;
+
+  // if we are the shift key, and we're not a repeated down event, set true
+  // when a key is held down it constantly fires 'keypress' events.
+  const setShiftFlag = e =>
+    !isShift(e.which) || e.repeat ? true : (isSelectMode = true);
+
+  // if the key released is shift, set flag to false
+  const unsetShiftFlag = e =>
+    !isShift(e.which) ? false : (isSelectMode = false);
+
+  // watch all keypressed, handler functions know to handle 'shift'
+  document.addEventListener('keydown', setShiftFlag);
+  document.addEventListener('keyup', unsetShiftFlag);
+
+  // ----------------
+  // HANDLE CHECKBOX CLICK
+
+  // given an element, checks children and returns the input element
+  const findChildInput = arr =>
+    Array.from(arr).find(child => child.tagName === 'INPUT');
+
+  // given an array of element, and the range, check off the inputs in that range
+  // (not including the start and end)
+  const autoSelect = (elemArr, rangeStart, rangeEnd) =>
+    elemArr
+      .slice(rangeStart, rangeEnd)
+      .forEach(item => (findChildInput(item.children).checked = true));
+
+  // cases:
+  // 1. we've clicked a checked input: uncheck it and return
+  // 2. we've clicked a unchecked input, shift is not held: check the input + set start range
+  // 3. we've clicked a unchecked input, shift is held: check all elements inbetween + set new start range
+  const handleCheckboxClick = (elem, currIndex) => {
+    // if we were checked, clear out last elem and return
+    if (!elem.checked) {
+      return (lastChecked = null);
+    }
+
+    // if we werent checked, and the boundary isnt set
+    if (isSelectMode && lastChecked !== null) {
+      lastChecked > currIndex
+        ? autoSelect($items, currIndex, lastChecked + 1)
+        : autoSelect($items, lastChecked + 1, currIndex);
+    }
+
+    // regardless of what happens, when a new item is checked, set the lastChecked
+    return (lastChecked = currIndex);
+  };
+
+  // for each item, bind the click event for the input along with the items array index
+  $items.forEach((item, i) => {
+    try {
+      findChildInput(item.children).addEventListener('click', e =>
+        handleCheckboxClick(e.target, i)
+      );
+    } catch (err) {
+      console.error(`error finding input: ${err}`);
+    }
+  });
+})();
 </script>
 </body>
 </html>
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..e3f89d120d 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -1,12 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Key Detection</title>
   <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
 </head>
+
 <body>
-<script>
-</script>
+  <script>
+    (() => {
+      // CONSTANTS
+
+      // up up down down left right left right b a
+      const sequence = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
+
+      // is the sequene started? (first key of the sequence)
+      const DEF_IS_STARTED = false;
+
+      // how many have we gottenr right so far?
+      const DEF_NUM_RIGHT = 0;
+
+      const appState = {
+        isStarted: DEF_IS_STARTED,
+        numRight: DEF_NUM_RIGHT
+      };
+
+      const resetState = state => {
+        state.isStarted = DEF_IS_STARTED;
+        state.numRight = DEF_NUM_RIGHT;
+      }
+
+      const handleKeyPress = (e, state) => {
+        // if we don't have a sequence in motion, ignore everything but the up arrow.
+        // TODO clean this up
+        if (!state.isStarted && e.which !== sequence[state.numRight]) {
+          return false;
+        }
+
+        // we've started the sequence
+        if (!state.isStarted && e.which === sequence[state.numRight]) {
+          // console.info('starting the sequence...');
+          state.isStarted = true;
+          state.numRight = state.numRight + 1;
+          return true;
+        }
+
+        // we're continuing the sequence, but we put in the wrong value
+        // console.log(`comparing ${e.which} to ${state.numRight} which is ${sequence[state.numRight]}`);
+        if (e.which !== sequence[state.numRight]) {
+          // console.warn('wrong sequence, resetting');
+          resetState(state);
+          return false;
+        }
+
+        // if nothing else went wrong, inrement the input counter
+        // console.log('so far so good...');
+        return state.numRight = state.numRight + 1;
+      }
+
+      // listen for any keystrokes
+      window.addEventListener('keydown', e => handleKeyPress(e, appState));
+    })()
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file