Merge pull request #369 from iamrahulmahato/drum

Drum
Dezenix · May 30, 2022 · 3283c14 · 3283c14
2 parents e92e5d6 + 11bbbb7
commit 3283c14
Show file tree

Hide file tree

Showing 20 changed files with 237 additions and 0 deletions.
diff --git a/Drum/README.md b/Drum/README.md
@@ -0,0 +1,51 @@
+<p align="center">
+    <img alt="" height="80" src="./images/256px-Icon-notepad.svg.png">
+  </a>
+</p>
+<h1 align="center">DRUM</h1>
+
+<div align="center">
+ Play different sound with different button
+</div>
+
+
+
+## Description:
+
+Drum is a Drum set where you get all the set of drum with there sound
+---
+
+## Tech Stack Used:
+HTML5,CSS3,JavaScript
+
+---
+
+## It Look's Like:
+
+![image](./images/Web%20capture_29-5-2022_122746_127.0.0.1.jpeg)
+
+---
+
+
+## **Quick Start**
+- Clone this repository
+
+``` 
+git clone https://github.com/Dezenix/frontend-html-css-js
+```
+- Change Directory
+
+```
+cd Change Drum
+```
+
+```
+cd index.html
+```
+> open ```index.html``` file in your default Browser.
+---
+## **Installation and Dependencies**
+- Install any Code Editors like : VS Code, Atom, etc.
+- Then follow the ```Quick Start``` steps given above and open the 
+Change Drum in your Code Editor.
+- Then open ```index.html``` file then edit and save it .
diff --git a/Drum/css/style.css b/Drum/css/style.css
@@ -0,0 +1,86 @@
+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;
+}
+
+.w {
+    background-image: url("../images/tom1.png");
+}
+
+.a {
+    background-image: url("../images/tom2.png");
+}
+
+.s {
+    background-image: url("../images/tom3.png");
+}
+
+.d {
+    background-image: url("../images/tom4.png");
+}
+
+.j {
+    background-image: url("../images/crash.png");
+}
+
+.k {
+    background-image: url("../images/kick.png");
+}
+
+.l {
+    background-image: url("../images/snare.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;
+}
+
+.footer-icon {
+    color: #fff;
+    margin-right: 1%;
+    font-size: 1.2rem;
+}
diff --git a/Drum/images/256px-Icon-notepad.svg.png b/Drum/images/256px-Icon-notepad.svg.png
diff --git a/Drum/images/Web capture_29-5-2022_122746_127.0.0.1.jpeg b/Drum/images/Web capture_29-5-2022_122746_127.0.0.1.jpeg
diff --git a/Drum/images/crash.png b/Drum/images/crash.png
diff --git a/Drum/images/kick.png b/Drum/images/kick.png
diff --git a/Drum/images/snare.png b/Drum/images/snare.png
diff --git a/Drum/images/tom1.png b/Drum/images/tom1.png
diff --git a/Drum/images/tom2.png b/Drum/images/tom2.png
diff --git a/Drum/images/tom3.png b/Drum/images/tom3.png
diff --git a/Drum/images/tom4.png b/Drum/images/tom4.png
diff --git a/Drum/index.html b/Drum/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+    <meta charset="utf-8">
+    <title>Drum</title>
+    <link rel="stylesheet" href="./css/style.css">
+    <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
+
+    <script src="https://kit.fontawesome.com/0dbe475b5e.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+
+    <h1 id="title">Drum</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>
+
+    <script src="./js/script.js">
+    </script>
+</body>
+
+</html>
diff --git a/Drum/js/script.js b/Drum/js/script.js
@@ -0,0 +1,70 @@
+var drumButton = document.querySelectorAll("button");
+
+for (var i = 0; i < drumButton.length; i++) {
+    drumButton[i].addEventListener("click", function() {
+        var buttonInnerHTML = this.innerHTML;
+        makeSound(buttonInnerHTML);
+        buttonAnimation(buttonInnerHTML);
+
+    });
+
+}
+
+
+
+document.addEventListener("keydown", function(event) {
+    makeSound(event.key);
+    buttonAnimation(event.key);
+})
+
+
+
+
+function makeSound(key) {
+    switch (key) {
+        case "w":
+            var tom1 = new Audio("sounds/tom-1.mp3");
+            tom1.play();
+            break;
+
+        case "a":
+            var tom2 = new Audio("sounds/tom-2.mp3");
+            tom2.play();
+            break;
+
+        case "s":
+            var tom3 = new Audio("sounds/tom-3.mp3");
+            tom3.play();
+            break;
+
+        case "d":
+            var tom4 = new Audio("sounds/tom-4.mp3");
+            tom4.play();
+            break;
+
+        case "j":
+            var crash = new Audio("sounds/crash.mp3");
+            crash.play();
+            break;
+
+        case "k":
+            var kick = new Audio("sounds/kick-bass.mp3");
+            kick.play();
+            break
+
+        case "l":
+            var snare = new Audio("sounds/snare.mp3");
+            snare.play();
+            break;
+    }
+}
+
+function buttonAnimation(currentKey) {
+    var activeButton = document.querySelector("." + currentKey);
+    activeButton.classList.add("pressed");
+
+    setTimeout(function() {
+        activeButton.classList.remove("pressed");
+    }, 100);
+
+}
diff --git a/Drum/sounds/crash.mp3 b/Drum/sounds/crash.mp3
diff --git a/Drum/sounds/kick-bass.mp3 b/Drum/sounds/kick-bass.mp3
diff --git a/Drum/sounds/snare.mp3 b/Drum/sounds/snare.mp3
diff --git a/Drum/sounds/tom-1.mp3 b/Drum/sounds/tom-1.mp3
diff --git a/Drum/sounds/tom-2.mp3 b/Drum/sounds/tom-2.mp3
diff --git a/Drum/sounds/tom-3.mp3 b/Drum/sounds/tom-3.mp3
diff --git a/Drum/sounds/tom-4.mp3 b/Drum/sounds/tom-4.mp3