From bf6bd01665b2b7d5304bc45a253ea60af20da986 Mon Sep 17 00:00:00 2001
From: Jason Hanggi <jason@tablexi.com>
Date: Tue, 9 Oct 2018 20:02:38 -0500
Subject: [PATCH 1/2] Drum kit lesson 01

At least in current versions of chrome (69) and firefox (62), the keydown event
has a `key` property, so there's no real reason here to use the keycodes.
---
 01 - JavaScript Drum Kit/index-START.html | 57 ++++++++++++++++-------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..a3364bb81e 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -9,56 +9,77 @@
 
 
   <div class="keys">
-    <div data-key="65" class="key">
+    <div data-key="A" class="key">
       <kbd>A</kbd>
       <span class="sound">clap</span>
     </div>
-    <div data-key="83" class="key">
+    <div data-key="S" class="key">
       <kbd>S</kbd>
       <span class="sound">hihat</span>
     </div>
-    <div data-key="68" class="key">
+    <div data-key="D" class="key">
       <kbd>D</kbd>
       <span class="sound">kick</span>
     </div>
-    <div data-key="70" class="key">
+    <div data-key="F" class="key">
       <kbd>F</kbd>
       <span class="sound">openhat</span>
     </div>
-    <div data-key="71" class="key">
+    <div data-key="G" class="key">
       <kbd>G</kbd>
       <span class="sound">boom</span>
     </div>
-    <div data-key="72" class="key">
+    <div data-key="H" class="key">
       <kbd>H</kbd>
       <span class="sound">ride</span>
     </div>
-    <div data-key="74" class="key">
+    <div data-key="J" class="key">
       <kbd>J</kbd>
       <span class="sound">snare</span>
     </div>
-    <div data-key="75" class="key">
+    <div data-key="K" class="key">
       <kbd>K</kbd>
       <span class="sound">tom</span>
     </div>
-    <div data-key="76" class="key">
+    <div data-key="L" 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>
+  <audio data-key="A" src="sounds/clap.wav"></audio>
+  <audio data-key="S" src="sounds/hihat.wav"></audio>
+  <audio data-key="D" src="sounds/kick.wav"></audio>
+  <audio data-key="F" src="sounds/openhat.wav"></audio>
+  <audio data-key="G" src="sounds/boom.wav"></audio>
+  <audio data-key="H" src="sounds/ride.wav"></audio>
+  <audio data-key="J" src="sounds/snare.wav"></audio>
+  <audio data-key="K" src="sounds/tom.wav"></audio>
+  <audio data-key="L" src="sounds/tink.wav"></audio>
 
 <script>
 
+  function playSound(key) {
+    const audio = document.querySelector(`audio[data-key=${key.toUpperCase()}]`)
+    const keyElem = document.querySelector(`.key[data-key=${key.toUpperCase()}]`)
+
+    if (audio) {
+      audio.currentTime = 0
+      audio.play()
+      keyElem.classList.add("playing")
+    }
+  }
+
+  function removeTransition(event) {
+    if (event.propertyName == "transform") {
+      this.classList.remove("playing")
+    }
+  }
+
+  const keys = document.querySelectorAll(".key")
+  keys.forEach(key => key.addEventListener("transitionend", removeTransition))
+
+  window.addEventListener("keydown", (e) => playSound(e.key))
 </script>
 
 

From 9bda22300e811c5c6af1b054d59795cd4cbf5cb9 Mon Sep 17 00:00:00 2001
From: Jason Hanggi <jason@tablexi.com>
Date: Tue, 9 Oct 2018 20:28:35 -0500
Subject: [PATCH 2/2] [02] Clock

Has a weird jump when the hand reaches the 0 and it transitions all the way around backwards.
This is noted in the video.
---
 02 - JS and CSS Clock/index-START.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 7cbf5f6ba6..e1e33a9b42 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -62,12 +62,31 @@
       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);
     }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector(".second-hand")
+    const minuteHand = document.querySelector(".min-hand")
+    const hourHand = document.querySelector(".hour-hand")
 
+    function setRotation(hand, minuteOrSecond, dividend = 60) {
+      const degrees = minuteOrSecond / dividend * 360 + 90
+      hand.style.transform = `rotate(${degrees}deg)`
+    }
+    setInterval(() => {
+      const date = new Date()
+      setRotation(secondHand, date.getSeconds())
+      setRotation(minuteHand, date.getMinutes())
+       // 8 is 240deg and 20 is 600deg, which are equivalent, so no need to worry
+       // that <8pm>.getHours() returns 20.
+      setRotation(hourHand, date.getHours(), 12)
+    }, 1000)
 
   </script>
 </body>