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 261971b

Browse files
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
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 によって変換されたページ (->オリジナル) /