From 7539c5cb437bec86cfdff1573043e3f843d10f46 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Thu, 9 Feb 2017 19:47:08 +0300
Subject: [PATCH 01/18] day 1

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

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

From d330697e6c791b462a5f100beb2c0315a4189ea9 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Fri, 10 Feb 2017 16:26:10 +0300
Subject: [PATCH 02/18] day 2

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

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 2712384201..2f4183797d 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -61,12 +61,48 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100% 50%;
+      transform: rotate(90deg);
+      transition: all 0.05 ease-out 0s;
     }
 
   </style>
 
   <script>
+    function getEl(selector) {
+      return document.querySelector(selector);
+    }
+    function timeToDegrees(time) {
+      return ((time / 60 * 360) + 90);
+    }
+    function rotate(el, degrees) {
+      el.style.transitionDuration = '0';
+      if (degrees) {
+        el.style.transitionDuration = '0.05';
+      }
+      return el.style.transform = `rotate(${degrees}deg)`;
+    }
+
+    const secondHand = getEl('.second-hand');
+    const minHand = getEl('.min-hand');
+    const hourHand = getEl('.hour-hand');
+
+    function setDate() {
+      const now = new Date();
+
+      const seconds = now.getSeconds();
+      const secondsDegrees = timeToDegrees(seconds);
+      const mins = now.getMinutes();
+      const minsDegrees = timeToDegrees(mins);
+      const hours = now.getHours();
+      const hoursDegrees = timeToDegrees(hours);
+
+      rotate(secondHand, secondsDegrees);
+      rotate(minHand, minsDegrees);
+      rotate(hourHand, hoursDegrees);
+    }
 
+    setInterval(setDate, 1000);
 
   </script>
 </body>

From d6ce913039cddcd10b0bc477336b5ada94f16109 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Sat, 11 Feb 2017 21:43:56 +0300
Subject: [PATCH 03/18] day 3

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..0cc0ab22c7 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,7 +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 +62,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('input');
+
+    function handleUpdate () {
+      const sizing = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + sizing);
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
 </body>

From 23519305e932655c7e4d389db2c5859c09e112c7 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Sun, 12 Feb 2017 15:56:59 +0300
Subject: [PATCH 04/18] day 4

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..d71db39f92 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,28 +31,56 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteens = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+    console.table(fifteens);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const names = inventors.map(({ first, last }) => `${first} ${last}`);
+    console.log(names);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const sorted = inventors.sort((a, b) => a.year > b.year ? 1 : -1)
+    console.table(sorted);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const years = inventors.reduce((memo, item) => (
+      memo + (item.passed - item.year)
+    ), 0);
+    console.log(years);
 
     // 5. Sort the inventors by years lived
+    const oldest = inventors.sort((a, b) => (
+      (a.passed - a.year) < (b.passed - b.year) ? 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 links = Array.from(document.querySelectorAll('.mw-category a'));
+    const de = links
+      .map(link => link.textContent)
+      .filter(name => name.includes('de'));
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const alphabetically = people.sort((a, b) => {
+      const [ aLast, aFirst ] = a.split(', ');
+      const [ bLast, bFirst ] = b.split(', ');
+      return aLast > bLast ? 1 : -1;
+    })
+    console.log(alphabetically);
 
     // 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 sum = data.reduce((memo, item) => {
+      memo[item] ? memo[item]++ : memo[item] = 1;
+      return memo;
+    }, {});
+    console.log(sum);
 
   </script>
 </body>

From f090fc51f0a56e4c564c022d6ddf763c5de2b7b2 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Mon, 13 Feb 2017 14:55:52 +0300
Subject: [PATCH 05/18] day 5

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

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..7a09521f8a 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -41,6 +42,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
     }
 
 
@@ -54,6 +60,24 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+    .panel.open-active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
     }
 
     .panel p {
@@ -67,6 +91,7 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -107,6 +132,28 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
+
+    function closeOpen(panel) {
+      panel.classList.remove('open');
+    }
+
+    function toggleOpen() {
+      Array.from(panels)
+        .filter(panel => panel !== this)
+        .forEach(closeOpen);
+      this.classList.toggle('open');
+    }
+
+    function toggleActive(e) {
+      if (e.propertyName.includes('flex')) {
+        this.classList.toggle('open-active');
+      }
+    }
+
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+
 
   </script>
 

From 30c644a27757652585db119144097f3ce6a7e5f5 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Tue, 14 Feb 2017 19:12:00 +0300
Subject: [PATCH 06/18] day 6

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

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..003d31fda0 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -15,8 +15,52 @@
     </ul>
   </form>
 <script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+  const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+  const cities = [];
+  fetch(endpoint)
+    .then(res => res.json())
+    .then(json => cities.push(...json));
+
+  function findMatches (wordToMatch, cities) {
+    const regex = new RegExp(wordToMatch, 'gi');
+    return cities.filter(place => (
+      place.city.match(regex) || place.state.match(regex)
+    ));
+  }
+
+  function numberWithCommas(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  }
+
+  function displayMatches () {
+    const matches = findMatches(this.value, cities);
+    if (!this.value) {
+      suggestions.innerHTML = `
+        <li>Filter for a city</li>
+        <li>or a state</li>
+      `;
+      return;
+    }
+    const regex = new RegExp(this.value, 'gi');
+    const html = matches.map(place => {
+      const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+      const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+      return `
+        <li>
+          <span class="name">${cityName}, ${stateName}</span>
+          <span class="population">${numberWithCommas(place.population)}</span>
+        </li>
+      `;
+    }).join('');
+    suggestions.innerHTML = html;
+  }
+
+  const searchInput = document.querySelector('.search');
+  const suggestions = document.querySelector('.suggestions');
+
+  searchInput.addEventListener('change', displayMatches);
+  searchInput.addEventListener('keyup', displayMatches);
 </script>
   </body>
 </html>

From 6190626d0701a01c44bdc06cf7afae0b09e88e26 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Wed, 15 Feb 2017 19:43:56 +0300
Subject: [PATCH 07/18] day 7

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..040d8f5917 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -27,14 +27,24 @@
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
     // Array.prototype.every() // is everyone 19 or older?
+    const year = (new Date()).getFullYear();
+    const some = people.some(human => ((year - human.year) >= 19));
+    console.log(some);
+    const every = people.every(human => ((year - human.year) >= 19));
+    console.log(every);
 
     // 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 commentByID = comments.find(comment => comment.id === 823423);
+    console.log(commentByID);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const commentIndex = comments.findIndex(comment => comment.id === 823423);
+    comments.splice(commentIndex, 1);
+    console.log(comments);
 
   </script>
 </body>

From d636f5137c2751388fd87c23571afd55734a0e1f Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Thu, 16 Feb 2017 20:53:24 +0300
Subject: [PATCH 08/18] day 8

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..419683b0ac 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,47 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+  const canvas = document.querySelector('#draw');
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let hue = 0;
+  let lineWidth = 1;
+  let direction = true;
+
+  function draw (e) {
+    if (!isDrawing) {
+      lastX = e.offsetX;
+      lastY = e.offsetY;
+      return false;
+    }
+    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+    ctx.lineWidth = lineWidth;
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(e.offsetX, e.offsetY);
+    ctx.stroke();
+    lastX = e.offsetX;
+    lastY = e.offsetY;
+    hue++;
+    hue = (hue >= 360) ? 0 : hue;
+    direction = (lineWidth >= 100) || (lineWidth <= 0) ? !direction : direction;
+    direction ? lineWidth++ : lineWidth--;
+  }
+
+  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 03603061ffd184e4883f5e07fb2947f4cad6b368 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Sun, 19 Feb 2017 15:45:40 +0300
Subject: [PATCH 09/18] day 9

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

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..7f2fee7177 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,28 +18,63 @@
     }
 
     // Regular
+    console.log('Yo!');
 
     // Interpolated
+    console.log('Yo, %s!', '💩');
 
     // Styled
+    console.log('%cYo, stylish %s!', 'color: green','💩');
 
     // warning!
+    console.warn('Warn!');
 
     // Error :|
+    console.error('Error!');
 
     // Info
+    console.info('Info!');
 
     // Testing
+    // fires only if wrong statement given
+    console.assert(1 === 2, 'Thats wrong!');
 
     // clearing
+    console.clear();
 
     // Viewing DOM Elements
+    const p = document.querySelector('p');
+    console.log(p);
+    console.dir(p);
 
     // Grouping together
+    console.clear();
+    dogs.forEach(dog => {
+      // console.group(dog.name);
+      // this will display group collapsed in console
+      console.groupCollapsed(dog.name);
+      console.log(`This is ${dog.name}`);
+      console.log(`${dog.name} is ${dog.age} old`);
+      console.groupEnd(dog.name);
+    });
 
     // counting
+    console.count('Yo!');
+    console.count('Yo!');
+    console.count('Yo!');
+    console.count('Yo!');
+    console.count('Yo!');
 
     // timing
+    console.time('Fetch to my github');
+    fetch('https://api.github.com/users/reaverart')
+      .then(res => res.json())
+      .then(json => {
+        console.timeEnd('Fetch to my github');
+        console.log(json);
+      });
+
+    console.table(dogs);
 
   </script>
 </body>

From 324e25fd3910579975fd19a295addef47f8fa596 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Sun, 19 Feb 2017 17:33:02 +0300
Subject: [PATCH 10/18] day 10

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

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index b6a1cc32ec..d911c62dea 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,25 @@
   </div>
 
 <script>
+  const checkboxes = Array.from(document.querySelectorAll('[type=checkbox]'));
+  let lastChecked;
+
+  function handleClick(e) {
+    if (e.shiftKey && this.checked && lastChecked) {
+      let inBetween = false;
+      checkboxes.forEach(checkbox => {
+        if (checkbox === this || checkbox === lastChecked) {
+          inBetween = !inBetween;
+        }
+        if (inBetween) {
+          checkbox.checked = true;
+        }
+      });
+    }
+    lastChecked = this;
+  }
+
+  checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleClick));
 </script>
 </body>
 </html>

From 1605de59860f7e32765a35070cecffff8dc6c221 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Sun, 19 Feb 2017 23:26:30 +0300
Subject: [PATCH 11/18] day 11

---
 11 - Custom Video Player/index.html |  1 +
 11 - Custom Video Player/scripts.js | 57 +++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 281a15eaa8..aed0f04b68 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -19,6 +19,7 @@
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
+       <button class="player__button fullscreen">[ ]</button>
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..988dbf0a18 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,57 @@
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+const fullscreen = player.querySelector('.fullscreen');
+let isDragging = false;
+
+function togglePlay() {
+  return video.paused ? video.play() : video.pause();
+}
+
+function updateToggle() {
+  const icon = this.paused ? '►' : '❚ ❚';
+  return toggle.textContent = icon;
+}
+
+function skip() {
+  video.currentTime += parseFloat(this.dataset.skip, 10);
+}
+
+function handleRangeUpdate(e) {
+  video[this.name] = this.value;
+  console.log(this.name, this.value);
+}
+
+function handleProgress() {
+  const percent = (video.currentTime / video.duration) * 100;
+  return progressBar.style.flexBasis = `${percent}%`;
+}
+
+function scrub(e) {
+  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+  video.currentTime = scrubTime;
+}
+
+function toggleFullscreen() {
+  document.webkitIsFullScreen ? document.webkitExitFullscreen() : player.webkitRequestFullscreen()  
+}
+
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateToggle);
+video.addEventListener('pause', updateToggle);
+video.addEventListener('timeupdate', handleProgress);
+
+toggle.addEventListener('click', togglePlay);
+skipButtons.forEach(button => button.addEventListener('click', skip));
+ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => isDragging && scrub(e));
+progress.addEventListener('mousedown', () => isDragging = true);
+progress.addEventListener('mouseup', () => isDragging = false);
+progress.addEventListener('mouseout', () => isDragging = false);
+fullscreen.addEventListener('click', toggleFullscreen);

From 8428b20b907153b2b8f33247b269f0927ba4177a Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Mon, 20 Feb 2017 13:37:34 +0300
Subject: [PATCH 12/18] day 12

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

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..bbff138c6f 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,18 @@
 </head>
 <body>
 <script>
+  const secret = 'iddqd';
+  const sequence = [];
+  function keySequence(e) {
+    sequence.push(e.key);
+    if (sequence.length > secret.length) {
+      sequence.shift()
+    }
+    if (sequence.join('') === secret) {
+      cornify_add()
+    }
+  }
+  window.addEventListener('keyup', keySequence)
 </script>
 </body>
 </html>

From 7163b3f45ed0b0ae834869bdaa9fc21383bb565f Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Tue, 21 Feb 2017 20:14:24 +0300
Subject: [PATCH 13/18] day 13

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

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..28a7c3cb0b 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -58,6 +58,25 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      const windowBottom = window.scrollY + window.innerHeight;
+      sliderImages.forEach((sliderImage, i) => {
+        const imageMiddle = sliderImage.offsetTop + sliderImage.height / 2;
+        const imageBottom = sliderImage.offsetTop + sliderImage.height;
+        const showOnHalf = windowBottom > imageMiddle;
+        const notOverScrolled = window.scrollY < imageBottom;
+        if (showOnHalf && notOverScrolled) {
+          sliderImage.classList.add('active');
+        } else {
+          sliderImage.classList.remove('active');
+        }
+      })
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>

From e0375edd51e019b3915f529860e6d834f1e3c345 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Wed, 22 Feb 2017 17:06:29 +0300
Subject: [PATCH 14/18] day 14

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

diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index 4da1bac2ea..e512588baf 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -13,6 +13,13 @@
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+    // thats reference
+    const refPlayers = players;
+    // thats copies
+    const copyPlayers1 = players.slice();
+    const copyPlayers2 = [].concat(players);
+    const copyPlayers3 = [...players];
+    const copyPlayers4 = Array.from(players);
 
     // You might think we can just do something like this:
 
@@ -37,8 +44,17 @@
     // The same thing goes for objects, let's say we have a person object
 
     // with Objects
-
+    const person = {
+      name: 'Artur',
+    };
     // and think we make a copy:
+    // thats reference
+    const refPerson = person;
+    // shallow copy
+    const copyPerson1 = Object.assign({}, person);
+    const copyPerson2 = {...person};
+    // trick to get deep copy
+    const copyPerson3 = JSON.parse(JSON.strinify(person));
 
     // how do we take a copy instead?
 

From eebf7a2ff9711e67cbb3aa2a7464a66580b19023 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Mon, 27 Feb 2017 16:52:56 +0300
Subject: [PATCH 15/18] day 15

---
 15 - LocalStorage/index-START.html | 59 +++++++++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..4a00c85325 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -22,17 +22,72 @@ <h2>LOCAL TAPAS</h2>
     <form class="add-items">
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
+      <div>
+        <input type="button" value="Check all" data-check="true">
+        <input type="button" value="Uncheck all" data-check="">
+      </div>
     </form>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const checkButtons = addItems.querySelectorAll('[data-check]');
+
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+
+  function addItem(e) {
+    console.log('yo!');
+    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) => (
+      `
+        <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 false;
+    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 toggleDoneAll(e) {
+    const check = Boolean(this.dataset.check);
+    items.forEach(item => item.done = check);
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+  checkButtons.forEach(button => button.addEventListener('click', toggleDoneAll));
+
+  populateList(items, itemsList);
 
 </script>
 
 
 </body>
 </html>
-

From 3ee2ad0bd2f738fafec4f244d9fa8f249b4484ca Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Mon, 27 Feb 2017 18:49:28 +0300
Subject: [PATCH 16/18] day 16

---
 16 - Mouse Move Shadow/index-start.html | 27 +++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..fdd85d8ae2 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,33 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const walk = 100;
+
+  function shadow(e) {
+    const {
+      offsetWidth: width,
+      offsetHeight: height,
+    } = hero;
+
+    let {
+      offsetX: x,
+      offsetY: y,
+    } = e;
+
+    if (this !== e.target) {
+      x = x + e.target.offsetLeft;
+      y = y + e.target.offsetTop;
+    }
+
+    const xWalk = -Math.round((x / width * walk) - (walk / 2));
+    const yWalk = -Math.round((y / height * walk) - (walk / 2));
+
+    text.style.textShadow = `${xWalk}px ${yWalk}px 0 black`;
+  }
+
+  hero.addEventListener('mousemove', shadow);
 </script>
 </body>
 </html>

From 0b5f66773e22ed31ae318780c399ebbe2069dd39 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Tue, 28 Feb 2017 18:41:24 +0300
Subject: [PATCH 17/18] day 17

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

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..c913761bb1 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -43,8 +43,29 @@
   <ul id="bands"></ul>
 
 <script>
-const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
+  const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
 
+  const articles = ['the', 'a', 'an'];
+
+  const list = document.querySelector('#bands');
+
+  function cleanName(bandName) {
+    // return bandName.replace(/^(a |the |an )/i, '').trim();
+    const [article, ...rest] = bandName.split(' ');
+    let cleanName = rest.join(' ');
+    if (!articles.includes(article.toLowerCase())) {
+      return bandName;
+    }
+    return cleanName;
+  }
+
+  sortedBands = bands.sort((a, b) => {
+    const cleanA = cleanName(a);
+    const cleanB = cleanName(b);
+    return (cleanA > cleanB ? 1 : -1);
+  });
+
+  list.innerHTML = sortedBands.map(band => `<li>${band}</li>`).join('');
 
 </script>
 

From efbb7be62ea657e6cef103563859af24520f8f25 Mon Sep 17 00:00:00 2001
From: Artur Charaev <artur.charaev@nytimes.com>
Date: Tue, 28 Feb 2017 19:01:03 +0300
Subject: [PATCH 18/18] day 18

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

diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index abdf4c91af..d389805db0 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,24 @@
     </li>
   </ul>
 <script>
+  const videos = Array.from(document.querySelectorAll('[data-time]'));
+
+  const seconds = videos
+    .map(videoNode => videoNode.dataset.time)
+    .map(timeString => {
+      const [mins, secs] = timeString.split(':').map(parseFloat);
+      return mins * 60 + secs;
+    })
+    .reduce((total, seconds) => total + seconds);
+
+  let secondsLeft = seconds;
+  const hours = Math.floor(secondsLeft / 3600);
+  // secondsLeft = secondsLeft - (hours * 3600);
+  secondsLeft = secondsLeft % 3600;
+  const mins = Math.floor(secondsLeft / 60);
+  // const secs = secondsLeft - (mins * 60);
+  const secs = secondsLeft % 60;
+  console.log(hours, mins, secs);
 </script>
 </body>
 </html>