diff --git a/Drum/shivam200446/images/crash.png b/Drum/shivam200446/images/crash.png
new file mode 100644
index 000000000..a992fa0f5
Binary files /dev/null and b/Drum/shivam200446/images/crash.png differ
diff --git a/Drum/shivam200446/images/kick.png b/Drum/shivam200446/images/kick.png
new file mode 100644
index 000000000..b64877e70
Binary files /dev/null and b/Drum/shivam200446/images/kick.png differ
diff --git a/Drum/shivam200446/images/snare.png b/Drum/shivam200446/images/snare.png
new file mode 100644
index 000000000..1e089bacd
Binary files /dev/null and b/Drum/shivam200446/images/snare.png differ
diff --git a/Drum/shivam200446/images/tom1.png b/Drum/shivam200446/images/tom1.png
new file mode 100644
index 000000000..855b21117
Binary files /dev/null and b/Drum/shivam200446/images/tom1.png differ
diff --git a/Drum/shivam200446/images/tom2.png b/Drum/shivam200446/images/tom2.png
new file mode 100644
index 000000000..3e9f3636f
Binary files /dev/null and b/Drum/shivam200446/images/tom2.png differ
diff --git a/Drum/shivam200446/images/tom3.png b/Drum/shivam200446/images/tom3.png
new file mode 100644
index 000000000..762cbf854
Binary files /dev/null and b/Drum/shivam200446/images/tom3.png differ
diff --git a/Drum/shivam200446/images/tom4.png b/Drum/shivam200446/images/tom4.png
new file mode 100644
index 000000000..e79c49e1b
Binary files /dev/null and b/Drum/shivam200446/images/tom4.png differ
diff --git a/Drum/shivam200446/index.html b/Drum/shivam200446/index.html
new file mode 100644
index 000000000..84869f294
--- /dev/null
+++ b/Drum/shivam200446/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ MUSIC Kit
+
+
+
+
+
+ MUSIC 🥁 KiT
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Drum/shivam200446/index.js b/Drum/shivam200446/index.js
new file mode 100644
index 000000000..315a1651f
--- /dev/null
+++ b/Drum/shivam200446/index.js
@@ -0,0 +1,81 @@
+var numberOfDrumButtons = document.querySelectorAll(".drum").length;
+
+for (var i = 0; i < numberOfDrumButtons; i++) {
+
+ document.querySelectorAll(".drum")[i].addEventListener("click", function() {
+
+ var buttonInnerHTML = this.innerHTML;
+
+ makeSound(buttonInnerHTML);
+
+ buttonAnimation(buttonInnerHTML);
+
+ });
+
+}
+
+document.addEventListener("keypress", function(event) {
+
+ makeSound(event.key);
+
+ buttonAnimation(event.key);
+
+});
+
+
+function makeSound(key) {
+
+ switch (key) {
+ case "w":
+ var tom1 = new Audio("sounds/tom-1.mp3");
+ tom1.play();
+ break;
+
+ case "a":
+ var tom2 = new Audio("sounds/tom-2.mp3");
+ tom2.play();
+ break;
+
+ case "s":
+ var tom3 = new Audio('sounds/tom-3.mp3');
+ tom3.play();
+ break;
+
+ case "d":
+ var tom4 = new Audio('sounds/tom-4.mp3');
+ tom4.play();
+ break;
+
+ case "j":
+ var snare = new Audio('sounds/snare.mp3');
+ snare.play();
+ break;
+
+ case "k":
+ var crash = new Audio('sounds/crash.mp3');
+ crash.play();
+ break;
+
+ case "l":
+ var kick = new Audio('sounds/kick-bass.mp3');
+ kick.play();
+ break;
+
+
+ default: console.log(key);
+
+ }
+}
+
+
+function buttonAnimation(currentKey) {
+
+ var activeButton = document.querySelector("." + currentKey);
+
+ activeButton.classList.add("pressed");
+
+ setTimeout(function() {
+ activeButton.classList.remove("pressed");
+ }, 170);
+
+}
diff --git a/Drum/shivam200446/sounds/crash.mp3 b/Drum/shivam200446/sounds/crash.mp3
new file mode 100644
index 000000000..d56806269
Binary files /dev/null and b/Drum/shivam200446/sounds/crash.mp3 differ
diff --git a/Drum/shivam200446/sounds/kick-bass.mp3 b/Drum/shivam200446/sounds/kick-bass.mp3
new file mode 100644
index 000000000..faf06c6ce
Binary files /dev/null and b/Drum/shivam200446/sounds/kick-bass.mp3 differ
diff --git a/Drum/shivam200446/sounds/snare.mp3 b/Drum/shivam200446/sounds/snare.mp3
new file mode 100644
index 000000000..e7cf5b841
Binary files /dev/null and b/Drum/shivam200446/sounds/snare.mp3 differ
diff --git a/Drum/shivam200446/sounds/tom-1.mp3 b/Drum/shivam200446/sounds/tom-1.mp3
new file mode 100644
index 000000000..7dc3003d0
Binary files /dev/null and b/Drum/shivam200446/sounds/tom-1.mp3 differ
diff --git a/Drum/shivam200446/sounds/tom-2.mp3 b/Drum/shivam200446/sounds/tom-2.mp3
new file mode 100644
index 000000000..f3c04855c
Binary files /dev/null and b/Drum/shivam200446/sounds/tom-2.mp3 differ
diff --git a/Drum/shivam200446/sounds/tom-3.mp3 b/Drum/shivam200446/sounds/tom-3.mp3
new file mode 100644
index 000000000..38060330a
Binary files /dev/null and b/Drum/shivam200446/sounds/tom-3.mp3 differ
diff --git a/Drum/shivam200446/sounds/tom-4.mp3 b/Drum/shivam200446/sounds/tom-4.mp3
new file mode 100644
index 000000000..58b04bebb
Binary files /dev/null and b/Drum/shivam200446/sounds/tom-4.mp3 differ
diff --git a/Drum/shivam200446/styles.css b/Drum/shivam200446/styles.css
new file mode 100644
index 000000000..3e2f46d34
--- /dev/null
+++ b/Drum/shivam200446/styles.css
@@ -0,0 +1,128 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* Set a background color */
+body {
+ background-color: #f0f0f0;
+ font-family: 'Arvo', serif;
+}
+
+/* Style the header */
+#title {
+ text-align: center;
+ font-size: 2rem;
+ padding: 2rem;
+ background-color: #333;
+ color: #fff;
+}
+
+/* Style the drum buttons */
+.set {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 2rem;
+}
+
+.drum {
+ border: 2px solid #333;
+ background-color: #fff;
+ font-size: 1.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 0.5rem;
+ cursor: pointer;
+ transition: background-color 0.2s, transform 0.2s;
+ 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;
+ width: 150px;
+ height: 150px;
+
+
+
+}
+
+/* Add hover effect to drum buttons */
+.drum:hover {
+ background-color: #333;
+ color: #fff;
+ transform: scale(1.1);
+}
+
+/* Style the footer */
+footer {
+ text-align: center;
+ background-color: #333;
+ color: #fff;
+ padding: 3rem 0;
+ font-size: 1rem;
+}
+
+.w {
+ background-image: url("images/tom1.png");
+}
+
+.a {
+ background-image: url("images/tom2.png");
+}
+
+.s {
+ background-image: url("images/tom3.png");
+}
+
+.d {
+ background-image: url("images/tom4.png");
+}
+
+.j {
+ background-image: url("images/snare.png");
+}
+
+.k {
+ background-image: url("images/crash.png");
+}
+
+.l {
+ background-image: url("images/kick.png");
+}
+
+.set {
+ margin: 10% auto;
+}
+
+.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;
+}