Skip to content

Commit 120dda0

Browse files
Subham2409Subham2409
authored
Drum kit website (#2)
* Create read me.js * Add files via upload
1 parent 2e25a9e commit 120dda0

File tree

4 files changed

+174
-0
lines changed

4 files changed

+174
-0
lines changed

‎PROJECTS/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+
<script src="index.js" charset="utf-8"></script>
25+
26+
<footer>
27+
Made with ❤️ in India.
28+
</footer>
29+
</body>
30+
31+
</html>

‎PROJECTS/index.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
var noofdrumbuttton = document.querySelectorAll(".drum").length;
2+
for(var i=0;i<noofdrumbuttton;i++){
3+
document.querySelectorAll(".drum")[i].addEventListener("click", function() {
4+
var buttonInnerHTML = this.innerHTML;
5+
makesound(buttonInnerHTML);
6+
buttonanimation(buttonInnerHTML);
7+
});
8+
}
9+
10+
document.addEventListener("keypress",function(event){
11+
makesound(event.key);
12+
buttonanimation(event.key)
13+
});
14+
15+
function makesound(key){
16+
switch (key) {
17+
case "w":
18+
var tom1 = new Audio('sounds/tom-1.mp3');
19+
tom1.play();
20+
break;
21+
case "a":
22+
var tom2 = new Audio('sounds/tom-2.mp3');
23+
tom2.play();
24+
break;
25+
case "s":
26+
var tom3 = new Audio('sounds/tom-3.mp3');
27+
tom3.play();
28+
break;
29+
30+
case "d":
31+
var tom4 = new Audio('sounds/tom-4.mp3');
32+
tom4.play();
33+
break;
34+
case "j":
35+
var snare = new Audio('sounds/snare.mp3');
36+
snare.play();
37+
break;
38+
39+
case "k":
40+
var crash = new Audio('sounds/crash.mp3');
41+
crash.play();
42+
break;
43+
44+
case "l":
45+
var kickb = new Audio('sounds/kickb.mp3');
46+
kickb.play();
47+
break;
48+
49+
default:
50+
console.log(buttonInnerHTML);
51+
}
52+
}
53+
54+
function buttonanimation(currentkey){
55+
var activebutton = document.querySelector("." + currentkey);
56+
activebutton.classList.add("pressed");
57+
58+
setTimeout(function(){
59+
activebutton.classList.remove("pressed"),1
60+
});
61+
}

‎PROJECTS/read me.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎PROJECTS/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/tom1.png");
21+
}
22+
23+
.a {
24+
background-image: url("images/tom2.png");
25+
}
26+
27+
.s {
28+
background-image: url("images/tom3.png");
29+
}
30+
31+
.d {
32+
background-image: url("images/tom4.png");
33+
}
34+
35+
.j {
36+
background-image: url("images/snare.png");
37+
}
38+
39+
.k {
40+
background-image: url("images/crash.png");
41+
}
42+
43+
.l {
44+
background-image: url("images/kick.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)