thinkswell · PBJI · Oct 8, 2023 · Oct 8, 2023
diff --git a/Drum/aditya7302/README.md b/Drum/aditya7302/README.md
@@ -0,0 +1,3 @@
+This is a simple drum kit project using html, css and js to implement drum kit sound.
+It is very simple to implement and use just click on the html file and it will work.
+![ScreenShot](image.png)
diff --git a/Drum/aditya7302/css/styles.css b/Drum/aditya7302/css/styles.css
@@ -0,0 +1,48 @@
+body{
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+    justify-content: center;
+    background-color: pink;
+}
+
+h1{
+    font-size: 50px;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    letter-spacing: 4px;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+    white-space: nowrap;
+}
+
+.container{
+    text-align: center;
+}
+
+.btn{
+    padding: 30px 50px;
+    background-color: white;
+    border: none;
+    margin: 10px;
+    font-size: 30px;
+    min-width: 200px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    background-image: url("/javascript_projects/drum_kits/img/tom.png");
+    background-size: cover;
+    color: white;
+    font-family: cursive;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+    cursor: pointer;
+    text-transform: capitalize;
+}
+
+.btn:hover{
+    color: pink;
+}
+
+.btn:active{
+    background-size: 105%;
+}
diff --git a/Drum/aditya7302/image.png b/Drum/aditya7302/image.png
diff --git a/Drum/aditya7302/img/crash.png b/Drum/aditya7302/img/crash.png
diff --git a/Drum/aditya7302/img/kick.png b/Drum/aditya7302/img/kick.png
diff --git a/Drum/aditya7302/img/snare.png b/Drum/aditya7302/img/snare.png
diff --git a/Drum/aditya7302/img/tom.png b/Drum/aditya7302/img/tom.png
diff --git a/Drum/aditya7302/index.html b/Drum/aditya7302/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/styles.css">
+    <script src="index.js" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <title>Drum Kits</title>
+</head>
+<body>
+    <h1>Drum Kits
+        <i class="fa-solid fa-drum"></i>
+    </h1>
+    <div class="container">
+
+
+    </div>
+</body>
+</html>
diff --git a/Drum/aditya7302/index.js b/Drum/aditya7302/index.js
@@ -0,0 +1,25 @@
+const kits = ["crash" , "kick", "snare", "tom"];
+const containerEl = document.querySelector(".container");
+
+kits.forEach((kit)=>{
+    const btnEl = document.createElement("button");
+    btnEl.classList.add("btn");
+    btnEl.innerText = kit;
+    btnEl.style.backgroundImage = "url(img/"+kit+".png)";
+    containerEl.appendChild(btnEl);
+    const audioEl = document.createElement("audio");
+    audioEl.src = "sound/"+kit+".mp3";
+    containerEl.appendChild(audioEl);
+    btnEl.addEventListener("click",()=>{
+        audioEl.play();
+    });
+    window.addEventListener("keydown",(event)=>{
+        if(event.key === kit.slice(0,1)){
+            audioEl.play();
+            btnEl.style.transform = "scale(0.9)";
+            setTimeout(()=>{
+                btnEl.style.transform = "scale(1)";
+            },100)
+        }
+    })
+});
diff --git a/Drum/aditya7302/sound/crash.mp3 b/Drum/aditya7302/sound/crash.mp3
diff --git a/Drum/aditya7302/sound/kick.mp3 b/Drum/aditya7302/sound/kick.mp3
diff --git a/Drum/aditya7302/sound/snare.mp3 b/Drum/aditya7302/sound/snare.mp3
diff --git a/Drum/aditya7302/sound/tom.mp3 b/Drum/aditya7302/sound/tom.mp3