From c4c804a432633bc850c6d3a030f5e8bdf0450630 Mon Sep 17 00:00:00 2001
From: Zane Mattingly <z@matting.ly>
Date: Wed, 31 Oct 2018 06:25:11 -0700
Subject: [PATCH 1/7] :tada: Initial fork commit

---
 readme.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/readme.md b/readme.md
index 17e54a1c95..2c7b9677d5 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,7 @@
 ![](https://javascript30.com/images/JS3-social-share.png)
 
 # JavaScript30
+### :page_facing_up: :arrow_upper_right: @zmattingly's fork to track progress on these mini-projects day to day.
 
 Starter Files + Completed solutions for the JavaScript 30 Day Challenge.
 

From 455505315039435425ef9aebdb13aa2b053aa7f4 Mon Sep 17 00:00:00 2001
From: Zane Mattingly <z@matting.ly>
Date: Wed, 31 Oct 2018 06:51:28 -0700
Subject: [PATCH 2/7] :sparkles: 01 - JavaScript Drum Kit: complete.

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..e8024d5691 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -57,8 +57,29 @@
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
-<script>
+<script type="text/javascript">
+  // Element/Event Handling setup
+  window.addEventListener('keydown', playAudio);
 
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+  // The Functional Workhorses (or maybe Less Than 10 Lines = Workponies?)
+  function playAudio(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+
+    if (!audio) return; // Early no-op if keydown key does not match an <audio> element
+
+    audio.currentTime = 0; // Put your thing down, flip it and reverse it (restart audio clip each appropriate keydown event)
+    audio.play();
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return; // Early no-op so we only trigger during the CSS scale transformation between standard '.key' and '.key, .playing'
+    this.classList.remove('playing');
+  }
 </script>
 
 

From 34a58ec28dce737031c1946a3fa2a72de85ae417 Mon Sep 17 00:00:00 2001
From: Zane Mattingly <z@matting.ly>
Date: Wed, 31 Oct 2018 06:53:20 -0700
Subject: [PATCH 3/7] :pencil2: One second thought let's just one forking
 emoji...

---
 readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/readme.md b/readme.md
index 2c7b9677d5..83bd73ced0 100644
--- a/readme.md
+++ b/readme.md
@@ -1,7 +1,7 @@
 ![](https://javascript30.com/images/JS3-social-share.png)
 
 # JavaScript30
-### :page_facing_up: :arrow_upper_right: @zmattingly's fork to track progress on these mini-projects day to day.
+### :arrow_upper_right: @zmattingly's fork to track progress on these mini-projects day to day.
 
 Starter Files + Completed solutions for the JavaScript 30 Day Challenge.
 

From 2368853c7d6ea45c619d13e163974fa2accd8d0d Mon Sep 17 00:00:00 2001
From: Zane Mattingly <z@matting.ly>
Date: Mon, 5 Nov 2018 17:05:12 -0800
Subject: [PATCH 4/7] :recycle: Moving work done to separate file to preserve
 initial state with

---
 01 - JavaScript Drum Kit/index-START.html   | 23 +-----
 01 - JavaScript Drum Kit/index-WORKING.html | 87 +++++++++++++++++++++
 2 files changed, 88 insertions(+), 22 deletions(-)
 create mode 100644 01 - JavaScript Drum Kit/index-WORKING.html

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index e8024d5691..a8e38c33b2 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,28 +58,7 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script type="text/javascript">
-  // Element/Event Handling setup
-  window.addEventListener('keydown', playAudio);
-
-  const keys = document.querySelectorAll('.key');
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
-
-  // The Functional Workhorses (or maybe Less Than 10 Lines = Workponies?)
-  function playAudio(e) {
-    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
-
-    if (!audio) return; // Early no-op if keydown key does not match an <audio> element
-
-    audio.currentTime = 0; // Put your thing down, flip it and reverse it (restart audio clip each appropriate keydown event)
-    audio.play();
-    key.classList.add('playing');
-  }
-
-  function removeTransition(e) {
-    if (e.propertyName !== 'transform') return; // Early no-op so we only trigger during the CSS scale transformation between standard '.key' and '.key, .playing'
-    this.classList.remove('playing');
-  }
+  
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/index-WORKING.html b/01 - JavaScript Drum Kit/index-WORKING.html
new file mode 100644
index 0000000000..e8024d5691
--- /dev/null
+++ b/01 - JavaScript Drum Kit/index-WORKING.html	
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS Drum Kit</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+
+  <div class="keys">
+    <div data-key="65" class="key">
+      <kbd>A</kbd>
+      <span class="sound">clap</span>
+    </div>
+    <div data-key="83" class="key">
+      <kbd>S</kbd>
+      <span class="sound">hihat</span>
+    </div>
+    <div data-key="68" class="key">
+      <kbd>D</kbd>
+      <span class="sound">kick</span>
+    </div>
+    <div data-key="70" class="key">
+      <kbd>F</kbd>
+      <span class="sound">openhat</span>
+    </div>
+    <div data-key="71" class="key">
+      <kbd>G</kbd>
+      <span class="sound">boom</span>
+    </div>
+    <div data-key="72" class="key">
+      <kbd>H</kbd>
+      <span class="sound">ride</span>
+    </div>
+    <div data-key="74" class="key">
+      <kbd>J</kbd>
+      <span class="sound">snare</span>
+    </div>
+    <div data-key="75" class="key">
+      <kbd>K</kbd>
+      <span class="sound">tom</span>
+    </div>
+    <div data-key="76" class="key">
+      <kbd>L</kbd>
+      <span class="sound">tink</span>
+    </div>
+  </div>
+
+  <audio data-key="65" src="sounds/clap.wav"></audio>
+  <audio data-key="83" src="sounds/hihat.wav"></audio>
+  <audio data-key="68" src="sounds/kick.wav"></audio>
+  <audio data-key="70" src="sounds/openhat.wav"></audio>
+  <audio data-key="71" src="sounds/boom.wav"></audio>
+  <audio data-key="72" src="sounds/ride.wav"></audio>
+  <audio data-key="74" src="sounds/snare.wav"></audio>
+  <audio data-key="75" src="sounds/tom.wav"></audio>
+  <audio data-key="76" src="sounds/tink.wav"></audio>
+
+<script type="text/javascript">
+  // Element/Event Handling setup
+  window.addEventListener('keydown', playAudio);
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+  // The Functional Workhorses (or maybe Less Than 10 Lines = Workponies?)
+  function playAudio(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+
+    if (!audio) return; // Early no-op if keydown key does not match an <audio> element
+
+    audio.currentTime = 0; // Put your thing down, flip it and reverse it (restart audio clip each appropriate keydown event)
+    audio.play();
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return; // Early no-op so we only trigger during the CSS scale transformation between standard '.key' and '.key, .playing'
+    this.classList.remove('playing');
+  }
+</script>
+
+
+</body>
+</html>

From 54acd67c1ceca5efff27431df04714255bec400d Mon Sep 17 00:00:00 2001
From: Zane Mattingly <z@matting.ly>
Date: Tue, 6 Nov 2018 00:05:50 -0800
Subject: [PATCH 5/7] :sparkles: JS + CSS Clock complete with transition toggle
 to prevent visible hiccup on 0 time values

---
 02 - JS and CSS Clock/index-WORKING.html | 115 +++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 02 - JS and CSS Clock/index-WORKING.html

diff --git a/02 - JS and CSS Clock/index-WORKING.html b/02 - JS and CSS Clock/index-WORKING.html
new file mode 100644
index 0000000000..473393a759
--- /dev/null
+++ b/02 - JS and CSS Clock/index-WORKING.html	
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS + CSS Clock</title>
+</head>
+<body>
+
+
+    <div class="clock">
+      <div class="clock-face">
+        <div class="hand hour-hand"></div>
+        <div class="hand min-hand"></div>
+        <div class="hand second-hand"></div>
+      </div>
+    </div>
+
+
+  <style>
+    html {
+      background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+      background-size: cover;
+      font-family: 'helvetica neue';
+      text-align: center;
+      font-size: 10px;
+    }
+
+    body {
+      margin: 0;
+      font-size: 2rem;
+      display: flex;
+      flex: 1;
+      min-height: 100vh;
+      align-items: center;
+    }
+
+    .clock {
+      width: 30rem;
+      height: 30rem;
+      border: 20px solid white;
+      border-radius: 50%;
+      margin: 50px auto;
+      position: relative;
+      padding: 2rem;
+      box-shadow:
+        0 0 0 4px rgba(0,0,0,0.1),
+        inset 0 0 0 3px #EFEFEF,
+        inset 0 0 10px black,
+        0 0 10px rgba(0,0,0,0.2);
+    }
+
+    .clock-face {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transform: translateY(-3px); /* account for the height of the clock hands */
+    }
+
+    .hand {
+      width: 50%;
+      height: 6px;
+      background: black;
+      position: absolute;
+      top: 50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.07, 2.63, 0.58, 1);
+    }
+
+  </style>
+
+
+  <script>
+    const secondHand = document.querySelector('.second-hand');
+    const minuteHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
+
+    let secondsDegrees, minutesDegrees, hoursDegrees;
+
+    let setDate = function() {
+      const now = new Date();
+
+      // Note: When calculating degrees, we account for the 90deg offset all hands start styled with
+
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+      if (seconds === 0) toggleTransition(secondHand, 1000);
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      const minutes = now.getMinutes();
+      const minutesDegrees = ((minutes / 60) * 360) + 90;
+      if (minutes === 0) toggleTransition(minuteHand, 1000 * 60);
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+      const hours = now.getHours();
+      const hoursDegrees = ((hours / 12) * 360) + 90;
+      if (hours === 0) toggleTransition(hourHand, 1000 * 60 * 60);
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+
+      console.log(`${hours}:${minutes}:${seconds}`);
+    };
+
+    let toggleTransition = function(element, delay) {
+      // This is triggered if the time division in question is Zero and it will temporarily remove
+      // the relevant HTML element's 'transition' style to prevent the rotation transformation from
+      // rotating backwards and causing a visible hiccup
+      element.style.transition = 'none';
+      setTimeout(() => element.style.transition = 'all 0.05s', delay);
+    };
+
+    setInterval(setDate, 1000);
+  </script>
+</body>
+</html>

From 5547b44952919420c02fa6312c0aea4824bfad54 Mon Sep 17 00:00:00 2001
From: Zane Mattingly <z@matting.ly>
Date: Sun, 11 Nov 2018 21:59:27 -0800
Subject: [PATCH 6/7] :sparkles: 03 - CSS Variables: complete.

---
 03 - CSS Variables/index-WORKING.html | 75 +++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 03 - CSS Variables/index-WORKING.html

diff --git a/03 - CSS Variables/index-WORKING.html b/03 - CSS Variables/index-WORKING.html
new file mode 100644
index 0000000000..6d9f9dae31
--- /dev/null
+++ b/03 - CSS Variables/index-WORKING.html	
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Scoped CSS Variables and JS</title>
+</head>
+<body>
+  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
+
+  <div class="controls">
+    <label for="spacing">Spacing:</label>
+    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+
+    <label for="blur">Blur:</label>
+    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+
+    <label for="base">Base Color</label>
+    <input id="base" type="color" name="base" value="#ffc600">
+  </div>
+
+  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+
+  <style>
+    :root {
+      --base: yellow;
+      --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
+    */
+
+    body {
+      text-align: center;
+      background: #193549;
+      color: white;
+      font-family: 'helvetica neue', sans-serif;
+      font-weight: 100;
+      font-size: 50px;
+    }
+
+    .controls {
+      margin-bottom: 50px;
+    }
+
+    input {
+      width: 100px;
+    }
+  </style>
+
+  <script>
+    const inputs = document.querySelectorAll('.controls input');
+
+    function handleChange() {
+      const suffix = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleChange));
+    inputs.forEach(input => input.addEventListener('mousemove', handleChange));
+  </script>
+
+</body>
+</html>

From 24a011487018d580e511238c896389b0d5c07b76 Mon Sep 17 00:00:00 2001
From: Zane Mattingly <z@matting.ly>
Date: Sun, 11 Nov 2018 23:03:07 -0800
Subject: [PATCH 7/7] :sparkles: 04 - Array Cardio Day 1: complete.

---
 04 - Array Cardio Day 1/index-WORKING.html | 112 +++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 04 - Array Cardio Day 1/index-WORKING.html

diff --git a/04 - Array Cardio Day 1/index-WORKING.html b/04 - Array Cardio Day 1/index-WORKING.html
new file mode 100644
index 0000000000..092ff5510b
--- /dev/null
+++ b/04 - Array Cardio Day 1/index-WORKING.html	
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Array Cardio 💪</title>
+</head>
+<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
+
+    // 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 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
+    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
+    console.table(fifteen);
+
+    // Array.prototype.map()
+    // 2. Give us an array of the inventors' first and last names
+    const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`)
+      .sort((nameA, nameB) => {
+        // Simple alphabetical sort function
+        if (nameA > nameB) {
+          return 1;
+        } else if (nameA < nameB) {
+          return -1;
+        } else {
+          return 0;
+        }
+      });
+    console.table(fullNames);
+
+    // Array.prototype.sort()
+    // 3. Sort the inventors by birthdate, oldest to youngest
+    const orderedByBirth = inventors.sort((inventorA, inventorB) => inventorA.year - inventorB.year);
+    console.table(orderedByBirth);
+
+    // Array.prototype.reduce()
+    // 4. How many years did all the inventors live?
+    const totalYears = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0);
+    console.log(totalYears);
+
+    // 5. Sort the inventors by years lived
+    const orderedByAge = inventors.map(inventor => {
+        newInventor = JSON.parse(JSON.stringify(inventor)); // Clone inventor object to leave original object reference unmodified
+        newInventor.age = newInventor.passed - newInventor.year; // Add .age property
+        return newInventor;
+      })
+      .sort((inventorA, inventorB) => inventorA.age - inventorB.age); // Sort by new .age property
+    console.table(orderedByAge);
+
+    // 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(text => text.includes('de'));
+
+    // 7. sort Exercise
+    // Sort the people alphabetically by last name
+    const peopleOrderedByLastName = people.sort((personA, personB) => {
+      const aLastName = personA.split(', ')[0];
+      const bLastName = personB.split(', ')[0];
+
+      if (aLastName > bLastName) {
+        return 1;
+      } else if (aLastName < bLastName) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
+    console.log(peopleOrderedByLastName);
+
+    // 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 transporation = data.reduce((obj, item) => {
+      if (!obj[item]) {
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj;
+    }, {});
+    console.table(transporation);
+
+  </script>
+</body>
+</html>