From 4ca83fded542a344d6ffb314aaab39fc38091529 Mon Sep 17 00:00:00 2001
From: Jenell Pizarro <nellarro@gmail.com>
Date: Fri, 9 Dec 2016 15:58:12 -0500
Subject: [PATCH 1/8] query selector bit that logs keyCodes

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..20e5c781ee 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,10 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+  window.addEventListener('keydown', function(event){
+    const audio= document.querySelector(`audio[data-key]=${event.keyCode}`)
+    console.log(audio)
+  })
 </script>
 
 

From 0b6f28607f27025b3c057dd08c06c6edd6ce5434 Mon Sep 17 00:00:00 2001
From: Jenell Pizarro <nellarro@gmail.com>
Date: Fri, 9 Dec 2016 17:37:03 -0500
Subject: [PATCH 2/8] I had forgotten how much I love document.qsa

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 20e5c781ee..f6f42f4a23 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,9 +59,17 @@
 
 <script>
   window.addEventListener('keydown', function(event){
-    const audio= document.querySelector(`audio[data-key]=${event.keyCode}`)
+    const audio= document.querySelector(`audio[data-key="${event.keyCode}"]`)
     console.log(audio)
+    const key= document.querySelector(`.key[data-key="${event.keyCode}"]`)
+    console.log(key)
+    if (!audio) return //exits the function
+    audio.currentTime = 0 // should rewind time so that each sound can be played multiple times
+    audio.play()// method that plays the audio on selected keyCode
+    key.classList.add('playing')
   })
+
+  const keys = document.querySelectorAll('.key')
 </script>
 
 

From a308e9822e3cc7fb47e80d754539ff79d74c272d Mon Sep 17 00:00:00 2001
From: Jenell Pizarro <nellarro@gmail.com>
Date: Sat, 10 Dec 2016 12:50:16 -0500
Subject: [PATCH 3/8] finished 01

---
 01 - JavaScript Drum Kit/index-START.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index f6f42f4a23..6166204248 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,8 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  window.addEventListener('keydown', function(event){
+
+  function playSound(event) {
     const audio= document.querySelector(`audio[data-key="${event.keyCode}"]`)
     console.log(audio)
     const key= document.querySelector(`.key[data-key="${event.keyCode}"]`)
@@ -67,9 +68,18 @@
     audio.currentTime = 0 // should rewind time so that each sound can be played multiple times
     audio.play()// method that plays the audio on selected keyCode
     key.classList.add('playing')
-  })
+  }
+
+  function removeTransition(event) {
+    if(event.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 7e84057fde28f44c34a3d74846fb6a6e727697da Mon Sep 17 00:00:00 2001
From: Jenell Pizarro <nellarro@gmail.com>
Date: Sat, 10 Dec 2016 15:29:04 -0500
Subject: [PATCH 4/8] completed! added some styling to the hands to make them
 more realistic

---
 02 - JS + CSS Clock/index-START.html | 45 ++++++++++++++++++++++++++--
 02 - JS + CSS Clock/index.html       |  1 +
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 240705d8fe..50a68e45a1 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
+  <title>JavaScript Clock</title>
 </head>
 <body>
 
@@ -57,16 +57,55 @@
 
     .hand {
       width:50%;
-      height:6px;
-      background:black;
+      height:3.4px;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function:cubic-bezier(0.8, 0.2, 0.85, 2.35);
+    }
+
+    .second-hand {
+      background: red;
+    }
+
+    .min-hand, .hour-hand {
+      background: black;
+    }
+
+    .hand.hour-hand {
+      width: 45%;
+      height: 5px;
+      margin-left: 14.5px;
     }
 
   </style>
 
   <script>
 
+  const secondHand = document.querySelector('.second-hand')
+
+  const minsHand = document.querySelector('.min-hand')
+
+  const hourHand = document.querySelector('.hour-hand')
+
+  function setDate() {
+    const now = new Date()
+    const seconds = now.getSeconds()// uses Date to get current seconds
+    const secondsDegrees = ((seconds / 60) * 360) + 90
+    secondHand.style.transform =`rotate(${secondsDegrees}deg)`
+
+    const minutes = now.getMinutes()
+    const minsDegrees = ((minutes / 60) * 360) + 90
+    minsHand.style.transform = `rotate(${minsDegrees}deg)`
+
+    const hour = now.getHours()
+    const hourDegrees = ((hour / 12) * 360) + 90
+    hourHand.style.transform = `rotate(${hourDegrees}deg)`
+  }
+
+  setInterval(setDate, 1000)
 
   </script>
 </body>
diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html
index d5c9ec9596..ec12d50d91 100644
--- a/02 - JS + CSS Clock/index.html	
+++ b/02 - JS + CSS Clock/index.html	
@@ -66,6 +66,7 @@
       transition: all 0.05s;
       transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
+    }
 </style>
 
 <script>

From af7dff19985e97785f4963ee3acb964a4a977d97 Mon Sep 17 00:00:00 2001
From: Jenell Pizarro <nellarro@gmail.com>
Date: Sun, 11 Dec 2016 15:03:59 -0500
Subject: [PATCH 5/8] day 3 complete!

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index bf0f33e3ba..05eec7b4dd 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -3,25 +3,27 @@
 <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 type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
 
-    <label for="blur">Blur:</label>
-    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
-    <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
-  </div>
-
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+</head>
 
+<body>
   <style>
+  :root {
+    --base: #ffc602;
+    --spacing: 10px;
+    --blur: 10px;
+  }
+
+  img {
+    padding: var(--spacing);
+    background: var(--base);
+    filter: blur(var(--blur));
+  }
 
+  .h1 {
+    color: var(--base);
+  }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -52,7 +54,34 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     }
   </style>
 
+
+  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
+
+  <div class="controls">
+    <label for="spacing">Spacing:</label>
+    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+
+    <label for="blur">Blur:</label>
+    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+
+    <label for="base">Base Color</label>
+    <input type="color" name="base" value="#ffc600">
+  </div>
+
+  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+
   <script>
+  const inputs = document.querySelectorAll('.controls input')
+
+  function handleUpdate() {
+    const suffix = this.dataset.sizing || ''
+    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
+  }
+
+  inputs.forEach(input => input.addEventListener('change', handleUpdate))
+
+  inputs.forEach(input => input.addEventListener('mousemove', handleUpdate))
+
   </script>
 
 </body>

From e9e38bc740b171963c98c8efdf9dfc1e36b568c4 Mon Sep 17 00:00:00 2001
From: Jenell Pizarro <nellarro@gmail.com>
Date: Tue, 13 Dec 2016 10:47:12 -0500
Subject: [PATCH 6/8] this is super fun! Like code katas!

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 6e28e357d0..4acef69044 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -27,13 +27,28 @@
 
     // 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 inventory first and last names
+    // 2. Give us an array of the inventors first and last names
+
+    // const inventorNames = inventors.map(inventor => inventor.first + ' ' + inventor.last)
+
+    const inventorNames = inventors.map(inventor => ` ${inventor.first} ${inventor.last}`)
+
+    console.log(inventorNames)
+
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
 
+    const birthdate = inventors.sort((firstInventor, secondInventor) => firstInventor.year > secondInventor.year ? 1 : -1)
+
+    console.table(birthdate)
+
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
 

From a316637da4de0cbbdffb5f7920f4b6217bf7da51 Mon Sep 17 00:00:00 2001
From: Jenell Pizarro <nellarro@gmail.com>
Date: Tue, 13 Dec 2016 13:52:46 -0500
Subject: [PATCH 7/8] will be redoing this again. I loved it!

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4acef69044..d8798422e0 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -23,7 +23,7 @@
 
     const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
 
-    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 humans = ['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
@@ -50,21 +50,49 @@
     console.table(birthdate)
 
     // Array.prototype.reduce()
-    // 4. How many years did all the inventors live?
+    // 4. How many years did all the inventors live? Basically a for loop made easy. The way that reduce() works gives you the running total plus another value. If you don't indicate that it starts at index[0] it will start at index[1]
+    const totalLife = inventors.reduce((total, inventor) => { return total + (inventor.passed - inventor.year)} , 0)
 
+    console.log(totalLife)
     // 5. Sort the inventors by years lived
+    const oldest = inventors.sort(function(a,b) {
+      const last = a.passed - a.year
+      const next = b.passed - b.year
+      return last > next ? -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
+    // needs to be done in the console on the site above
 
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
 
+    // you need to practice this exercise sooooooooooo much!
+
+    const peopleNames = humans.sort((lastOne, nextOne) => {
+      const [ last, first]= lastOne.split(', ')
+      const [nextLast, nextFirst] = nextOne.split(', ')
+      return last > nextLast ? 1 : -1
+    })
+
+    console.log(peopleNames)
+
     // 8. Reduce Exercise
     // Sum up the instances of each of these
     const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
 
+    const transportation = data.reduce(function(obj, item) {
+      if (!obj[item]) {
+        obj[item] = 0
+      }
+      obj[item]++
+      return obj
+    }, {})
+
+    console.log(transportation)
   </script>
 </body>
 </html>

From 0baa8cd8988b229e5030e224f507aa2e34ba3706 Mon Sep 17 00:00:00 2001
From: Jenell Pizarro <nellarro@gmail.com>
Date: Thu, 29 Dec 2016 22:20:26 -0500
Subject: [PATCH 8/8] This was fun!

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

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..7f0ace3fe0 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -22,11 +22,17 @@
     }
 
     .panels {
+      display: flex;
       min-height:100vh;
       overflow: hidden;
     }
 
     .panel {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: space-between;
+      align-items: center;
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
@@ -43,6 +49,11 @@
       background-position: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);}
+
 
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
     .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
@@ -68,6 +79,7 @@
 
     .panel.open {
       font-size:40px;
+      flex-grow: 6;
     }
 
     .cta {
@@ -107,8 +119,22 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel')
+
+    function toggleOpen() {
+    this.classList.toggle('open')
+    }
+
+    function toggleActive(event) {
+      console.log(event.propertyName)
+      if(event.propertyName.includes('flex')){
+        this.classList.toggle('open-active')
+      }
+    }
 
-  </script>
+  panels.forEach(panel => panel.addEventListener('click', toggleOpen))
+  panels.forEach(panel => panel.addEventListener('transitionend', toggleActive))
+ </script>