drum kit uploaded

AkashKobal · Jul 4, 2024 · 79e4975 · 79e4975
1 parent 8c07eba
commit 79e4975
Show file tree

Hide file tree

Showing 41 changed files with 295 additions and 0 deletions.
diff --git a/Drum Kit Starting Files/.DS_Store b/Drum Kit Starting Files/.DS_Store
diff --git a/Drum Kit Starting Files/images/crash.png b/Drum Kit Starting Files/images/crash.png
diff --git a/Drum Kit Starting Files/images/kick.png b/Drum Kit Starting Files/images/kick.png
diff --git a/Drum Kit Starting Files/images/snare.png b/Drum Kit Starting Files/images/snare.png
diff --git a/Drum Kit Starting Files/images/tom1.png b/Drum Kit Starting Files/images/tom1.png
diff --git a/Drum Kit Starting Files/images/tom2.png b/Drum Kit Starting Files/images/tom2.png
diff --git a/Drum Kit Starting Files/images/tom3.png b/Drum Kit Starting Files/images/tom3.png
diff --git a/Drum Kit Starting Files/images/tom4.png b/Drum Kit Starting Files/images/tom4.png
diff --git a/Drum Kit Starting Files/index.html b/Drum Kit Starting Files/index.html
@@ -0,0 +1,50 @@
+<!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>
+  <script>
+
+  </script>
+  <h1 id="title">Drum 🥁 Kit</h1>
+  <div class="set">
+    <button class="q drum" id="q">q</button>
+    <button class="w drum" id="w">w</button>
+    <button class="e drum" id="e">e</button>
+    <button class="r drum" id="r">r</button>
+    <button class="t drum" id="t">t</button>
+    <button class="y drum" id="y">y</button>
+    <button class="u drum" id="u">u</button>
+    <button class="i drum" id="i">i</button>
+    <button class="o drum" id="o">o</button>
+    <button class="p drum" id="p">p</button><br>
+    <button class="a drum" id="a">a</button>
+    <button class="s drum" id="s">s</button>
+    <button class="d drum" id="d">d</button>
+    <button class="f drum" id="f">f</button>
+    <button class="g drum" id="g">g</button>
+    <button class="h drum" id="h">h</button>
+    <button class="j drum" id="j">j</button>
+    <button class="k drum" id="k">k</button>
+    <button class="l drum" id="l">l</button><br>
+    <button class="z drum" id="z">z</button>
+    <button class="x drum" id="x">x</button>
+    <button class="c drum" id="c">c</button>
+    <button class="v drum" id="v">v</button>
+    <button class="b drum" id="b">b</button>
+    <button class="n drum" id="n">n</button>
+    <button class="m drum" id="m">m</button>
+  </div>
+  <footer>
+    Made with ❤️ in India.
+  </footer>
+  <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/Drum Kit Starting Files/index.js b/Drum Kit Starting Files/index.js
@@ -0,0 +1,187 @@
+// document.querySelector("button").addEventListener("click",handleClicked);
+// function handleClicked(){
+// alert("I got clicked");
+//   }
+
+// dont used paranthesis inside the event listeer because it will call the function immediately after the button is loaded
+
+// document.querySelector("button").addEventListener("click",function(){
+//   alert("I got clicked");
+// });
+
+/*
+document.getElementsByTagName("button")[2].addEventListener("click",function(){
+  alert("I got clicked");
+});
+
+*/
+
+// applying function to all the buttons, whose class name contain drum
+var numbberOfDrums = document.querySelectorAll(".drum").length;
+var drumButton = document.querySelectorAll(".drum");
+var q = document.getElementById("q");
+
+
+// for mouse click
+
+for (var i = 0; i < numbberOfDrums; i++) {
+
+    document.querySelectorAll(".drum")[i].addEventListener("click", function () {
+        // alert("I got clicked");
+
+        // var audio = new Audio("sounds/tom-1.mp3");
+        // audio.play();
+
+        /* 
+        this : is a identity of a button that triggered when we click on button
+        we can use this to find out which button is clicked and play the sound
+    
+        */
+        //    console.log(this);
+        // console.log(this.innerHTML);
+
+        // this.style.color = "yellow";
+
+        var buttonInnerHTML = this.innerHTML;
+
+        makeSound(buttonInnerHTML);
+        buttonAnimation(buttonInnerHTML);
+    });
+
+}
+
+// Using Keyboard Event Listeners to Check for Key Presses
+document.addEventListener("keypress", function (event) {
+
+    // event : is a object that contains information about the event that occured
+    // example which keyboard key is pressed and information about the key
+    // console.log(event);
+    // console.log(event.key);
+    // alert("Key was pressed");
+    makeSound(event.key);
+    buttonAnimation(event.key);
+});
+
+function makeSound(key) {
+    switch (key) {
+        case "q":
+            var audio = new Audio("sounds/tom-1.mp3");
+            audio.play();
+            break;
+        case "w":
+            var audio = new Audio("sounds/tom-2.mp3");
+            audio.play();
+            break;
+        case "e":
+            var audio = new Audio("sounds/tom-3.mp3");
+            audio.play();
+            break;
+        case "r":
+            var audio = new Audio("sounds/tom-4.mp3");
+            audio.play();
+            break;
+        case "t":
+            var audio = new Audio("sounds/snare.mp3");
+            audio.play();
+            break;
+        case "y":
+            var audio = new Audio("sounds/crash.mp3");
+            audio.play();
+            break;
+        case "u":
+            var audio = new Audio("sounds/kick-bass.mp3");
+            audio.play();
+            break;
+        case "i":
+            var audio = new Audio("sounds/tom-1.mp3");
+            audio.play();
+            break;
+        case "o":
+            var audio = new Audio("sounds/tom-2.mp3");
+            audio.play();
+            break;
+        case "p":
+            var audio = new Audio("sounds/tom-3.mp3");
+            audio.play();
+            break;
+        case "a":
+            var audio = new Audio("sounds/tom-4.mp3");
+            audio.play();
+            break;
+        case "s":
+            var audio = new Audio("sounds/snare.mp3");
+            audio.play();
+            break;
+        case "d":
+            var audio = new Audio("sounds/crash.mp3");
+            audio.play();
+            break;
+        case "f":
+            var audio = new Audio("sounds/kick-bass.mp3");
+            audio.play();
+            break;
+        case "g":
+            var audio = new Audio("sounds/tom-1.mp3");
+            audio.play();
+            break;
+        case "h":
+            var audio = new Audio("sounds/tom-2.mp3");
+            audio.play();
+            break;
+        case "j":
+            var audio = new Audio("sounds/tom-3.mp3");
+            audio.play();
+            break;
+        case "k":
+            var audio = new Audio("sounds/tom-4.mp3");
+            audio.play();
+            break;
+        case "l":
+            var audio = new Audio("sounds/snare.mp3");
+            audio.play();
+            break;
+        case "z":
+            var audio = new Audio("sounds/crash.mp3");
+            audio.play();
+            break;
+        case "x":
+            var audio = new Audio("sounds/kick-bass.mp3");
+            audio.play();
+            break;
+        case "c":
+            var audio = new Audio("sounds/tom-1.mp3");
+            audio.play();
+            break;
+        case "v":
+            var audio = new Audio("sounds/tom-2.mp3");
+            audio.play();
+            break;
+        case "b":
+            var audio = new Audio("sounds/tom-3.mp3");
+            audio.play();
+            break;
+        case "n":
+            var audio = new Audio("sounds/tom-4.mp3");
+            audio.play();
+            break;
+        case "m":
+            var audio = new Audio("sounds/snare.mp3");
+            audio.play();
+            break;
+
+        default: alert("wrong key pressed");
+    }
+
+}
+
+
+// adding animation to the buttons
+function buttonAnimation(currentKey){
+   var activate =  document.querySelector("." + currentKey);
+   activate.classList.add("pressed");
+// button become normal after 100 milisecond
+   setTimeout(function(){
+       activate.classList.remove("pressed");
+   },100);
+
+}
diff --git a/Drum Kit Starting Files/sounds/crash.mp3 b/Drum Kit Starting Files/sounds/crash.mp3
diff --git a/Drum Kit Starting Files/sounds/kick-bass.mp3 b/Drum Kit Starting Files/sounds/kick-bass.mp3
diff --git a/Drum Kit Starting Files/sounds/q.wav b/Drum Kit Starting Files/sounds/q.wav
diff --git a/Drum Kit Starting Files/sounds/snare.mp3 b/Drum Kit Starting Files/sounds/snare.mp3
diff --git a/Drum Kit Starting Files/sounds/tom-1.mp3 b/Drum Kit Starting Files/sounds/tom-1.mp3
diff --git a/Drum Kit Starting Files/sounds/tom-2.mp3 b/Drum Kit Starting Files/sounds/tom-2.mp3
diff --git a/Drum Kit Starting Files/sounds/tom-3.mp3 b/Drum Kit Starting Files/sounds/tom-3.mp3
diff --git a/Drum Kit Starting Files/sounds/tom-4.mp3 b/Drum Kit Starting Files/sounds/tom-4.mp3
diff --git a/Drum Kit Starting Files/styles.css b/Drum Kit Starting Files/styles.css
@@ -0,0 +1,58 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  text-align: center;
+  background-color: #09132eee;
+
+}
+
+h1 {
+  font-size: 5rem;
+  color: #DBEDF3;
+  font-family: "Arvo", cursive;
+  text-shadow: 3px 0 #DA0463;
+
+}
+
+footer {
+  color: #DBEDF3;
+  font-family: sans-serif;
+}
+
+.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;
+  font-weight: 900;
+  color: #DA0463;
+  text-shadow: 3px 0 #DBEDF3;
+  border-radius: 15px;
+  display: inline-block;
+  width: 150px;
+  height: 150px;
+  text-align: center;
+  margin: 5px;
+  background-color: white;
+}
diff --git a/Screenshot (351).png b/Screenshot (351).png
diff --git a/__MACOSX/._Drum Kit Starting Files b/__MACOSX/._Drum Kit Starting Files
diff --git a/__MACOSX/Drum Kit Starting Files/._.DS_Store b/__MACOSX/Drum Kit Starting Files/._.DS_Store
diff --git a/__MACOSX/Drum Kit Starting Files/._images b/__MACOSX/Drum Kit Starting Files/._images
diff --git a/__MACOSX/Drum Kit Starting Files/._index.html b/__MACOSX/Drum Kit Starting Files/._index.html
diff --git a/__MACOSX/Drum Kit Starting Files/._index.js b/__MACOSX/Drum Kit Starting Files/._index.js
diff --git a/__MACOSX/Drum Kit Starting Files/._sounds b/__MACOSX/Drum Kit Starting Files/._sounds
diff --git a/__MACOSX/Drum Kit Starting Files/._styles.css b/__MACOSX/Drum Kit Starting Files/._styles.css
diff --git a/__MACOSX/Drum Kit Starting Files/images/._crash.png b/__MACOSX/Drum Kit Starting Files/images/._crash.png
diff --git a/__MACOSX/Drum Kit Starting Files/images/._kick.png b/__MACOSX/Drum Kit Starting Files/images/._kick.png
diff --git a/__MACOSX/Drum Kit Starting Files/images/._snare.png b/__MACOSX/Drum Kit Starting Files/images/._snare.png
diff --git a/__MACOSX/Drum Kit Starting Files/images/._tom1.png b/__MACOSX/Drum Kit Starting Files/images/._tom1.png
diff --git a/__MACOSX/Drum Kit Starting Files/images/._tom2.png b/__MACOSX/Drum Kit Starting Files/images/._tom2.png
diff --git a/__MACOSX/Drum Kit Starting Files/images/._tom3.png b/__MACOSX/Drum Kit Starting Files/images/._tom3.png
diff --git a/__MACOSX/Drum Kit Starting Files/images/._tom4.png b/__MACOSX/Drum Kit Starting Files/images/._tom4.png
diff --git a/__MACOSX/Drum Kit Starting Files/sounds/._crash.mp3 b/__MACOSX/Drum Kit Starting Files/sounds/._crash.mp3
diff --git a/__MACOSX/Drum Kit Starting Files/sounds/._kick-bass.mp3 b/__MACOSX/Drum Kit Starting Files/sounds/._kick-bass.mp3
diff --git a/__MACOSX/Drum Kit Starting Files/sounds/._snare.mp3 b/__MACOSX/Drum Kit Starting Files/sounds/._snare.mp3
diff --git a/__MACOSX/Drum Kit Starting Files/sounds/._tom-1.mp3 b/__MACOSX/Drum Kit Starting Files/sounds/._tom-1.mp3
diff --git a/__MACOSX/Drum Kit Starting Files/sounds/._tom-2.mp3 b/__MACOSX/Drum Kit Starting Files/sounds/._tom-2.mp3
diff --git a/__MACOSX/Drum Kit Starting Files/sounds/._tom-3.mp3 b/__MACOSX/Drum Kit Starting Files/sounds/._tom-3.mp3
diff --git a/__MACOSX/Drum Kit Starting Files/sounds/._tom-4.mp3 b/__MACOSX/Drum Kit Starting Files/sounds/._tom-4.mp3