Merge branch 'main' into youtube

Author: harshita2216

DRUM/README.md

@@ -0,0 +1,33 @@
+<h1>DRUM KIT</h1>
+
+<p>Basic Drum Kit made using HTML, CSS, and JavaScript .</p>
+
+### DRUM :
+
+<p>This web app allows you to make your own music with all the beats that are present in the app. You can click on the alphabets or the images that are present on the screen and enjoy the beats. You can also use your keyboard keys to make the music.</p>
+
+<h3>Used Technologies</h3>
+<ul>
+  <li>HTML5</li>
+  <li>CSS3</li>
+  <li>JavaScript</li>
+</ul>
+
+#### Steps to Use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the index.html file
+- Start Using The DRUM
+
+<h3>ScreenShots</h3>
+<br>
+
+![drum](images/drumkit.PNG)

DRUM/app.js

@@ -0,0 +1,56 @@
+window.addEventListener('load', () => {
+  const sounds = document.querySelectorAll('.sound');
+  const pads = document.querySelectorAll('.pads div');
+  const kit = document.querySelector('.kit');
+
+  pads.forEach((pad, index) => {
+    pad.addEventListener('click', function() {
+      sounds[index].currentTime = 0;
+      sounds[index].play();
+    });
+  });
+
+  //the drum can be played with the keys A.S,D,J,K,L
+  document.addEventListener("keydown", function(event) {
+    makeSound(event.key);
+    buttonAnimation(event.key);
+  });
+
+  function makeSound(key) {
+    switch (key) {
+      case 'a':
+        var closed_hithat = new Audio('sounds/sound1.mp3');
+        closed_hithat.play();
+        break;
+      case 's':
+        var kick = new Audio('sounds/sound3.mp3');
+        kick.play();
+        break;
+      case 'd':
+        var clap = new Audio('sounds/sound4.mp3');
+        clap.play();
+        break;
+      case 'j':
+        var open_hithat = new Audio('sounds/sound5.mp3');
+        open_hithat.play();
+        break;
+      case 'k':
+        var snare = new Audio('sounds/sound6.mp3');
+        snare.play();
+        break;
+      case 'l':
+        var crash = new Audio('sounds/sound2.mp3');
+        crash.play();
+        break;
+    }
+  }
+
+
+  function buttonAnimation(currentKey) {
+    var activeButton = document.querySelector("." + currentKey);
+    activeButton.classList.add("pressed");
+    setTimeout(function() {
+      activeButton.classList.remove("pressed");
+    }, 100);
+  };
+});