Skip to content

Commit 805e821

Browse files
dianafisherdianafisher
committed
Implement simple drum kit
1 parent 38a754c commit 805e821

3 files changed

Lines changed: 136 additions & 14 deletions

File tree

‎01 - JavaScript Drum Kit/.jshintrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "esnext": true }

‎01 - JavaScript Drum Kit/index-org.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
11+
<div class="keys">
12+
<div data-key="65" class="key">
13+
<kbd>A</kbd>
14+
<span class="sound">clap</span>
15+
</div>
16+
<div data-key="83" class="key">
17+
<kbd>S</kbd>
18+
<span class="sound">hihat</span>
19+
</div>
20+
<div data-key="68" class="key">
21+
<kbd>D</kbd>
22+
<span class="sound">kick</span>
23+
</div>
24+
<div data-key="70" class="key">
25+
<kbd>F</kbd>
26+
<span class="sound">openhat</span>
27+
</div>
28+
<div data-key="71" class="key">
29+
<kbd>G</kbd>
30+
<span class="sound">boom</span>
31+
</div>
32+
<div data-key="72" class="key">
33+
<kbd>H</kbd>
34+
<span class="sound">ride</span>
35+
</div>
36+
<div data-key="74" class="key">
37+
<kbd>J</kbd>
38+
<span class="sound">snare</span>
39+
</div>
40+
<div data-key="75" class="key">
41+
<kbd>K</kbd>
42+
<span class="sound">tom</span>
43+
</div>
44+
<div data-key="76" class="key">
45+
<kbd>L</kbd>
46+
<span class="sound">tink</span>
47+
</div>
48+
</div>
49+
50+
<audio data-key="65" src="sounds/clap.wav"></audio>
51+
<audio data-key="83" src="sounds/hihat.wav"></audio>
52+
<audio data-key="68" src="sounds/kick.wav"></audio>
53+
<audio data-key="70" src="sounds/openhat.wav"></audio>
54+
<audio data-key="71" src="sounds/boom.wav"></audio>
55+
<audio data-key="72" src="sounds/ride.wav"></audio>
56+
<audio data-key="74" src="sounds/snare.wav"></audio>
57+
<audio data-key="75" src="sounds/tom.wav"></audio>
58+
<audio data-key="76" src="sounds/tink.wav"></audio>
59+
60+
<script>
61+
62+
63+
function playSound(e) {
64+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
65+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
66+
if (!audio) return; // stop the function from running all together
67+
audio.currentTime = 0; // rewind to the start
68+
audio.play();
69+
key.classList.add('playing');
70+
}
71+
function removeTransition(e) {
72+
if (e.propertyName !== 'transform') return; // skip it if it's not a transform
73+
this.classList.remove('playing');
74+
}
75+
76+
const keys = document.querySelectorAll('.key');
77+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
78+
window.addEventListener('keydown', playSound);
79+
80+
</script>
81+
82+
</body>
83+
</html>

‎01 - JavaScript Drum Kit/index.html‎

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -59,25 +59,63 @@
5959

6060
<script>
6161

62+
function playSound(e) {
63+
console.log(e.keyCode);
6264

63-
function playSound(e) {
64-
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
65-
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
66-
if (!audio) return; // stop the function from running all together
67-
audio.currentTime = 0; // rewind to the start
68-
audio.play();
69-
key.classList.add('playing');
70-
}
71-
function removeTransition(e) {
72-
if (e.propertyName !== 'transform') return; // skip it if it's not a transform
73-
this.classList.remove('playing');
65+
// Simple string substitution
66+
var name = "Brendan";
67+
console.log(`Yo, ${name}!`);
68+
69+
// => "Yo, Brendan!"
70+
71+
var a = 65;
72+
var b = 83;
73+
console.log(`Hello ${a} world ${b}`);
74+
75+
var user = {name: 'Mickey Mouse'};
76+
console.log(user.name.toUpperCase());
77+
console.log(`Thanks, ${user.name.toUpperCase()}.`);
78+
// Look for a match for this keyCode.
79+
// Use an attribute selector: []
80+
// Uses ES6 template strings: ${}
81+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
82+
console.log(audio);
83+
84+
// Get the key element out of the DOM.
85+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
86+
console.log(key);
87+
88+
if (!audio) {
89+
console.log("no audio found for keyCode");
90+
return; // stop function from running.
7491
}
92+
93+
// reset audio to start
94+
audio.currentTime = 0;
95+
audio.play();
96+
97+
// Add the 'playing' class to the key element.
98+
key.classList.add('playing');
99+
}
100+
101+
function removeTransition(e) {
102+
if (e.propertyName != 'transform') return; // skip if it is not a transform.
103+
console.log(e.propertyName);
104+
console.log(this);
105+
// Remove the 'playing' class from the key (which is what this is equal to)
106+
this.classList.remove('playing');
107+
}
108+
109+
// Use a transition end event to detect when the animation stops.
110+
const keys = document.querySelectorAll('.key');
111+
// Arrow function... =>
112+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
113+
114+
window.addEventListener('keydown', playSound);
75115

76-
const keys = document.querySelectorAll('.key');
77-
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
78-
window.addEventListener('keydown', playSound);
79116

80117
</script>
81118

119+
82120
</body>
83121
</html>

0 commit comments

Comments
 (0)