diff --git a/DrumKit/images/background.jpg b/DrumKit/images/background.jpg new file mode 100644 index 00000000..5dfde3c6 Binary files /dev/null and b/DrumKit/images/background.jpg differ diff --git a/DrumKit/images/crash.png b/DrumKit/images/crash.png new file mode 100644 index 00000000..f268ad98 Binary files /dev/null and b/DrumKit/images/crash.png differ diff --git a/DrumKit/images/kick.png b/DrumKit/images/kick.png new file mode 100644 index 00000000..9b08b300 Binary files /dev/null and b/DrumKit/images/kick.png differ diff --git a/DrumKit/images/snare.png b/DrumKit/images/snare.png new file mode 100644 index 00000000..a0da2801 Binary files /dev/null and b/DrumKit/images/snare.png differ diff --git a/DrumKit/images/tom1.png b/DrumKit/images/tom1.png new file mode 100644 index 00000000..9ff03795 Binary files /dev/null and b/DrumKit/images/tom1.png differ diff --git a/DrumKit/images/tom2.png b/DrumKit/images/tom2.png new file mode 100644 index 00000000..ff32b395 Binary files /dev/null and b/DrumKit/images/tom2.png differ diff --git a/DrumKit/images/tom3.png b/DrumKit/images/tom3.png new file mode 100644 index 00000000..9ff03795 Binary files /dev/null and b/DrumKit/images/tom3.png differ diff --git a/DrumKit/images/tom4.png b/DrumKit/images/tom4.png new file mode 100644 index 00000000..a476c1d6 Binary files /dev/null and b/DrumKit/images/tom4.png differ diff --git a/DrumKit/index.html b/DrumKit/index.html new file mode 100644 index 00000000..e2542538 --- /dev/null +++ b/DrumKit/index.html @@ -0,0 +1,33 @@ + + + + + + Drum Kit + + + + + +

Drum 🥁 Kit

+
+ + + + + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/DrumKit/index.js b/DrumKit/index.js new file mode 100644 index 00000000..9080dfb2 --- /dev/null +++ b/DrumKit/index.js @@ -0,0 +1,78 @@ +var lengthOfSet = document.firstElementChild.lastElementChild.children[1].children.length; + + +document.addEventListener("keydown",function(event){ + + playDrum(event.key); + buttonAnimation(event.key); +}); + +while (lengthOfSet >= 0) { + +document.querySelectorAll(".drum")[lengthOfSet - 1].addEventListener("click", function() { + +var buttonKey = this.innerHTML; + +playDrum(buttonKey); + +buttonAnimation(buttonKey); + }); + +lengthOfSet--; +} + + + +function playDrum(KeyboardOrButtonKey){ + + + switch (KeyboardOrButtonKey) { + case "w": + var crash = new Audio('sounds/crash.mp3'); + crash.play(); + + break; + + case "a": + var kick = new Audio('sounds/kick-bass.mp3'); + kick.play(); + break; + + + case "s": + var snare = new Audio('sounds/snare.mp3'); + snare.play(); + break; + + case "d": + var tom1 = new Audio('sounds/tom-1.mp3'); + tom1.play(); + break; + + case "j": + var tom2 = new Audio('sounds/tom-2.mp3'); + tom2.play(); + break; + + case "k": + var tom3 = new Audio('sounds/tom-3.mp3'); + tom3.play(); + break; + + case "l": + var tom4 = new Audio('sounds/tom-4.mp3'); + tom4.play(); + break; + + default: + alert("Invalid Key") + + + } +} + +function buttonAnimation(pressed){ + var activeButton = document.querySelector("."+pressed); + activeButton.classList.add("pressed"); + setTimeout(function(){ activeButton.classList.remove("pressed");},100); +} \ No newline at end of file diff --git a/DrumKit/readme.md b/DrumKit/readme.md new file mode 100644 index 00000000..60a9c5e1 --- /dev/null +++ b/DrumKit/readme.md @@ -0,0 +1 @@ +# DrumKit Project made using html css and javascript diff --git a/DrumKit/sounds/crash.mp3 b/DrumKit/sounds/crash.mp3 new file mode 100644 index 00000000..d5680626 Binary files /dev/null and b/DrumKit/sounds/crash.mp3 differ diff --git a/DrumKit/sounds/kick-bass.mp3 b/DrumKit/sounds/kick-bass.mp3 new file mode 100644 index 00000000..faf06c6c Binary files /dev/null and b/DrumKit/sounds/kick-bass.mp3 differ diff --git a/DrumKit/sounds/snare.mp3 b/DrumKit/sounds/snare.mp3 new file mode 100644 index 00000000..e7cf5b84 Binary files /dev/null and b/DrumKit/sounds/snare.mp3 differ diff --git a/DrumKit/sounds/tom-1.mp3 b/DrumKit/sounds/tom-1.mp3 new file mode 100644 index 00000000..7dc3003d Binary files /dev/null and b/DrumKit/sounds/tom-1.mp3 differ diff --git a/DrumKit/sounds/tom-2.mp3 b/DrumKit/sounds/tom-2.mp3 new file mode 100644 index 00000000..f3c04855 Binary files /dev/null and b/DrumKit/sounds/tom-2.mp3 differ diff --git a/DrumKit/sounds/tom-3.mp3 b/DrumKit/sounds/tom-3.mp3 new file mode 100644 index 00000000..38060330 Binary files /dev/null and b/DrumKit/sounds/tom-3.mp3 differ diff --git a/DrumKit/sounds/tom-4.mp3 b/DrumKit/sounds/tom-4.mp3 new file mode 100644 index 00000000..58b04beb Binary files /dev/null and b/DrumKit/sounds/tom-4.mp3 differ diff --git a/DrumKit/styles.css b/DrumKit/styles.css new file mode 100644 index 00000000..8d9e16b7 --- /dev/null +++ b/DrumKit/styles.css @@ -0,0 +1,95 @@ +#apex::before{ + content: ""; +position: absolute; +background: url('images/background.jpg') no-repeat center center/cover; +height: 130%; +width: 130%; +float: left; +z-index: -3; +opacity: .8; +} + +body { + text-align: center; + background-color: #283149; + + } + + h1 { + font-size: 5rem; + color: #DBEDF3; + font-family: "Arvo", cursive; + text-shadow: 3px 0 #DA0463; + } + + footer { + color: #DBEDF3; + font-family: sans-serif; + } + + #name{ + opacity: 0.5; + } + .w { + background-image: url("images/crash.png"); + } + + .a { + background-image: url("images/kick.png"); + } + + .s { + background-image: url("images/tom4.png"); + } + + .d { + background-image: url("images/snare.png"); + } + + .j { + background-image: url("images/tom1.png"); + } + + .k { + background-image: url("images/tom2.png"); + } + + .l { + background-image: url("images/tom3.png"); + } + + .set { + margin: 10% auto; + } + + .game-over { + background-color: red; + opacity: 0.8; + } + + .pressed { + box-shadow: 0 3px 4px 0 #DBEDF3; + opacity: 0.5; + } + + .red { + color: red; + } + + .drum { + outline: none; + border: 10px solid #404B69; + font-size: 5rem; + font-family: 'Arvo', cursive; + line-height: 2; + font-weight: 900; + color: #DA0463; + text-shadow: 3px 0 #DBEDF3; + border-radius: 15px; + display: inline-block; + width: 150px; + height: 150px; + text-align: center; + margin: 10px; + background-color: white; + } \ No newline at end of file