diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..1a90f8e0fa 100644
--- a/01 - JavaScript Drum Kit/index-START.html
+++ b/01 - JavaScript Drum Kit/index-START.html
@@ -1,10 +1,12 @@
+
JS Drum Kit
+
@@ -57,10 +59,29 @@
-
+ function playSound(e) {
+ const key = e.keyCode;
+ const audio = document.querySelector(`audio[data-key="${key}"]`);
+ const keyElement = document.querySelector(`.key[data-key="${key}"]`);
+ if (!audio) return;
+ audio.currentTime = 0; // enables key repeating by rewinding
+ audio.play();
+ keyElement.classList.add(playingClass);
+ };
+
+ const keys = document.querySelectorAll('.key');
+ window.addEventListener('keydown', playSound);
+ keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+
diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
deleted file mode 100644
index 246639f990..0000000000
--- a/01 - JavaScript Drum Kit/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
-
-
-
-
- JS Drum Kit
-
-
-
-
-
-
-
- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
- G
- boom
-
-
- H
- ride
-
-
- J
- snare
-
-
- K
- tom
-
-
- L
- tink
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 3e0a320b37..075578c930 100644
--- a/01 - JavaScript Drum Kit/style.css
+++ b/01 - JavaScript Drum Kit/style.css
@@ -1,6 +1,6 @@
html {
font-size: 10px;
- background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
+ background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
background-size: cover;
}
body,html {
@@ -10,41 +10,41 @@ body,html {
}
.keys {
- display:flex;
- flex:1;
- min-height:100vh;
+ display: flex;
+ flex: 1;
+ min-height: 100vh;
align-items: center;
justify-content: center;
}
.key {
- border:4px solid black;
- border-radius:5px;
- margin:1rem;
+ border: .4rem solid black;
+ border-radius: .5rem;
+ margin: 1rem;
font-size: 1.5rem;
- padding:1rem .5rem;
- transition:all .07s;
- width:100px;
+ padding: 1rem .5rem;
+ transition: all .07s ease;
+ width: 10rem;
text-align: center;
- color:white;
- background:rgba(0,0,0,0.4);
- text-shadow:0 0 5px black;
+ color: white;
+ background: rgba(0,0,0,0.4);
+ text-shadow: 0 0 .5rem black;
}
.playing {
- transform:scale(1.1);
- border-color:#ffc600;
- box-shadow: 0 0 10px #ffc600;
+ transform: scale(1.1);
+ border-color: #ffc600;
+ box-shadow: 0 0 1rem #ffc600;
}
kbd {
display: block;
- font-size: 40px;
+ font-size: 4rem;
}
.sound {
font-size: 1.2rem;
text-transform: uppercase;
- letter-spacing: 1px;
- color:#ffc600;
+ letter-spacing: .1rem;
+ color: #ffc600;
}
diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html
index d4cb3b56a8..ac30c1ef0e 100644
--- a/02 - JS + CSS Clock/index-FINISHED.html
+++ b/02 - JS + CSS Clock/index-FINISHED.html
@@ -81,11 +81,11 @@
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
- const minsDegrees = ((mins / 60) * 360) + 90;
+ const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
- const hourDegrees = ((mins / 12) * 360) + 90;
+ const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..e66026e659 100644
--- a/02 - JS + CSS Clock/index-START.html
+++ b/02 - JS + CSS Clock/index-START.html
@@ -3,21 +3,8 @@
JS + CSS Clock
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+ const hourDegrees = ((minutes / 12) * 360) + 90;
+ hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+ }
+ setInterval(setDate, 1000);
+