Skip to content

Commit 49216ab

Browse files
Mitesh-V-ChauhanMitesh-V-Chauhan
committed
Your commit message here
0 parents  commit 49216ab

18 files changed

+145
-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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
10+
</head>
11+
12+
<body>
13+
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+
26+
27+
<footer>
28+
Made with ❤️ in Rajkot.
29+
</footer>
30+
31+
<script src="index.js"></script>
32+
33+
</body>
34+
35+
</html>

‎Drum Kit Starting Files/index.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
function playsound(sond){
2+
var audio= new Audio(sond);
3+
audio.play();
4+
}
5+
6+
for (let i=1; i<=7; i++){
7+
let sond="";
8+
if(i<=4){
9+
sond=`./sounds/tom-${i}.mp3`;
10+
}
11+
12+
else if(i==5){
13+
sond=`./sounds/snare.mp3`;
14+
}
15+
16+
else if(i==6){
17+
sond=`./sounds/crash.mp3`;
18+
}
19+
20+
else if(i==7){
21+
sond=`./sounds/kick-bass.mp3`;
22+
}
23+
document.querySelectorAll(".drum")[i-1].addEventListener("click", function(){
24+
playsound(sond)});
25+
26+
}
27+

‎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

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

0 commit comments

Comments
 (0)