Skip to content

Commit 261971b

Browse files
sarabgisarabgi
authored
Merge pull request #18 from deek121477/project
Added Drum-Kit Project
2 parents 0116617 + 9548da9 commit 261971b

File tree

18 files changed

+192
-0
lines changed

18 files changed

+192
-0
lines changed

‎Drum-kit/Drum Kit Starting Files/images/crash.png‎

19.1 KB
Loading

‎Drum-kit/Drum Kit Starting Files/images/kick.png‎

51.9 KB
Loading

‎Drum-kit/Drum Kit Starting Files/images/snare.png‎

16.8 KB
Loading

‎Drum-kit/Drum Kit Starting Files/images/tom1.png‎

23.5 KB
Loading

‎Drum-kit/Drum Kit Starting Files/images/tom2.png‎

22.6 KB
Loading

‎Drum-kit/Drum Kit Starting Files/images/tom3.png‎

27.8 KB
Loading

‎Drum-kit/Drum Kit Starting Files/images/tom4.png‎

28.5 KB
Loading

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

‎Drum-kit/Drum Kit Starting Files/index.js‎

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

‎Drum-kit/Drum Kit Starting Files/sounds/crash.mp3‎

33.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)