From 97f637703c050a9c9a0ffaa6b34ba25e673c57c4 Mon Sep 17 00:00:00 2001 From: Tracy Holmes Date: Sun, 11 Dec 2016 19:01:08 -0600 Subject: [PATCH 1/3] done. --- 01 - JavaScript Drum Kit/index-START.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..da9d8fdc21 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,24 @@ From 51f46bc7c4589060bcdf499173379b726d401106 Mon Sep 17 00:00:00 2001 From: Tracy Holmes Date: Sun, 11 Dec 2016 19:02:20 -0600 Subject: [PATCH 2/3] cleaned up code --- 01 - JavaScript Drum Kit/index-START.html | 138 +++++++++++----------- 1 file changed, 69 insertions(+), 69 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index da9d8fdc21..25f0de45d9 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,84 +1,84 @@ + - - JS Drum Kit - + + JS Drum Kit + + -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - + function removeTransition(e) { + if (e.propertyName !== 'transform') return; // skip it if it's not a transform + this.classList.remove('playing'); + } + const keys = document.querySelectorAll('.key'); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + window.addEventListener('keydown', playSound); + + From 4724c7055fac06a9b027a1fe1e4e13384804297c Mon Sep 17 00:00:00 2001 From: Tracy Holmes Date: Mon, 12 Dec 2016 22:05:17 -0600 Subject: [PATCH 3/3] done. this was fun! --- 02 - JS + CSS Clock/index-START.html | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..53f7895ebf 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,35 @@ 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); } -