Skip to content

Commit 9ebc586

Browse files
jfalcojfalco
committed
01 Drum Kit COMPLETE
1 parent 7068292 commit 9ebc586

5 files changed

Lines changed: 115 additions & 98 deletions

File tree

‎01 - JavaScript Drum Kit/img/bg.jpg‎

853 KB
Loading

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

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

‎01 - JavaScript Drum Kit/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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+
<div class="keys">
10+
<div data-key="65" class="key">
11+
<kbd>A</kbd>
12+
<span class="sound">clap</span>
13+
</div>
14+
<div data-key="83" class="key">
15+
<kbd>S</kbd>
16+
<span class="sound">hihat</span>
17+
</div>
18+
<div data-key="68" class="key">
19+
<kbd>D</kbd>
20+
<span class="sound">kick</span>
21+
</div>
22+
<div data-key="70" class="key">
23+
<kbd>F</kbd>
24+
<span class="sound">openhat</span>
25+
</div>
26+
<div data-key="71" class="key">
27+
<kbd>G</kbd>
28+
<span class="sound">boom</span>
29+
</div>
30+
<div data-key="72" class="key">
31+
<kbd>H</kbd>
32+
<span class="sound">ride</span>
33+
</div>
34+
<div data-key="74" class="key">
35+
<kbd>J</kbd>
36+
<span class="sound">snare</span>
37+
</div>
38+
<div data-key="75" class="key">
39+
<kbd>K</kbd>
40+
<span class="sound">tom</span>
41+
</div>
42+
<div data-key="76" class="key">
43+
<kbd>L</kbd>
44+
<span class="sound">tink</span>
45+
</div>
46+
</div>
47+
48+
<audio data-key="65" src="sounds/clap.wav"></audio>
49+
<audio data-key="83" src="sounds/hihat.wav"></audio>
50+
<audio data-key="68" src="sounds/kick.wav"></audio>
51+
<audio data-key="70" src="sounds/openhat.wav"></audio>
52+
<audio data-key="71" src="sounds/boom.wav"></audio>
53+
<audio data-key="72" src="sounds/ride.wav"></audio>
54+
<audio data-key="74" src="sounds/snare.wav"></audio>
55+
<audio data-key="75" src="sounds/tom.wav"></audio>
56+
<audio data-key="76" src="sounds/tink.wav"></audio>
57+
58+
<script src="./js/drum.js"></script>
59+
</body>
60+
</html>

‎01 - JavaScript Drum Kit/js/drum.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function playSound(e) {
2+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
3+
if (!audio) return;
4+
audio.currentTime = 0;
5+
audio.play();
6+
showStyle(e);
7+
}
8+
9+
function showStyle(e) {
10+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
11+
key.classList.add("playing");
12+
}
13+
14+
function removeTransition(e) {
15+
if (e.propertyName != "transform") return;
16+
this.classList.remove("playing");
17+
}
18+
19+
const keys = document.querySelectorAll(".key");
20+
21+
keys.forEach(key => key.addEventListener("transitionend", removeTransition));
22+
window.addEventListener("keydown", playSound);

‎01 - JavaScript Drum Kit/style.css‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,52 @@
11
html {
2-
font-size: 10px;
3-
background: url(https://i.imgur.com/b9r5sEL.jpg) bottom center;
4-
background-size: cover;
2+
font-size: 10px;
3+
background: url(./img/bg.jpg) bottom center;
4+
background-size: cover;
55
}
66

7-
body,html {
8-
margin: 0;
9-
padding: 0;
10-
font-family: sans-serif;
7+
body,
8+
html {
9+
margin: 0;
10+
padding: 0;
11+
font-family: sans-serif;
1112
}
1213

1314
.keys {
14-
display: flex;
15-
flex: 1;
16-
min-height: 100vh;
17-
align-items: center;
18-
justify-content: center;
15+
display: flex;
16+
flex: 1;
17+
min-height: 100vh;
18+
align-items: center;
19+
justify-content: center;
1920
}
2021

2122
.key {
22-
border: .4rem solid black;
23-
border-radius: .5rem;
24-
margin: 1rem;
25-
font-size: 1.5rem;
26-
padding: 1rem .5rem;
27-
transition: all .07s ease;
28-
width: 10rem;
29-
text-align: center;
30-
color: white;
31-
background: rgba(0,0,0,0.4);
32-
text-shadow: 0 0 .5rem black;
23+
border: 0.4rem solid black;
24+
border-radius: 0.5rem;
25+
margin: 1rem;
26+
font-size: 1.5rem;
27+
padding: 1rem 0.5rem;
28+
transition: all 0.07s ease;
29+
width: 10rem;
30+
text-align: center;
31+
color: white;
32+
background: rgba(0, 0, 0, 0.4);
33+
text-shadow: 0 0 0.5rem black;
3334
}
3435

3536
.playing {
36-
transform: scale(1.1);
37-
border-color: #ffc600;
38-
box-shadow: 0 0 1rem #ffc600;
37+
transform: scale(1.1);
38+
border-color: #ffc600;
39+
box-shadow: 0 0 1rem #ffc600;
3940
}
4041

4142
kbd {
42-
display: block;
43-
font-size: 4rem;
43+
display: block;
44+
font-size: 4rem;
4445
}
4546

4647
.sound {
47-
font-size: 1.2rem;
48-
text-transform: uppercase;
49-
letter-spacing: .1rem;
50-
color: #ffc600;
48+
font-size: 1.2rem;
49+
text-transform: uppercase;
50+
letter-spacing: 0.1rem;
51+
color: #ffc600;
5152
}

0 commit comments

Comments
 (0)