Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 73d319e

Browse files
Update JavaScript drum kit
1 parent 5bec8b8 commit 73d319e

File tree

3 files changed

+114
-74
lines changed

3 files changed

+114
-74
lines changed

β€Ž01 - JavaScript Drum Kit/css/style.css

Lines changed: 49 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
:root {
2-
--primary-font-family: sans-serif;
3-
--secondary-font-family: cursive;
4-
--body-color: #ffd700;
2+
--primary-font-family: "Open Sans", sans-serif;
3+
--secondary-font-family: "Short Stack", cursive;
4+
--white-color: #fffffff1;
5+
--primary-color: #ffd700;
56
--bg-color: #272727bf;
67
--loader-bg-color: #060606;
78
--border-color: #000000e1;
8-
--white-color: #fffffff1;
9-
--yellow-color: #ffd700;
109
--shadow-color: #ffd900b6;
1110
}
1211

@@ -28,10 +27,15 @@ html {
2827
}
2928

3029
body {
31-
background: url(../img/background.jpg) center/cover no-repeat var(--body-color);
30+
background: url(../img/background.jpg) center/cover no-repeat
31+
var(--primary-color);
3232
overflow: hidden;
3333
}
3434

35+
#container {
36+
padding: 0.5rem;
37+
}
38+
3539
.keys {
3640
display: flex;
3741
align-items: center;
@@ -59,19 +63,37 @@ kbd {
5963
}
6064

6165
.sound {
62-
color: var(--yellow-color);
66+
color: var(--primary-color);
6367
text-transform: uppercase;
64-
font: 1.3rem var(--primary-font-family);
68+
font: 5001.3rem var(--primary-font-family);
6569
padding-bottom: 1rem;
6670
}
6771

68-
.playing {
72+
.playing,
73+
.key:active {
6974
transform: scale(1.1);
70-
border: 0.4rem solid var(--yellow-color);
71-
box-shadow: 0.1rem 0.1rem 1rem var(--shadow-color);
75+
border: 0.3rem solid var(--primary-color);
76+
box-shadow: 0 0 2rem var(--shadow-color);
77+
}
78+
79+
.mobile {
80+
font: 4rem var(--primary-font-family);
81+
color: var(--primary-color);
82+
position: absolute;
83+
left: 50%;
84+
top: 70%;
85+
transform: translate(-50%, -50%);
86+
width: 100%;
87+
text-align: center;
88+
display: none;
89+
}
90+
91+
::selection {
92+
background-color: var(--primary-color);
93+
color: var(--border-color);
7294
}
7395

74-
/* cursor */
96+
/* cursor start */
7597
#cursor {
7698
position: absolute;
7799
border-radius: 50%;
@@ -80,12 +102,13 @@ kbd {
80102
z-index: 100;
81103
transition: all 0.1s linear;
82104
pointer-events: none;
83-
border: 0.2rem solid var(--yellow-color);
105+
border: 0.2rem solid var(--primary-color);
84106
box-shadow: 0 0 0.2rem var(--shadow-color);
85107
background-color: transparent;
86108
}
109+
/* cursor end */
87110

88-
/* loader */
111+
/* loader start */
89112
.cssload-container {
90113
width: 100vw;
91114
height: 100vh;
@@ -120,8 +143,8 @@ kbd {
120143
height: 7.6rem;
121144
border-radius: 100%;
122145
border: 0.4rem solid transparent;
123-
border-bottom: 0.4rem solid var(--yellow-color);
124-
border-left: 0.4rem solid var(--yellow-color);
146+
border-bottom: 0.4rem solid var(--primary-color);
147+
border-left: 0.4rem solid var(--primary-color);
125148
animation: cssload-spinR 1.1s linear infinite;
126149
}
127150

@@ -139,8 +162,8 @@ kbd {
139162
top: 11%;
140163
left: 11%;
141164
border: 0.3rem solid transparent;
142-
border-top: 0.3rem solid var(--yellow-color);
143-
border-right: 0.3rem solid var(--yellow-color);
165+
border-top: 0.3rem solid var(--primary-color);
166+
border-right: 0.3rem solid var(--primary-color);
144167
animation: cssload-spinL 0.4075s linear infinite;
145168
transform-origin: center center;
146169
}
@@ -151,7 +174,7 @@ kbd {
151174
top: 35.5%;
152175
left: 35.5%;
153176
background-color: transparent;
154-
border: 0.2rem solid var(--yellow-color);
177+
border: 0.2rem solid var(--primary-color);
155178
}
156179

157180
@keyframes cssload-spinR {
@@ -164,16 +187,6 @@ kbd {
164187
}
165188
}
166189

167-
@-o-keyframes cssload-spinR {
168-
from {
169-
-o-transform: rotate(0deg);
170-
}
171-
172-
to {
173-
-o-transform: rotate(360deg);
174-
}
175-
}
176-
177190
@-ms-keyframes cssload-spinR {
178191
from {
179192
-ms-transform: rotate(0deg);
@@ -194,16 +207,6 @@ kbd {
194207
}
195208
}
196209

197-
@-moz-keyframes cssload-spinR {
198-
from {
199-
-moz-transform: rotate(0deg);
200-
}
201-
202-
to {
203-
-moz-transform: rotate(360deg);
204-
}
205-
}
206-
207210
@keyframes cssload-spinL {
208211
from {
209212
transform: rotate(0deg);
@@ -214,16 +217,6 @@ kbd {
214217
}
215218
}
216219

217-
@-o-keyframes cssload-spinL {
218-
from {
219-
-o-transform: rotate(0deg);
220-
}
221-
222-
to {
223-
-o-transform: rotate(-360deg);
224-
}
225-
}
226-
227220
@-ms-keyframes cssload-spinL {
228221
from {
229222
-ms-transform: rotate(0deg);
@@ -243,21 +236,16 @@ kbd {
243236
-webkit-transform: rotate(-360deg);
244237
}
245238
}
239+
/* loader end */
246240

247-
@-moz-keyframes cssload-spinL {
248-
from {
249-
-moz-transform: rotate(0deg);
250-
}
251-
252-
to {
253-
-moz-transform: rotate(-360deg);
254-
}
255-
}
256-
257-
@media screen and (max-width: 950px) {
241+
@media screen and (max-width: 1007px) {
258242
html {
259243
font-size: 7px;
260244
}
245+
246+
.mobile {
247+
display: block;
248+
}
261249
}
262250

263251
@media screen and (max-width: 690px) {
@@ -268,6 +256,6 @@ kbd {
268256

269257
@media screen and (max-width: 460px) {
270258
html {
271-
font-size: 3.1px;
259+
font-size: 3.3px;
272260
}
273261
}

β€Ž01 - JavaScript Drum Kit/index.html

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<!-- title -->
45
<title>JS Drum Kit</title>
56

67
<!-- required meta tags -->
@@ -11,23 +12,37 @@
1112
<!-- favicon -->
1213
<link rel="icon" href="img/drum.png" />
1314

15+
<!-- google font -->
16+
<link rel="preconnect" href="https://fonts.googleapis.com" />
17+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
18+
<link
19+
href="https://fonts.googleapis.com/css2?family=Short+Stack&display=swap"
20+
rel="stylesheet"
21+
/>
22+
<link
23+
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&display=swap"
24+
rel="stylesheet"
25+
/>
26+
1427
<!-- style -->
1528
<link rel="stylesheet" href="css/style.css" />
1629
</head>
1730
<body>
18-
<!-- cursor -->
31+
<!-- cursor start -->
1932
<div id="cursor"></div>
33+
<!-- cursor end -->
2034

21-
<!-- loader -->
35+
<!-- loader start -->
2236
<div class="cssload-container">
2337
<ul class="cssload-flex-container">
2438
<li>
2539
<span class="cssload-loading"></span>
2640
</li>
2741
</ul>
2842
</div>
43+
<!-- loader end -->
2944

30-
<div class="container">
45+
<div id="container">
3146
<div class="keys">
3247
<div class="key" data-key="a">
3348
<kbd>A</kbd>
@@ -67,15 +82,17 @@
6782
</div>
6883
</div>
6984

70-
<audio src="sounds/boom.wav" data-key="a"></audio>
71-
<audio src="sounds/clap.wav" data-key="s"></audio>
72-
<audio src="sounds/hihat.wav" data-key="d"></audio>
73-
<audio src="sounds/kick.wav" data-key="f"></audio>
74-
<audio src="sounds/openhat.wav" data-key="g"></audio>
75-
<audio src="sounds/ride.wav" data-key="h"></audio>
76-
<audio src="sounds/snare.wav" data-key="j"></audio>
77-
<audio src="sounds/tink.wav" data-key="k"></audio>
78-
<audio src="sounds/tom.wav" data-key="l"></audio>
85+
<audio src="sounds/boom.wav" data-key="a" preload="auto"></audio>
86+
<audio src="sounds/clap.wav" data-key="s" preload="auto"></audio>
87+
<audio src="sounds/hihat.wav" data-key="d" preload="auto"></audio>
88+
<audio src="sounds/kick.wav" data-key="f" preload="auto"></audio>
89+
<audio src="sounds/openhat.wav" data-key="g" preload="auto"></audio>
90+
<audio src="sounds/ride.wav" data-key="h" preload="auto"></audio>
91+
<audio src="sounds/snare.wav" data-key="j" preload="auto"></audio>
92+
<audio src="sounds/tink.wav" data-key="k" preload="auto"></audio>
93+
<audio src="sounds/tom.wav" data-key="l" preload="auto"></audio>
94+
95+
<p class="mobile">Visit in desktop for the best experience.</p>
7996
</div>
8097

8198
<!-- jquery -->

β€Ž01 - JavaScript Drum Kit/js/app.js

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use strict";
22

3-
window.addEventListener("keydown", function(e) {
3+
window.addEventListener("keydown", (e)=> {
44
const key = document.querySelector(`.key[data-key="${e.key}"]`);
55
const audio = document.querySelector(`audio[data-key="${e.key}"]`);
66
if (!audio) return;
@@ -9,6 +9,41 @@ window.addEventListener("keydown", function (e) {
99
key.classList.add("playing");
1010
});
1111

12+
window.addEventListener("click", (e) => {
13+
const sounds = document.querySelectorAll("audio[data-key]");
14+
sounds.forEach((sound) => {
15+
if (
16+
e.target.getAttribute("data-key") == sound.getAttribute("data-key") ||
17+
e.target.innerHTML.toLowerCase() == sound.getAttribute("data-key")
18+
) {
19+
sound.currentTime = 0;
20+
sound.play();
21+
}
22+
23+
const position = [
24+
{ sound: "boom", letter: "a" },
25+
{ sound: "clap", letter: "s" },
26+
{ sound: "hihat", letter: "d" },
27+
{ sound: "kick", letter: "f" },
28+
{ sound: "openhat", letter: "g" },
29+
{ sound: "ride", letter: "h" },
30+
{ sound: "snare", letter: "j" },
31+
{ sound: "tink", letter: "k" },
32+
{ sound: "tom", letter: "l" },
33+
];
34+
35+
for (let i = 0; i < position.length; i++) {
36+
if (e.target.innerHTML.toLowerCase() == position[i].sound) {
37+
const audio = document.querySelector(
38+
`audio[data-key='${position[i].letter}']`
39+
);
40+
audio.currentTime = 0;
41+
audio.play();
42+
}
43+
}
44+
});
45+
});
46+
1247
const keys = document.querySelectorAll(".key");
1348
keys.forEach((key) => key.addEventListener("transitionend", removeStyle));
1449

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /