Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9548da9

Browse files
Added Drum-Kit Project
1 parent 0116617 commit 9548da9

File tree

18 files changed

+192
-0
lines changed

18 files changed

+192
-0
lines changed
19.1 KB
Loading[フレーム]
51.9 KB
Loading[フレーム]
16.8 KB
Loading[フレーム]
23.5 KB
Loading[フレーム]
22.6 KB
Loading[フレーム]
27.8 KB
Loading[フレーム]
28.5 KB
Loading[フレーム]
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>
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+
}
33.8 KB
Binary file not shown.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /