diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/README.md b/Domains/Frontend/MiniProjects/drum-kit-main/README.md new file mode 100644 index 00000000..adad5b50 --- /dev/null +++ b/Domains/Frontend/MiniProjects/drum-kit-main/README.md @@ -0,0 +1,32 @@ +# Drum Kit +**Contributor:** Utkarsh-660 + +## Description +The **Drum Kit** is a fun and interactive web project built using **HTML**, **CSS**, and **JavaScript**. +It allows users to play different drum sounds by either **clicking on drum buttons** or **pressing specific keys** on the keyboard. +Each key corresponds to a unique drum sound, creating a simple virtual drum experience right in the browser! + +## How to Run +1. **Clone this repository** + ```bash + git clone https://github.com/Utkarsh-660/Drum-Kit.git + cd Drum-Kit +2. Run the app +• Simply open the index.html file in your web browser. +• Click on drum buttons or press the corresponding keys to play sounds. + +| Key | Sound | +| --- | --------- | +| W | Tom 1 | +| A | Tom 2 | +| S | Tom 3 | +| D | Tom 4 | +| J | Snare | +| K | Crash | +| L | Kick Bass | + +Technologies Used + +•HTML5 +•CSS3 +•JavaScript (ES6) diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/crash.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/crash.png new file mode 100644 index 00000000..a992fa0f Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/images/crash.png differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/kick.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/kick.png new file mode 100644 index 00000000..b64877e7 Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/images/kick.png differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/snare.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/snare.png new file mode 100644 index 00000000..1e089bac Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/images/snare.png differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/tom1.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom1.png new file mode 100644 index 00000000..855b2111 Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom1.png differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/tom2.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom2.png new file mode 100644 index 00000000..3e9f3636 Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom2.png differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/tom3.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom3.png new file mode 100644 index 00000000..762cbf85 Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom3.png differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/tom4.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom4.png new file mode 100644 index 00000000..e79c49e1 Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom4.png differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/index.html b/Domains/Frontend/MiniProjects/drum-kit-main/index.html new file mode 100644 index 00000000..a282d0ce --- /dev/null +++ b/Domains/Frontend/MiniProjects/drum-kit-main/index.html @@ -0,0 +1,32 @@ + + + + + + Drum Kit + + + + + + +

Drum 🥁 Kit

+

Click the buttons or press the keyboard!!

+
+ + + + + + + +
+ + + + + + + diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/index.js b/Domains/Frontend/MiniProjects/drum-kit-main/index.js new file mode 100644 index 00000000..85e56c03 --- /dev/null +++ b/Domains/Frontend/MiniProjects/drum-kit-main/index.js @@ -0,0 +1,73 @@ +// alert("Hello"); + + //detecting keyboard press------ + document.addEventListener("keydown", function(event) { + makeSound(event.key); + buttonAnimation(event.key); + +}); + + +noOfDrums=document.querySelectorAll(".drum").length; +for(var i=0; i < noOfDrums ; i++) +{ + //detecting button press----- + + document.querySelectorAll(".drum")[i].addEventListener("click", function() { + // console.log(this.innerHTML); + var buttonInnerHTML= this.innerHTML; + + makeSound(buttonInnerHTML); + + // animation on clicking----- + + buttonAnimation(buttonInnerHTML); + }); + +} + + +function makeSound(key) { + switch(key) { + case "w": var crash= new Audio('sounds/crash.mp3'); + crash.play(); + break; + + case "a" : var kickBass= new Audio('sounds/kick-bass.mp3'); + kickBass.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(); + + default: console.log(key) ; + } + + + +} + + +function buttonAnimation(keyPressed) { + var activeButton= document.querySelector("." + keyPressed); + activeButton.classList.add("pressed"); + setTimeout(function() { + activeButton.classList.remove("pressed")} + , 100); +} \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/crash.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/crash.mp3 new file mode 100644 index 00000000..d5680626 Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/crash.mp3 differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/kick-bass.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/kick-bass.mp3 new file mode 100644 index 00000000..faf06c6c Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/kick-bass.mp3 differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/snare.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/snare.mp3 new file mode 100644 index 00000000..e7cf5b84 Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/snare.mp3 differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-1.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-1.mp3 new file mode 100644 index 00000000..7dc3003d Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-1.mp3 differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-2.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-2.mp3 new file mode 100644 index 00000000..f3c04855 Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-2.mp3 differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-3.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-3.mp3 new file mode 100644 index 00000000..38060330 Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-3.mp3 differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-4.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-4.mp3 new file mode 100644 index 00000000..58b04beb Binary files /dev/null and b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-4.mp3 differ diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/styles.css b/Domains/Frontend/MiniProjects/drum-kit-main/styles.css new file mode 100644 index 00000000..8a9f6792 --- /dev/null +++ b/Domains/Frontend/MiniProjects/drum-kit-main/styles.css @@ -0,0 +1,88 @@ +body { + text-align: center; + background-color: rgb(59, 83, 83); +} + +h1 { + font-size: 5rem; + color: #d2d4d7; + font-family: "Arvo", cursive; + text-shadow: 3px 0 #DA0463; + +} + +p { + font-size: 2rem; + color:#ededed; + text-shadow: 1px 0 #DA0463; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +footer { + color: #c2c4b1; + font-family: sans-serif; +} + +.w { + background-image: url("images/crash.png"); +} + +.a { + background-image: url("images/kick.png"); +} + +.s { + background-image: url("images/snare.png"); +} + +.d { + background-image: url("images/tom1.png"); +} + +.j { + background-image: url("images/tom2.png"); +} + +.k { + background-image: url("images/tom3.png"); +} + +.l { + background-image: url("images/tom4.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: rgb(211, 194, 194); +} + +.drum { + outline: none; + border: 10px solid #404B69; + font-size: 5rem; + font-family: 'Arvo', cursive; + line-height: 2; + font-weight: 900; + color: #f0ff6e; + text-shadow: 3px 0 #050505; + border-radius: 15px; + display: inline-block; + width: 150px; + height: 150px; + text-align: center; + margin: 10px; + background-color: white; +}