LearnEarn-Fun
diff --git a/‎Drum Kit Starting Files/.DS_Store
6 KB b/‎Drum Kit Starting Files/.DS_Store
6 KB
diff --git a/‎Drum Kit Starting Files/images/crash.png
19.1 KB b/‎Drum Kit Starting Files/images/crash.png
19.1 KB
diff --git a/‎Drum Kit Starting Files/images/kick.png
51.9 KB b/‎Drum Kit Starting Files/images/kick.png
51.9 KB
diff --git a/‎Drum Kit Starting Files/images/snare.png
16.8 KB b/‎Drum Kit Starting Files/images/snare.png
16.8 KB
diff --git a/‎Drum Kit Starting Files/images/tom1.png
23.5 KB b/‎Drum Kit Starting Files/images/tom1.png
23.5 KB
diff --git a/‎Drum Kit Starting Files/images/tom2.png
22.6 KB b/‎Drum Kit Starting Files/images/tom2.png
22.6 KB
diff --git a/‎Drum Kit Starting Files/images/tom3.png
27.8 KB b/‎Drum Kit Starting Files/images/tom3.png
27.8 KB
diff --git a/‎Drum Kit Starting Files/images/tom4.png
28.5 KB b/‎Drum Kit Starting Files/images/tom4.png
28.5 KB
diff --git a/‎Drum Kit Starting Files/index.html
Lines changed: 31 additions & 0 deletions b/‎Drum Kit Starting Files/index.html
Lines changed: 31 additions & 0 deletions
diff --git a/‎Drum Kit Starting Files/index.js
Lines changed: 57 additions & 0 deletions b/‎Drum Kit Starting Files/index.js
Lines changed: 57 additions & 0 deletions
@@ -0,0 +1,31 @@
+<!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>
+  <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 London.
+    <script src="index.js" charset="utf-8"></script>
+  </footer>
+</body>
+
+</html>
@@ -0,0 +1,57 @@
+
+var numberOfDrums=document.querySelectorAll(".drum").length;
+for(var i=0;i<numberOfDrums;i++){
+document.querySelectorAll(".drum")[i].addEventListener("click", function(){
+  var h=this.innerHTML;
+  check(h);
+  buttonAnimation(h);
+});
+
+  }
+document.addEventListener("keydown", function(event){
+  check(event.key);
+  buttonAnimation(event.key);
+});
+
+function check(b){
+   switch (b) {
+     case "w":
+     var voice=new Audio("sounds/crash.mp3");
+     voice.play();
+       break;
+       case "a":
+       var voice=new Audio("sounds/kick-bass.mp3");
+       voice.play();
+       break;
+       case "s":
+       var voice=new Audio("sounds/snare.mp3");
+       voice.play();
+       break;
+       case "d":
+       var voice=new Audio("sounds/tom-1.mp3");
+       voice.play();
+       break;
+       case "j":
+       var voice=new Audio("sounds/tom-2.mp3");
+       voice.play();
+       break;
+       case "k":
+       var voice=new Audio("sounds/tom-3.mp3");
+       voice.play();
+       break;
+       case "l":
+       var voice=new Audio("sounds/tom-4.mp3");
+       voice.play();
+     default:
+     alert("Wrong Key");
+   }
+ }
+
+ function buttonAnimation(currentKey){
+   var activeButton=document.querySelector("."+currentKey);
+   activeButton.classList.add("pressed");
+
+   setTimeout(function(){
+     activeButton.classList.remove("pressed")
+   },100);
+ }