From 12a3ee60689a95973f82767b3303a75340f0f573 Mon Sep 17 00:00:00 2001
From: tommysander <tsander@sungevity.com>
Date: Sat, 17 Dec 2016 22:46:47 -0800
Subject: [PATCH 1/4] Completed exercise 1

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

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

From 55cf245da99995b27df98af26e9d98673b68a7e1 Mon Sep 17 00:00:00 2001
From: tksander <tkepasander@gmail.com>
Date: Sun, 18 Dec 2016 20:42:12 -0800
Subject: [PATCH 2/4] Completed exercise 2

---
 02 - JS + CSS Clock/index-START.html | 30 ++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..b27d418da3 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,38 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.5s
+      transition-timing-function: cubic-bezier(1, 2.99, 0.58, 1);
+
     }
 
   </style>
-
   <script>
-
+    setInterval(tick, 1000)
+    function tick() {
+      const date = new Date();
+      const seconds = date.getSeconds();
+      secTick(date.getSeconds())
+      minuteTick(date.getMinutes())
+      hourTick(date.getHours())
+    }
+    function secTick(sec) {
+      const secondsDegrees = sec * 6;
+      const handSec = document.querySelector('.hand.second-hand');
+      handSec.style.transform = `rotate(${secondsDegrees}deg)`;
+    }
+    function minuteTick(min) {
+      const minDegrees = min * 6;
+      const handMin = document.querySelector('.hand.min-hand');
+      handMin.style.transform = `rotate(${minDegrees}deg)`;
+    }
+    function hourTick(hour) {
+      const hourDegrees = hour * 30;
+      const handHour = document.querySelector('.hand.hour-hand');
+      handHour.style.transform = `rotate(${hourDegrees}deg)`;
+    }
 
   </script>
 </body>

From b43559b0b77d7adf3dbea3f5742f5be40445bcda Mon Sep 17 00:00:00 2001
From: tksander <tkepasander@gmail.com>
Date: Fri, 3 Feb 2017 17:02:16 -0800
Subject: [PATCH 3/4] Completed CSS Variables

---
 02 - JS + CSS Clock/index-START.html | 25 -----------------------
 03 - CSS Variables/index-START.html  | 30 +++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index b27d418da3..fa48534e39 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -65,35 +65,10 @@
       transform: rotate(90deg);
       transition: all 0.5s
       transition-timing-function: cubic-bezier(1, 2.99, 0.58, 1);
-
     }
 
   </style>
   <script>
-    setInterval(tick, 1000)
-    function tick() {
-      const date = new Date();
-      const seconds = date.getSeconds();
-      secTick(date.getSeconds())
-      minuteTick(date.getMinutes())
-      hourTick(date.getHours())
-    }
-    function secTick(sec) {
-      const secondsDegrees = sec * 6;
-      const handSec = document.querySelector('.hand.second-hand');
-      handSec.style.transform = `rotate(${secondsDegrees}deg)`;
-    }
-    function minuteTick(min) {
-      const minDegrees = min * 6;
-      const handMin = document.querySelector('.hand.min-hand');
-      handMin.style.transform = `rotate(${minDegrees}deg)`;
-    }
-    function hourTick(hour) {
-      const hourDegrees = hour * 30;
-      const handHour = document.querySelector('.hand.hour-hand');
-      handHour.style.transform = `rotate(${hourDegrees}deg)`;
-    }
-
   </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..1fe80dd743 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -27,7 +27,9 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     */
 
     body {
-      text-align: center;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
     }
 
     body {
@@ -45,9 +47,35 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width:100px;
     }
+
+    :root {
+        --base: #ffc600;
+        --blur: 10px;
+        --padding: 10px;
+    }
+
+    img {
+      background: var(--base);
+      filter: blur(var(--blur));
+      padding: var(--spacing);
+    }
+
+    .hl {
+      color: var(--base);
+    }
   </style>
 
   <script>
+    var inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+    debugger
+      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 7bf40255a346943be6336c514491fe5985be578e Mon Sep 17 00:00:00 2001
From: tksander <tkepasander@gmail.com>
Date: Sat, 4 Feb 2017 13:48:26 -0800
Subject: [PATCH 4/4] Completed Flex Panel Gallery

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

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..3819fd4112 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -17,16 +17,22 @@
     body {
       margin: 0;
     }
+
     *, *:before, *:after {
       box-sizing: inherit;
     }
 
     .panels {
+      display: flex;
+      flex-direction: row;
       min-height:100vh;
       overflow: hidden;
     }
 
     .panel {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
@@ -54,8 +60,17 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      display: flex;
+      flex: 1 0 auto;
+      justify-content: center;
+      align-items: 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 {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -67,6 +82,7 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -107,6 +123,20 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
+
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen))
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive))
+
+    function toggleOpen() {
+      this.classList.toggle('open')
+    }
+
+    function toggleActive(e) {
+      if (e.propertyName.includes('flex')) {
+        this.classList.toggle('open-active')
+      }
+    }
 
   </script>