Skip to content

Commit dd88cc2

Browse files
chandankumar1307chandankumar1307
committedOct 1, 2022
added a drum kit project
1 parent 966690a commit dd88cc2

18 files changed

+169
-0
lines changed
 

‎Drum Kit Starting Files/.DS_Store

6 KB
Binary file not shown.

‎Drum Kit Starting Files/images/crash.png

19.1 KB
Loading

‎Drum Kit Starting Files/images/kick.png

51.9 KB
Loading

‎Drum Kit Starting Files/images/snare.png

16.8 KB
Loading

‎Drum Kit Starting Files/images/tom1.png

23.5 KB
Loading

‎Drum Kit Starting Files/images/tom2.png

22.6 KB
Loading

‎Drum Kit Starting Files/images/tom3.png

27.8 KB
Loading

‎Drum Kit Starting Files/images/tom4.png

28.5 KB
Loading

‎Drum Kit Starting Files/index.html

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

‎Drum Kit Starting Files/index.js

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

‎Drum Kit Starting Files/sounds/crash.mp3

33.8 KB
Binary file not shown.

‎Drum Kit Starting Files/sounds/kick-bass.mp3

1.53 KB
Binary file not shown.

‎Drum Kit Starting Files/sounds/snare.mp3

25.7 KB
Binary file not shown.

‎Drum Kit Starting Files/sounds/tom-1.mp3

22.3 KB
Binary file not shown.

‎Drum Kit Starting Files/sounds/tom-2.mp3

35.4 KB
Binary file not shown.

‎Drum Kit Starting Files/sounds/tom-3.mp3

28.9 KB
Binary file not shown.

‎Drum Kit Starting Files/sounds/tom-4.mp3

27.8 KB
Binary file not shown.

‎Drum Kit Starting Files/styles.css

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

0 commit comments

Comments
 (0)
Please sign in to comment.