Skip to content

Commit 36972da

Browse files
0xsarwagya0xsarwagya
authored
Merge pull request #8 from itsharshpro/main
added a new drumKit project
2 parents 809611e + 55ff556 commit 36972da

File tree

18 files changed

+165
-0
lines changed

18 files changed

+165
-0
lines changed

‎DrumKit/.DS_Store

6 KB
Binary file not shown.

‎DrumKit/images/crash.png

19.1 KB
Loading

‎DrumKit/images/kick.png

51.9 KB
Loading

‎DrumKit/images/snare.png

16.8 KB
Loading

‎DrumKit/images/tom1.png

23.5 KB
Loading

‎DrumKit/images/tom2.png

22.6 KB
Loading

‎DrumKit/images/tom3.png

27.8 KB
Loading

‎DrumKit/images/tom4.png

28.5 KB
Loading

‎DrumKit/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Drum Kit</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
<link
8+
href="https://fonts.googleapis.com/css?family=Arvo"
9+
rel="stylesheet"
10+
/>
11+
</head>
12+
13+
<body>
14+
<h1 id="title">Drum 🥁 Kit</h1>
15+
<div class="set">
16+
<button class="w drum">w</button>
17+
<button class="a drum">a</button>
18+
<button class="s drum">s</button>
19+
<button class="d drum">d</button>
20+
<button class="j drum">j</button>
21+
<button class="k drum">k</button>
22+
<button class="l drum">l</button>
23+
</div>
24+
25+
<footer>Make your own music ❤️ </footer>
26+
<script src="index.js" charset="utf-8"></script>
27+
</body>
28+
</html>

‎DrumKit/index.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
var numberOfDrumButtons = document.querySelectorAll(".drum").length;
2+
for (var i = 0; i < numberOfDrumButtons; i++) {
3+
document
4+
.querySelectorAll(".drum")
5+
[i].addEventListener("click", function playSound() {
6+
var buttonInnerHtml = this.innerHTML;
7+
makeSound(buttonInnerHtml);
8+
buttonAnimation(buttonInnerHtml);
9+
});
10+
}
11+
document.addEventListener("keydown", function (event) {
12+
makeSound(event.key);
13+
buttonAnimation(event.key);
14+
});
15+
//Read mdn docs for more on EventListerner.
16+
function makeSound(key) {
17+
switch (key) {
18+
case "w":
19+
var audio = new Audio("sounds/tom-1.mp3");
20+
audio.play();
21+
break;
22+
case "a":
23+
var audio = new Audio("sounds/tom-2.mp3");
24+
audio.play();
25+
break;
26+
case "s":
27+
var audio = new Audio("sounds/tom-3.mp3");
28+
audio.play();
29+
break;
30+
case "d":
31+
var audio = new Audio("sounds/tom-4.mp3");
32+
audio.play();
33+
break;
34+
case "j":
35+
var audio = new Audio("sounds/snare.mp3");
36+
audio.play();
37+
break;
38+
case "k":
39+
var audio = new Audio("sounds/crash.mp3");
40+
audio.play();
41+
break;
42+
case "l":
43+
var audio = new Audio("sounds/kick-bass.mp3");
44+
audio.play();
45+
break;
46+
47+
default:
48+
break;
49+
}
50+
}
51+
function buttonAnimation(currentKey) {
52+
var activeButton = document.querySelector("." + currentKey);
53+
activeButton.classList.add("pressed");
54+
setTimeout(function () {
55+
activeButton.classList.remove("pressed");
56+
}, 100);
57+
}

‎DrumKit/sounds/crash.mp3

33.8 KB
Binary file not shown.

‎DrumKit/sounds/kick-bass.mp3

1.53 KB
Binary file not shown.

‎DrumKit/sounds/snare.mp3

25.7 KB
Binary file not shown.

‎DrumKit/sounds/tom-1.mp3

22.3 KB
Binary file not shown.

‎DrumKit/sounds/tom-2.mp3

35.4 KB
Binary file not shown.

‎DrumKit/sounds/tom-3.mp3

28.9 KB
Binary file not shown.

‎DrumKit/sounds/tom-4.mp3

27.8 KB
Binary file not shown.

‎DrumKit/styles.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
body {
2+
text-align: center;
3+
background-color: #283149;
4+
}
5+
6+
h1 {
7+
font-size: 5rem;
8+
color: #dbedf3;
9+
font-family: "Arvo", cursive;
10+
text-shadow: 3px 0 #da0463;
11+
}
12+
13+
footer {
14+
color: #dbedf3;
15+
font-family: sans-serif;
16+
}
17+
18+
.w {
19+
background-image: url("images/tom1.png");
20+
}
21+
22+
.a {
23+
background-image: url("images/tom2.png");
24+
}
25+
26+
.s {
27+
background-image: url("images/tom3.png");
28+
}
29+
30+
.d {
31+
background-image: url("images/tom4.png");
32+
}
33+
34+
.j {
35+
background-image: url("images/snare.png");
36+
}
37+
38+
.k {
39+
background-image: url("images/crash.png");
40+
}
41+
42+
.l {
43+
background-image: url("images/kick.png");
44+
}
45+
46+
.set {
47+
margin: 10% auto;
48+
}
49+
50+
.game-over {
51+
background-color: red;
52+
opacity: 0.8;
53+
}
54+
55+
.pressed {
56+
box-shadow: 0 3px 4px 0 #dbedf3;
57+
opacity: 0.5;
58+
}
59+
60+
.red {
61+
color: red;
62+
}
63+
64+
.drum {
65+
outline: none;
66+
border: 10px solid #404b69;
67+
font-size: 5rem;
68+
font-family: "Arvo", cursive;
69+
line-height: 2;
70+
font-weight: 900;
71+
color: #da0463;
72+
text-shadow: 3px 0 #dbedf3;
73+
border-radius: 15px;
74+
display: inline-block;
75+
width: 150px;
76+
height: 150px;
77+
text-align: center;
78+
margin: 10px;
79+
background-color: white;
80+
}

0 commit comments

Comments
 (0)