diff --git a/drumkit/ManuPrasad1208/.DS_Store b/drumkit/ManuPrasad1208/.DS_Store new file mode 100644 index 000000000..91209ea1b Binary files /dev/null and b/drumkit/ManuPrasad1208/.DS_Store differ diff --git a/drumkit/ManuPrasad1208/images/crash.png b/drumkit/ManuPrasad1208/images/crash.png new file mode 100644 index 000000000..a992fa0f5 Binary files /dev/null and b/drumkit/ManuPrasad1208/images/crash.png differ diff --git a/drumkit/ManuPrasad1208/images/kick.png b/drumkit/ManuPrasad1208/images/kick.png new file mode 100644 index 000000000..b64877e70 Binary files /dev/null and b/drumkit/ManuPrasad1208/images/kick.png differ diff --git a/drumkit/ManuPrasad1208/images/snare.png b/drumkit/ManuPrasad1208/images/snare.png new file mode 100644 index 000000000..1e089bacd Binary files /dev/null and b/drumkit/ManuPrasad1208/images/snare.png differ diff --git a/drumkit/ManuPrasad1208/images/tom1.png b/drumkit/ManuPrasad1208/images/tom1.png new file mode 100644 index 000000000..855b21117 Binary files /dev/null and b/drumkit/ManuPrasad1208/images/tom1.png differ diff --git a/drumkit/ManuPrasad1208/images/tom2.png b/drumkit/ManuPrasad1208/images/tom2.png new file mode 100644 index 000000000..3e9f3636f Binary files /dev/null and b/drumkit/ManuPrasad1208/images/tom2.png differ diff --git a/drumkit/ManuPrasad1208/images/tom3.png b/drumkit/ManuPrasad1208/images/tom3.png new file mode 100644 index 000000000..762cbf854 Binary files /dev/null and b/drumkit/ManuPrasad1208/images/tom3.png differ diff --git a/drumkit/ManuPrasad1208/images/tom4.png b/drumkit/ManuPrasad1208/images/tom4.png new file mode 100644 index 000000000..e79c49e1b Binary files /dev/null and b/drumkit/ManuPrasad1208/images/tom4.png differ diff --git a/drumkit/ManuPrasad1208/index.html b/drumkit/ManuPrasad1208/index.html new file mode 100644 index 000000000..49af825fb --- /dev/null +++ b/drumkit/ManuPrasad1208/index.html @@ -0,0 +1,31 @@ + + + + + + Drum Kit + + + + + + +

Drum 🥁 Kit

+
+ + + + + + + +
+ + + + + + + diff --git a/drumkit/ManuPrasad1208/index.js b/drumkit/ManuPrasad1208/index.js new file mode 100644 index 000000000..b49fd7096 --- /dev/null +++ b/drumkit/ManuPrasad1208/index.js @@ -0,0 +1,57 @@ +// detecting button press + +for (var i = 0; i < document.querySelectorAll(".drum").length; i++) { + document.querySelectorAll(".drum")[i].addEventListener("click", function() { + var buttonInnerHTML = this.innerHTML; + makeSound(buttonInnerHTML); + + buttonAnimation(buttonInnerHTML); + }); + } + + // detecting keyboard press + document.addEventListener("keypress",function(event){ + makeSound(event.key); + + + buttonAnimation(event.key); + }); + function makeSound(key){ + switch (key) { + case "w": + var crash = new Audio("/home/manu/Desktop/Drum Kit Starting Files/sounds/crash.mp3"); + crash.play(); + break; + case "a": + var kick = new Audio("/home/manu/Desktop/Drum Kit Starting Files/sounds/kick-bass.mp3"); + kick.play(); + break; + case "s": + var snare = new Audio("/home/manu/Desktop/Drum Kit Starting Files/sounds/snare.mp3"); + snare.play(); + break; + case "d": + var tom1 = new Audio("/home/manu/Desktop/Drum Kit Starting Files/sounds/tom-1.mp3"); + tom1.play(); + break; + case "j": + var tom2 = new Audio("/home/manu/Desktop/Drum Kit Starting Files/sounds/tom-2.mp3"); + tom2.play(); + break; + case "k": + var tom3 = new Audio("/home/manu/Desktop/Drum Kit Starting Files/sounds/tom-3.mp3"); + tom3.play(); + break; + case "l": + var tom4 = new Audio("/home/manu/Desktop/Drum Kit Starting Files/sounds/tom-4.mp3"); + tom4.play(); + default: + console.log(buttonInnerHTML); + } + } + +function buttonAnimation(currentKey){ + var activeButton=document.querySelector("."+currentKey);//.w,.a,.s and so on. + activeButton.classList.add("pressed"); + setTimeout(function(){activeButton.classList.remove("pressed")},100); +} diff --git a/drumkit/ManuPrasad1208/sounds/crash.mp3 b/drumkit/ManuPrasad1208/sounds/crash.mp3 new file mode 100644 index 000000000..d56806269 Binary files /dev/null and b/drumkit/ManuPrasad1208/sounds/crash.mp3 differ diff --git a/drumkit/ManuPrasad1208/sounds/kick-bass.mp3 b/drumkit/ManuPrasad1208/sounds/kick-bass.mp3 new file mode 100644 index 000000000..faf06c6ce Binary files /dev/null and b/drumkit/ManuPrasad1208/sounds/kick-bass.mp3 differ diff --git a/drumkit/ManuPrasad1208/sounds/snare.mp3 b/drumkit/ManuPrasad1208/sounds/snare.mp3 new file mode 100644 index 000000000..e7cf5b841 Binary files /dev/null and b/drumkit/ManuPrasad1208/sounds/snare.mp3 differ diff --git a/drumkit/ManuPrasad1208/sounds/tom-1.mp3 b/drumkit/ManuPrasad1208/sounds/tom-1.mp3 new file mode 100644 index 000000000..7dc3003d0 Binary files /dev/null and b/drumkit/ManuPrasad1208/sounds/tom-1.mp3 differ diff --git a/drumkit/ManuPrasad1208/sounds/tom-2.mp3 b/drumkit/ManuPrasad1208/sounds/tom-2.mp3 new file mode 100644 index 000000000..f3c04855c Binary files /dev/null and b/drumkit/ManuPrasad1208/sounds/tom-2.mp3 differ diff --git a/drumkit/ManuPrasad1208/sounds/tom-3.mp3 b/drumkit/ManuPrasad1208/sounds/tom-3.mp3 new file mode 100644 index 000000000..38060330a Binary files /dev/null and b/drumkit/ManuPrasad1208/sounds/tom-3.mp3 differ diff --git a/drumkit/ManuPrasad1208/sounds/tom-4.mp3 b/drumkit/ManuPrasad1208/sounds/tom-4.mp3 new file mode 100644 index 000000000..58b04bebb Binary files /dev/null and b/drumkit/ManuPrasad1208/sounds/tom-4.mp3 differ diff --git a/drumkit/ManuPrasad1208/styles.css b/drumkit/ManuPrasad1208/styles.css new file mode 100644 index 000000000..b8bd01b1d --- /dev/null +++ b/drumkit/ManuPrasad1208/styles.css @@ -0,0 +1,88 @@ +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; +} + +.w { + background: url('/home/manu/Desktop/Drum Kit Starting Files/images/crash.png') no-repeat center; + background-size: cover; +} + +.a { + background: url('/home/manu/Desktop/Drum Kit Starting Files/images/kick.png') no-repeat center; + background-size: cover; +} + +.s { + background: url('/home/manu/Desktop/Drum Kit Starting Files/images/snare.png') no-repeat center; + background-size: cover; +} + +.d { + background: url('/home/manu/Desktop/Drum Kit Starting Files/images/tom1.png') no-repeat center; + background-size: cover; +} + +.j { + background: url('/home/manu/Desktop/Drum Kit Starting Files/images/tom2.png') no-repeat center; + background-size: cover; +} + +.k { + background: url('/home/manu/Desktop/Drum Kit Starting Files/images/tom3.png') no-repeat center; + background-size: cover; +} + +.l { + background: url('/home/manu/Desktop/Drum Kit Starting Files/images/tom4.png') no-repeat center; + background-size: cover; +} + +.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; +}