vinitshahdeo · Taufik-Nitp · Oct 29, 2021 · Oct 29, 2021
diff --git a/DrumKit/images/background.jpg b/DrumKit/images/background.jpg
diff --git a/DrumKit/images/crash.png b/DrumKit/images/crash.png
diff --git a/DrumKit/images/kick.png b/DrumKit/images/kick.png
diff --git a/DrumKit/images/snare.png b/DrumKit/images/snare.png
diff --git a/DrumKit/images/tom1.png b/DrumKit/images/tom1.png
diff --git a/DrumKit/images/tom2.png b/DrumKit/images/tom2.png
diff --git a/DrumKit/images/tom3.png b/DrumKit/images/tom3.png
diff --git a/DrumKit/images/tom4.png b/DrumKit/images/tom4.png
diff --git a/DrumKit/index.html b/DrumKit/index.html
@@ -0,0 +1,33 @@
+<!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>
+
+
+  <h1 id="title">Drum 🥁 Kit</h1>
+  <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 ❤️ in India.
+  <p id="name">  @chandramauli.devs </p>
+  </footer>
+
+  <script src="index.js" charset="utf-8"></script>
+</body>
+
+</html>
diff --git a/DrumKit/index.js 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);
+}
diff --git a/DrumKit/readme.md 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
diff --git a/DrumKit/sounds/kick-bass.mp3 b/DrumKit/sounds/kick-bass.mp3
diff --git a/DrumKit/sounds/snare.mp3 b/DrumKit/sounds/snare.mp3
diff --git a/DrumKit/sounds/tom-1.mp3 b/DrumKit/sounds/tom-1.mp3
diff --git a/DrumKit/sounds/tom-2.mp3 b/DrumKit/sounds/tom-2.mp3
diff --git a/DrumKit/sounds/tom-3.mp3 b/DrumKit/sounds/tom-3.mp3
diff --git a/DrumKit/sounds/tom-4.mp3 b/DrumKit/sounds/tom-4.mp3
diff --git a/DrumKit/styles.css 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;
+  }