From 1a1942f37d3781a9e748649b9382654abfa57679 Mon Sep 17 00:00:00 2001
From: Ian McNally <ianmcnally@users.noreply.github.com>
Date: Tue, 13 Dec 2016 11:19:42 -0500
Subject: [PATCH 1/7] Add solution for lesson 01

---
 01 - JavaScript Drum Kit/index-FINISHED.html | 48 ++++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
index 1a16d0997c..4aa120b359 100644
--- a/01 - JavaScript Drum Kit/index-FINISHED.html	
+++ b/01 - JavaScript Drum Kit/index-FINISHED.html	
@@ -58,24 +58,42 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  function removeTransition(e) {
-    if (e.propertyName !== 'transform') return;
-    e.target.classList.remove('playing');
-  }
+const PLAYING_CLASS = 'playing'
 
-  function playSound(e) {
-    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
-    if (!audio) return;
+const getAudioElementForKeyCode = keyCode =>
+  document.querySelector(`audio[data-key="${keyCode}"`)
 
-    key.classList.add('playing');
-    audio.currentTime = 0;
-    audio.play();
-  }
+const getKeyElementForKeyCode = keyCode =>
+  document.querySelector(`.key[data-key="${keyCode}"`)
 
-  const keys = Array.from(document.querySelectorAll('.key'));
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
-  window.addEventListener('keydown', playSound);
+const removeKeyHighlightOnAnimationEndForElement = element =>
+  element.addEventListener(
+    'transitionend',
+    () => element.classList.remove(PLAYING_CLASS),
+    { once: true }
+  )
+
+const highlightPlayedKey = (keyCode) => {
+  const keyElement = getKeyElementForKeyCode(keyCode)
+  if (!keyElement) return
+  keyElement.classList.add(PLAYING_CLASS)
+  removeKeyHighlightOnAnimationEndForElement(keyElement)
+}
+
+const playSoundForAudioElementByKey = keyCode => {
+  const audioElement = getAudioElementForKeyCode(keyCode)
+  if (!audioElement) return
+  audioElement.currentTime = 0
+  audioElement.play()
+  highlightPlayedKey(keyCode)
+}
+
+const handleKeyDown = (event) => {
+  const { keyCode } = event
+  playSoundForAudioElementByKey(keyCode)
+}
+
+window.addEventListener('keydown', handleKeyDown)
 </script>
 
 

From 05a64d35ec36518388281cfca037933d28dbf688 Mon Sep 17 00:00:00 2001
From: Ian McNally <ianmcnally@users.noreply.github.com>
Date: Tue, 13 Dec 2016 12:20:08 -0500
Subject: [PATCH 2/7] Lesson 02 - complete hands updating

---
 02 - JS + CSS Clock/index-FINISHED.html | 88 ++++++++++++++++++-------
 1 file changed, 63 insertions(+), 25 deletions(-)

diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html
index d4cb3b56a8..f17c46bf53 100644
--- a/02 - JS + CSS Clock/index-FINISHED.html	
+++ b/02 - JS + CSS Clock/index-FINISHED.html	
@@ -18,8 +18,7 @@
 
   <style>
     html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
-      background-size:cover;
+      background-color: #018DED;
       font-family:'helvetica neue';
       text-align: center;
       font-size: 10px;
@@ -61,38 +60,77 @@
       background:black;
       position: absolute;
       top:50%;
-      transform-origin: 100%;
       transform: rotate(90deg);
-      transition: all 0.05s;
-      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+      transform-origin: right;
+      transition-property: transform;
+      transition-duration: 0.05s;
+      transition-timing-function: cubic-bezier(0.42, 0, 0.23, 1.79);
     }
-</style>
 
-<script>
-  const secondHand = document.querySelector('.second-hand');
-  const minsHand = document.querySelector('.min-hand');
-  const hourHand = document.querySelector('.hour-hand');
+  </style>
 
-  function setDate() {
-    const now = new Date();
+  <script>
+    const ONE_MINUTE_IN_SECONDS = 60
+    const MINUTES_PER_HOUR = 60
+    const HOURS_PER_DAY = 12
+    const MAXIMUM_ROTATION_IN_DEGREES = 360
+    const HAND_OFFSET_IN_DEGREES = 90
 
-    const seconds = now.getSeconds();
-    const secondsDegrees = ((seconds / 60) * 360) + 90;
-    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+    const nodes = {
+      hourHand: document.querySelector('.hour-hand'),
+      secondsHand: document.querySelector('.second-hand'),
+      minuteHand: document.querySelector('.min-hand')
+    }
+
+    const secondsToDegrees = seconds => ((seconds / ONE_MINUTE_IN_SECONDS) * MAXIMUM_ROTATION_IN_DEGREES) + HAND_OFFSET_IN_DEGREES
+
+    const minutesToDegrees = minutes => ((minutes / MINUTES_PER_HOUR) * MAXIMUM_ROTATION_IN_DEGREES) + HAND_OFFSET_IN_DEGREES
+
+    const hoursToDegrees = hours => ((hours / HOURS_PER_DAY) * MAXIMUM_ROTATION_IN_DEGREES) + HAND_OFFSET_IN_DEGREES
+
+    const buildRotationForDegrees = degrees => `rotate(${degrees}deg)`
+
+    const rotateElementToDegrees = (element, degrees) => {
+      element.style.transform = buildRotationForDegrees(degrees)
+    }
 
-    const mins = now.getMinutes();
-    const minsDegrees = ((mins / 60) * 360) + 90;
-    minsHand.style.transform = `rotate(${minsDegrees}deg)`;
+    const updateHoursHandToHours = (() => {
+      let currentHour
 
-    const hour = now.getHours();
-    const hourDegrees = ((mins / 12) * 360) + 90;
-    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
-  }
+      return hour => {
+        if (hour === currentHour ) return
 
-  setInterval(setDate, 1000);
+        currentHour = hour
+        const degrees = hoursToDegrees(hour)
+        rotateElementToDegrees(nodes.hourHand, degrees)
+      }
+    })()
 
-  setDate();
+    const updateMinutesHandToMinutes = (() => {
+      let currentMinute
+
+      return minute => {
+        if (minute === currentMinute) return
+
+        currentMinute = minute
+        const degrees = minutesToDegrees(minute)
+        rotateElementToDegrees(nodes.minuteHand, degrees)
+      }
+    })()
+
+    const updateSecondsHandToSeconds = seconds => {
+      const degrees = secondsToDegrees(seconds)
+      rotateElementToDegrees(nodes.secondsHand, degrees)
+    }
+
+    const updateClock = () => {
+      const date = new Date()
+      updateHoursHandToHours(date.getHours())
+      updateMinutesHandToMinutes(date.getMinutes())
+      updateSecondsHandToSeconds(date.getSeconds())
+    }
 
-</script>
+    setInterval(updateClock, 1000)
+  </script>
 </body>
 </html>

From 0c89f4edf423816eb98d9015b21f6ef5b40bfcb5 Mon Sep 17 00:00:00 2001
From: Ian McNally <ianmcnally@users.noreply.github.com>
Date: Tue, 13 Dec 2016 14:08:40 -0500
Subject: [PATCH 3/7] Lesson 03 - use js to update css variables

---
 03 - CSS Variables/index-FINISHED.html | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html
index c3217fc003..8767e43f73 100644
--- a/03 - CSS Variables/index-FINISHED.html	
+++ b/03 - CSS Variables/index-FINISHED.html	
@@ -22,15 +22,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <style>
     :root {
-      --base: #ffc600;
-      --spacing: 10px;
+      --spacing: 20px;
       --blur: 10px;
+      --base: pink;
     }
 
     img {
-      padding: var(--spacing);
-      background: var(--base);
+      background-color: var(--base);
       filter: blur(var(--blur));
+      padding: var(--spacing);
     }
 
     .hl {
@@ -63,17 +63,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
-    const inputs = document.querySelectorAll('.controls input');
+    const updateStyleVariableToValueAndUnit = (variableName, value, unit = '') =>
+      document.documentElement.style.setProperty(`--${variableName}`, `${value}${unit}`)
 
-    function handleUpdate() {
-      const suffix = this.dataset.sizing || '';
-      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    const handleControlChange = () => {
+      const { name, dataset: { sizing }, value } = event.target
+      updateStyleVariableToValueAndUnit(name, value, sizing)
     }
 
-    inputs.forEach(input => input.addEventListener('change', handleUpdate));
-    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+    document.querySelector('.controls').addEventListener('change', handleControlChange)
   </script>
 
-
 </body>
 </html>

From ab8a3704cdd6979461d99248856fe34ff13fd9ff Mon Sep 17 00:00:00 2001
From: Ian McNally <ianmcnally@users.noreply.github.com>
Date: Tue, 13 Dec 2016 14:10:06 -0500
Subject: [PATCH 4/7] tally completed lessons in readme

---
 readme.md | 21 +++++----------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/readme.md b/readme.md
index 5a1eaa18c8..468f59a931 100644
--- a/readme.md
+++ b/readme.md
@@ -1,17 +1,6 @@
-![](https://javascript30.com/images/JS3-social-share.png)
+Javascript30.com challenge.
 
-# JavaScript30
-
-Starter Files + Completed solutions for the JavaScript 30 Day Challenge. 
-
-Grab the course at [https://JavaScript30.com](https://JavaScript30.com)
-
-Text-based guides (unofficial) for the challenges can be found here - [Text Guides](https://github.com/nitishdayal/JavaScript30).
-
-## Pull Requests
-
-These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos. 
-
-The starter files + solutions will be updated if/when the videos are updated. 
-
-Thanks!
+Completed:
+- [x] 01
+- [x] 02
+- [x] 03

From 0b8cf75eaa5996c7bef16d860963c55a9af67aee Mon Sep 17 00:00:00 2001
From: Ian McNally <ianmcnally@users.noreply.github.com>
Date: Tue, 13 Dec 2016 14:10:38 -0500
Subject: [PATCH 5/7] note where solutions are stored in readme

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

diff --git a/readme.md b/readme.md
index 468f59a931..28fd532a3d 100644
--- a/readme.md
+++ b/readme.md
@@ -1,5 +1,7 @@
 Javascript30.com challenge.
 
+All solutions saved as modified index-FINISHED.html
+
 Completed:
 - [x] 01
 - [x] 02

From 6d15b3d9bff3722e168ae9d8ba34c8d963682e11 Mon Sep 17 00:00:00 2001
From: Ian McNally <ianmcnally@users.noreply.github.com>
Date: Tue, 13 Dec 2016 15:30:56 -0500
Subject: [PATCH 6/7] Lesson 04 - complete array exercises

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..8b0ff535c9 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,19 +31,43 @@
 
     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'];
 
+    console.clear()
+
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    console.log(
+      'inventors born in the 1500s',
+      inventors.filter(inventor => inventor.year < 1600 && inventor.year > 1499)
+    )
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    console.log(
+      'inventors first and last names',
+      inventors.map(inventor => `${inventor.first} ${inventor.last}`)
+    )
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    console.log(
+      'inventors sorted oldest to youngest',
+      inventors.sort((inventorA, inventorB) => inventorA.year - inventorB.year)
+    )
+
+    const getLifeSpanOfPerson = ({ passed, year }) => passed - year
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    console.log(
+      'years all the inventors lived',
+      inventors.reduce((accumulator, inventor) => accumulator + getLifeSpanOfPerson(inventor), 0)
+    )
 
     // 5. Sort the inventors by years lived
+    console.log(
+      'inventors by years lived',
+      inventors.sort((a, b) => getLifeSpanOfPerson(b) - getLifeSpanOfPerson(a))
+    )
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
@@ -51,10 +75,25 @@
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const getLastNameOfPerson = person => person.match(/\w+/)[0]
+
+    console.log(
+      'sorted people by last name',
+      people.sort((personA, personB) => getLastNameOfPerson(personA) > getLastNameOfPerson(personB))
+    )
 
     // 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' ];
+    console.log(
+      'instances of words',
+      data.reduce((accumulator, datum) => {
+        accumulator[datum] || (accumulator[datum] = 0)
+        accumulator[datum] += 1
+        return accumulator
+      },
+      {})
+    )
 
   </script>
 </body>

From 4820772f4fef849bf57a7d6fa24306bd579a2b9d Mon Sep 17 00:00:00 2001
From: Ian McNally <ianmcnally@users.noreply.github.com>
Date: Tue, 13 Dec 2016 17:27:27 -0500
Subject: [PATCH 7/7] readme update - finish 4

---
 05 - Flex Panel Gallery/index-FINISHED.html | 63 ++++++++++++---------
 readme.md                                   |  2 +
 2 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html
index 243f8a221d..ad49973a4f 100644
--- a/05 - Flex Panel Gallery/index-FINISHED.html	
+++ b/05 - Flex Panel Gallery/index-FINISHED.html	
@@ -43,33 +43,39 @@
       background-size:cover;
       background-position:center;
       flex: 1;
-      justify-content: center;
       display: flex;
       flex-direction: column;
     }
 
-
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
     .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/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); }
 
-    /* Flex Items */
     .panel > * {
       margin:0;
       width: 100%;
       transition:transform 0.5s;
-      flex: 1 0 auto;
-      display:flex;
-      justify-content: center;
-      align-items: center;
+      flex: 1;
     }
 
-    .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 > *:first-child {
+      transform: translateY(-100%);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+
+    .panel.open-active > *:first-child,
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
+    }
+
+    .panel.open {
+      flex: 5;
+    }
 
     .panel p {
       text-transform: uppercase;
@@ -82,7 +88,6 @@
     }
 
     .panel.open {
-      flex: 5;
       font-size:40px;
     }
 
@@ -123,23 +128,29 @@
   </div>
 
   <script>
-    const panels = document.querySelectorAll('.panel');
-
-    function toggleOpen() {
-      console.log('Hello');
-      this.classList.toggle('open');
+    const toggleOpenOnElement = el => el.classList.toggle('open')
+
+    const toggleActiveWhenElementIsOpen = el =>
+      el.addEventListener(
+        'transitionend',
+        event => {
+          if (event.propertyName.includes('flex'))
+            el.classList.toggle('open-active')
+        }
+      )
+
+    const handlePanelClick = event => {
+      const panelElement = event.currentTarget
+      toggleOpenOnElement(panelElement)
+      toggleActiveWhenElementIsOpen(panelElement)
     }
 
-    function toggleActive(e) {
-      console.log(e.propertyName);
-      if (e.propertyName.includes('flex')) {
-        this.classList.toggle('open-active');
-      }
-    }
-
-    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
-    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+    document.querySelectorAll('.panel').forEach(panel => {
+      panel.addEventListener('click', handlePanelClick)
+    })
   </script>
 
+
+
 </body>
 </html>
diff --git a/readme.md b/readme.md
index 28fd532a3d..15fd8dad6e 100644
--- a/readme.md
+++ b/readme.md
@@ -6,3 +6,5 @@ Completed:
 - [x] 01
 - [x] 02
 - [x] 03
+- [x] 04
+- [x] 05