Skip to content

Commit 45e3d1d

Browse files
borksonborkson
committed
JS drum kit done
1 parent 45e08db commit 45e3d1d

File tree

4 files changed

+123
-84
lines changed

4 files changed

+123
-84
lines changed

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

131 KB
Loading

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

Lines changed: 55 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,69 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>JS Drum Kit</title>
6-
<link rel="stylesheet" href="style.css">
5+
<meta charset="UTF-8">
6+
<title>JS Drum Kit</title>
7+
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
79
</head>
10+
811
<body>
912

1013

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

60-
<script>
53+
<audio data-key="65" src="sounds/clap.wav"></audio>
54+
<audio data-key="83" src="sounds/hihat.wav"></audio>
55+
<audio data-key="68" src="sounds/kick.wav"></audio>
56+
<audio data-key="70" src="sounds/openhat.wav"></audio>
57+
<audio data-key="71" src="sounds/boom.wav"></audio>
58+
<audio data-key="72" src="sounds/ride.wav"></audio>
59+
<audio data-key="74" src="sounds/snare.wav"></audio>
60+
<audio data-key="75" src="sounds/tom.wav"></audio>
61+
<audio data-key="76" src="sounds/tink.wav"></audio>
6162

62-
</script>
63+
<script src="js/app.js" type="text/javascript">
64+
</script>
6365

6466

6567
</body>
68+
6669
</html>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
3+
function playsound(e) {
4+
console.log(e.keyCode); //pokazuje keyCode przypisany do klawisza - keyCode są oznaczone w klasach w index.html przy danym klawiszu z klawiatury
5+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
6+
// console.log(audio);
7+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
8+
// console.log(key);
9+
if (!audio) return // to samo co {return} - zatrzymuje funkcje
10+
audio.currentTime = 0; //umożliwa odtwarzanie dzwięku za każdym razem gdy naciśniemy klawisz
11+
audio.play();
12+
key.classList.add('playing'); //dodaję klasę z efektem transform
13+
}
14+
15+
16+
function removeTransition(e) {
17+
console.log(e); // po naciśnięciu klawisza w konsoli widzimy 6 eventów, po rozwinięciu eventu z nazwą "transform" szukamy propertyName
18+
if (e.propertyName !== "transform") return; //pomiń jeśli nie jest to event transform
19+
console.log(this); //kryje się pod nim aktualnie naciskany klawisz
20+
this.classList.remove('playing');
21+
22+
}
23+
24+
const keys = document.querySelectorAll('.key');
25+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
26+
window.addEventListener('keydown', playsound); // event śledzący klawisze;
27+
28+
});

‎01 - JavaScript Drum Kit/style.css‎

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,58 @@
11
html {
2-
font-size: 10px;
3-
background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
4-
background-size: cover;
2+
font-size: 12px;
3+
background: url("img/drum.jpg") bottom center;
4+
background-size: cover;
55
}
6-
body,html {
7-
margin: 0;
8-
padding: 0;
9-
font-family: sans-serif;
6+
7+
body, html {
8+
margin: 0;
9+
padding: 0;
10+
font-family: 'Cabin Sketch', cursive;
1011
}
1112

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

2021
.key {
21-
border:4px solid black;
22-
border-radius:5px;
23-
margin:1rem;
24-
font-size: 1.5rem;
25-
padding:1rem .5rem;
26-
transition:all .07s;
27-
width:100px;
28-
text-align: center;
29-
color:white;
30-
background:rgba(0,0,0,0.4);
31-
text-shadow:0 0 5px black;
22+
border: 4px solid #eaf2e3;
23+
border-radius: 5px;
24+
margin: 1rem;
25+
font-size: 1.5rem;
26+
padding: 1rem .5rem;
27+
transition: all .07s;
28+
width: 100px;
29+
text-align: center;
30+
color: white;
31+
background: rgba(0, 0, 0, 0.4);
32+
text-shadow: 0 0 5px black;
3233
}
3334

3435
.playing {
35-
transform:scale(1.1);
36-
border-color:#ffc600;
37-
box-shadow: 0 0 10px #ffc600;
36+
transform: scale(1.1);
37+
border-color: #ffc600;
38+
box-shadow: 0 0 10px #ffc600;
3839
}
3940

4041
kbd {
41-
display: block;
42-
font-size: 40px;
42+
display: block;
43+
font-size: 40px;
4344
}
4445

4546
.sound {
46-
font-size: 1.2rem;
47-
text-transform: uppercase;
48-
letter-spacing: 1px;
49-
color:#ffc600;
47+
font-size: 1.2rem;
48+
text-transform: uppercase;
49+
letter-spacing: 1px;
50+
color: #ffc600;
51+
}
52+
53+
m;
54+
text-transform: uppercase;
55+
letter-spacing: 1px;
56+
color: #ffc600;
57+
5058
}

0 commit comments

Comments
 (0)