Skip to content

Commit 64396a1

Browse files
Jdbain67Jdbain67
authored
Add files via upload
1 parent 9ceec91 commit 64396a1

File tree

14 files changed

+141
-0
lines changed

14 files changed

+141
-0
lines changed

‎Mike.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Mike welds the drums</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>
59+
function removeTransition(e) {
60+
if (e.propertyName !== "transform") return;
61+
e.target.classList.remove("playing");
62+
}
63+
64+
function playSound(e) {
65+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
66+
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
67+
if (!audio) return;
68+
69+
key.classList.add("playing");
70+
audio.currentTime = 0;
71+
audio.play();
72+
}
73+
74+
const keys = Array.from(document.querySelectorAll(".key"));
75+
keys.forEach((key) =>
76+
key.addEventListener("transitionend", removeTransition)
77+
);
78+
window.addEventListener("keydown", playSound);
79+
</script>
80+
</body>
81+
</html>

‎boom.wav

130 KB
Binary file not shown.

‎clap.wav

63.4 KB
Binary file not shown.

‎hihat.wav

50.9 KB
Binary file not shown.

‎kick.wav

15.2 KB
Binary file not shown.

‎mike.jpeg

74.6 KB
Loading

‎mike.jpg

98.9 KB
Loading

‎openhat.wav

238 KB
Binary file not shown.

‎repeated-square-dark.png

2.12 KB
Loading

‎ride.wav

429 KB
Binary file not shown.

‎snare.wav

32.6 KB
Binary file not shown.

‎style.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
html {
2+
font-size: 10px;
3+
background-color: #443f3f;
4+
background-image: url("/pics/repeated-square-dark.png");
5+
}
6+
7+
div {
8+
background-image: url("/pics/mike.jpeg");
9+
background-size: cover;
10+
background-position: center 0;
11+
padding: 100px 100px;
12+
margin: 150px 300px;
13+
}
14+
15+
body,
16+
html {
17+
margin: 0;
18+
padding: 0;
19+
font-family: sans-serif;
20+
}
21+
22+
.keys {
23+
display: flex;
24+
flex: 1;
25+
min-height: 100vh;
26+
align-items: center;
27+
justify-content: center;
28+
}
29+
30+
.key {
31+
border: 0.4rem solid black;
32+
border-radius: 0.5rem;
33+
margin: 1rem;
34+
font-size: 1.5rem;
35+
padding: 1rem 0.5rem;
36+
transition: all 0.07s ease;
37+
width: 10rem;
38+
text-align: center;
39+
color: white;
40+
background: rgba(0, 0, 0, 0.4);
41+
text-shadow: 0 0 0.5rem black;
42+
}
43+
44+
.playing {
45+
transform: scale(1.1);
46+
border-color: #f70404;
47+
box-shadow: 0 0 1rem #2c2c2b;
48+
}
49+
50+
kbd {
51+
display: block;
52+
font-size: 4rem;
53+
}
54+
55+
.sound {
56+
font-size: 1.2rem;
57+
text-transform: uppercase;
58+
letter-spacing: 0.1rem;
59+
color: #ffc600;
60+
}

‎tink.wav

9.17 KB
Binary file not shown.

‎tom.wav

105 KB
Binary file not shown.

0 commit comments

Comments
 (0)