Visitar URL original
adding day 1 · wesbos/JavaScript30@642e07b · GitHub
Skip to content

Commit 642e07b

Browse files
jaymierosenjaymierosen
committed
adding day 1
1 parent 926841a commit 642e07b

5 files changed

Lines changed: 73 additions & 111 deletions

File tree

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

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,63 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<title>JS Drum Kit</title>
6-
<link rel="stylesheet" href="style.css">
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
77
</head>
88
<body>
99

1010

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

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

60-
<script>
61-
62-
</script>
60+
<script src="main.js"></script>
6361

6462

6563
</body>

‎01 - JavaScript Drum Kit/main.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
window.addEventListener('keydown', function(e){
2+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
3+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
4+
if(!audio) return; // stops the audio from running all together
5+
audio.currentTime = 0; // rewinds to the start
6+
audio.play(); // plays keys over and over again\
7+
// key.classList.toggle('playing');
8+
key.classList.add('playing');
9+
});
10+
11+
const keys = Array.from(document.querySelectorAll('.key'));
12+
// cannot listen for events on an array
13+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
14+
console.log(keys);
15+
16+
function removeTransition(e) {
17+
console.log(e);
18+
if(e.propertyName !== 'transform') {
19+
return; // skip if it's not a transform
20+
}
21+
this.classList.remove('playing');
22+
}

‎JavaScript30-master.zip‎

-1020 KB
Binary file not shown.

‎PULL_REQUEST_TEMPLATE.md‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎readme.md‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

0 commit comments

Comments
 (0)