Skip to content

Commit 31977db

Browse files
benschacbenschac
committed
finishes 01
1 parent 38a754c commit 31977db

File tree

3 files changed

+91
-76
lines changed

3 files changed

+91
-76
lines changed

01 - JavaScript Drum Kit/index-FINISHED.html renamed to 01 - JavaScript Drum Kit/index-files/index-FINISHED.html

File renamed without changes.

01 - JavaScript Drum Kit/index-START.html renamed to 01 - JavaScript Drum Kit/index-files/index.html

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,25 @@
5959

6060
<script>
6161

62-
</script>
6362

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>
6481

6582
</body>
6683
</html>

‎01 - JavaScript Drum Kit/index.html‎

Lines changed: 73 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,81 @@
11
<!DOCTYPE html>
22
<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>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
99

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>
10+
<div class="keys">
11+
<div data-key="65" class="key">
12+
<kbd>A</kbd>
13+
<span class="sound">clap</span>
14+
</div>
15+
<div data-key="83" class="key">
16+
<kbd>S</kbd>
17+
<span class="sound">hihat</span>
18+
</div>
19+
<div data-key="68" class="key">
20+
<kbd>D</kbd>
21+
<span class="sound">kick</span>
22+
</div>
23+
<div data-key="70" class="key">
24+
<kbd>F</kbd>
25+
<span class="sound">openhat</span>
26+
</div>
27+
<div data-key="71" class="key">
28+
<kbd>G</kbd>
29+
<span class="sound">boom</span>
30+
</div>
31+
<div data-key="72" class="key">
32+
<kbd>H</kbd>
33+
<span class="sound">ride</span>
34+
</div>
35+
<div data-key="74" class="key">
36+
<kbd>J</kbd>
37+
<span class="sound">snare</span>
38+
</div>
39+
<div data-key="75" class="key">
40+
<kbd>K</kbd>
41+
<span class="sound">tom</span>
42+
</div>
43+
<div data-key="76" class="key">
44+
<kbd>L</kbd>
45+
<span class="sound">tink</span>
46+
</div>
3947
</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-
}
7548

76-
const keys = document.querySelectorAll('.key');
77-
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
78-
window.addEventListener('keydown', playSound);
49+
<audio data-key="65" src="sounds/clap.wav"></audio>
50+
<audio data-key="83" src="sounds/hihat.wav"></audio>
51+
<audio data-key="68" src="sounds/kick.wav"></audio>
52+
<audio data-key="70" src="sounds/openhat.wav"></audio>
53+
<audio data-key="71" src="sounds/boom.wav"></audio>
54+
<audio data-key="72" src="sounds/ride.wav"></audio>
55+
<audio data-key="74" src="sounds/snare.wav"></audio>
56+
<audio data-key="75" src="sounds/tom.wav"></audio>
57+
<audio data-key="76" src="sounds/tink.wav"></audio>
7958

80-
</script>
59+
<script>
60+
window.addEventListener('keydown', playSound);
61+
function playSound(e) {
62+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
63+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
64+
// if there's no keyval.
65+
if (!audio)
66+
return;
8167

82-
</body>
68+
audio.currentTime = 0;
69+
audio.play();
70+
key.classList.add('playing');
71+
}
72+
function removedTransition(e) {
73+
if(e.propertyName !== 'transform') return;
74+
this.classList.remove('playing');
75+
console.log(e);
76+
}
77+
const keys = document.querySelectorAll('.key');
78+
keys.forEach(key => key.addEventListener('transitionend', removedTransition));
79+
</script>
80+
</body>
8381
</html>

0 commit comments

Comments
 (0)