From c2107e363a363287aee8db1f5a0b933dd913e343 Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 13:19:56 -0800
Subject: [PATCH 1/7] Console.log keyCodes pressed

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..376a809b63 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,9 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+  window.addEventListener('keydown', function(e) {
+    console.log(e.keyCode)
+  });
 </script>
 
 

From 5fd7d94353b6ba2a87c3c48b8fac8dde0c6bf60f Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 13:29:32 -0800
Subject: [PATCH 2/7] Get audio to play for corresp keyCode

---
 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 376a809b63..1a971f9811 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,7 +59,10 @@
 
 <script>
   window.addEventListener('keydown', function(e) {
-    console.log(e.keyCode)
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    console.log(audio)
+    if(!audio) return; //stop function all together
+    audio.play();
   });
 </script>
 

From 56771adee2202015f0da1234f64d6bcf3ca8d4f8 Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 13:35:31 -0800
Subject: [PATCH 3/7] Play keystroke audio in quick succession

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 1a971f9811..65fbf22957 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -62,7 +62,10 @@
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     console.log(audio)
     if(!audio) return; //stop function all together
+    // note if call .play on audio element already playing, it won't play again. so if press "F" in successsion it will only play every 5 sec
+    audio.currentTime = 0; //rewind to the start, so that it can be played many times quickly
     audio.play();
+
   });
 </script>
 

From cae28972f8659f86c7871878d61289aa663a77d2 Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 14:47:23 -0800
Subject: [PATCH 4/7] Add and remove playing class when key pressed with
 transition

---
 01 - JavaScript Drum Kit/index-START.html | 15 +++++++++++++--
 01 - JavaScript Drum Kit/style.css        |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 65fbf22957..fc69be9465 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -60,13 +60,24 @@
 <script>
   window.addEventListener('keydown', function(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-    console.log(audio)
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
     if(!audio) return; //stop function all together
     // note if call .play on audio element already playing, it won't play again. so if press "F" in successsion it will only play every 5 sec
     audio.currentTime = 0; //rewind to the start, so that it can be played many times quickly
     audio.play();
-
+    // CSS: transition:all .07s;
+    //.playing adds transform:scale(1.1);
+    key.classList.add('playing');
   });
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return; // skip it if its not a transform
+    // here this = key div
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 3e0a320b37..279381403c 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -23,7 +23,7 @@ body,html {
   margin:1rem;
   font-size: 1.5rem;
   padding:1rem .5rem;
-  transition:all .07s;
+  transition:all .1s;
   width:100px;
   text-align: center;
   color:white;

From 7842712d19b4d296caa097c7f37bcd9200f52db1 Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 15:33:57 -0800
Subject: [PATCH 5/7] Modularize playSound function

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index fc69be9465..a8832782b1 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,7 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  window.addEventListener('keydown', function(e) {
+  function playSound(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
     if(!audio) return; //stop function all together
@@ -68,7 +68,7 @@
     // CSS: transition:all .07s;
     //.playing adds transform:scale(1.1);
     key.classList.add('playing');
-  });
+  }
 
   function removeTransition(e) {
     if (e.propertyName !== 'transform') return; // skip it if its not a transform
@@ -78,6 +78,7 @@
 
   const keys = document.querySelectorAll('.key');
   keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  window.addEventListener('keydown', playSound);
 </script>
 
 

From db95a875b94baca3df67240a15b219dcc9b0796e Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Sun, 11 Dec 2016 15:56:36 -0800
Subject: [PATCH 6/7] Add hand css animation effects

---
 02 - JS + CSS Clock/index-START.html | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..0b778fd4b8 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -11,7 +11,8 @@
       <div class="clock-face">
         <div class="hand hour-hand"></div>
         <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
+        <div class="hand second-hand" style="
+        transform: rotate(-50deg);"></div>
       </div>
     </div>
 
@@ -61,13 +62,20 @@
       background:black;
       position: absolute;
       top:50%;
+      /*puts pivot point on very right hand side*/
+      /*transform-origin: 100%;*/
+      /*sets default 12 o'clock position*/
+      /*transform: rotate(90deg);*/
+      /*transition: all 0.5s;*/
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
 
   <script>
-
-
   </script>
 </body>
 </html>

From 8cd9f4efdb23bfc834ee2a0d2b954520434e3346 Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Sun, 11 Dec 2016 16:22:12 -0800
Subject: [PATCH 7/7] Add js script for animating clock hands

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

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 0b778fd4b8..567540290c 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -11,8 +11,7 @@
       <div class="clock-face">
         <div class="hand hour-hand"></div>
         <div class="hand min-hand"></div>
-        <div class="hand second-hand" style="
-        transform: rotate(-50deg);"></div>
+        <div class="hand second-hand"></div>
       </div>
     </div>
 
@@ -76,6 +75,27 @@
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const hourHand = document.querySelector('.hour-hand');
+    const minuteHand = document.querySelector('.min-hand');
+
+    function setDate() {
+      const now = new Date();
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      const mins = now.getMinutes();
+      const minsDegrees = ((mins / 60) * 360) + 90;
+      minuteHand.style.transform = `rotate(${minsDegrees}deg)`
+
+      const hour = now.getHours();
+      const hourDegrees = ((hour / 12) * 360) + 90;
+      hourHand.style.transform = `rotate(${hourDegrees}deg)`
+      console.log(seconds);
+    }
+
+    setInterval(setDate, 1000);
   </script>
 </body>
 </html>