acesdit · Tejas-Santosh-Nalawade · Oct 20, 2025 · Oct 20, 2025
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/README.md 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
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/kick.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/kick.png
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/snare.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/snare.png
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/tom1.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom1.png
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/tom2.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom2.png
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/tom3.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom3.png
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/images/tom4.png b/Domains/Frontend/MiniProjects/drum-kit-main/images/tom4.png
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/index.html b/Domains/Frontend/MiniProjects/drum-kit-main/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8">
+  <title>Drum Kit</title>
+  <link rel="stylesheet" href="styles.css">
+  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
+</head>
+
+<body>
+
+  <h1 id="title">Drum 🥁 Kit</h1>
+  <p>Click the buttons or press the keyboard!!</p>
+  <div class="set">
+    <button class="w drum">w</button>
+    <button class="a drum">a</button>
+    <button class="s drum">s</button>
+    <button class="d drum">d</button>
+    <button class="j drum">j</button>
+    <button class="k drum">k</button>
+    <button class="l drum">l</button>
+  </div>
+
+
+  <footer>
+    Made With Love
+  </footer>
+  <script src="index.js" charset="utf-8"></script>
+</body>
+
+</html>
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/index.js 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);
+}
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/crash.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/crash.mp3
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/kick-bass.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/kick-bass.mp3
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/snare.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/snare.mp3
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-1.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-1.mp3
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-2.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-2.mp3
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-3.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-3.mp3
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-4.mp3 b/Domains/Frontend/MiniProjects/drum-kit-main/sounds/tom-4.mp3
diff --git a/Domains/Frontend/MiniProjects/drum-kit-main/styles.css 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;
+}