OpenSouce-LNMIIT
diff --git a/‎drums/bgd.jpg
218 KB b/‎drums/bgd.jpg
218 KB
diff --git a/‎drums/drums.html
+76 b/‎drums/drums.html
+76
diff --git a/‎drums/sounds/boom.wav
130 KB b/‎drums/sounds/boom.wav
130 KB
diff --git a/‎drums/sounds/clap.wav
63.4 KB b/‎drums/sounds/clap.wav
63.4 KB
diff --git a/‎drums/sounds/hihat.wav
50.9 KB b/‎drums/sounds/hihat.wav
50.9 KB
diff --git a/‎drums/sounds/kick.wav
15.2 KB b/‎drums/sounds/kick.wav
15.2 KB
diff --git a/‎drums/sounds/openhat.wav
238 KB b/‎drums/sounds/openhat.wav
238 KB
diff --git a/‎drums/sounds/ride.wav
429 KB b/‎drums/sounds/ride.wav
429 KB
diff --git a/‎drums/sounds/snare.wav
32.6 KB b/‎drums/sounds/snare.wav
32.6 KB
diff --git a/‎drums/sounds/tink.wav
5.32 KB b/‎drums/sounds/tink.wav
5.32 KB
diff --git a/‎drums/sounds/tom.wav
105 KB b/‎drums/sounds/tom.wav
105 KB
diff --git a/‎drums/style.css
+49 b/‎drums/style.css
+49
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" width="device-width" initial-scale="1.0">
+    <title>DRUMS</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <div data-key="65" class="key" id="key">
+            <kbd>A</kbd>
+            <span class="sound">BOOM</span></div>
+        <div data-key="83" class="key">
+            <kbd>S</kbd>
+            <span class="sound">CLAP</span> </div>
+        <div data-key="68" class="key">
+            <kbd>D</kbd>
+            <span class="sound">HIHAT</span> </div>
+        <div data-key="70" class="key">
+            <kbd>F</kbd>
+            <span class="sound">KICK</span> </div>
+        <div data-key="71" class="key">
+            <kbd>G</kbd>
+            <span class="sound">OPENHAT</span> </div>
+        <div data-key="72" class="key">
+            <kbd>H</kbd>
+            <span class="sound">RIDE</span> </div>
+        <div data-key="74" class="key">
+            <kbd>J</kbd>
+            <span class="sound">SNARE</span></div>
+        <div data-key="75" class="key">
+            <kbd>K</kbd>
+            <span class="sound">TINK</span> </div>
+        <div data-key="76" class="key">
+            <kbd>L</kbd>
+            <span class="sound">TOM</span></div>
+    </div>
+    <audio data-key="65" src="sounds/boom.wav"></audio>
+    <audio data-key="83" src="sounds/clap.wav"></audio>
+    <audio data-key="68" src="sounds/hihat.wav"></audio>
+    <audio data-key="70" src="sounds/kick.wav"></audio>
+    <audio data-key="71" src="sounds/openhat.wav"></audio>
+    <audio data-key="72" src="sounds/ride.wav"></audio>
+    <audio data-key="74" src="sounds/snare.wav"></audio>
+    <audio data-key="75" src="sounds/tink.wav"></audio>
+    <audio data-key="76" src="sounds/tom.wav"></audio>
+    
+    <script>
+    var i;
+
+    function addsound(e) {
+        var audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+        var key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+        if (!audio) return;
+        audio.currentTime = 0;
+        audio.play();
+        /* var jq = $.noConflict();
+         $(window).keydown(function() {
+            key.addClass("playing");
+         });*/
+        key.classList.add('playing');
+    }
+
+    function removeTransition(e) {
+        this.classList.remove('playing');
+    }
+    
+    const keys = Array.from(document.querySelectorAll(".key"));
+    keys.forEach(key => key.addEventListener('transitionend', removeTransition))
+    window.addEventListener('keydown', addsound);
+    </script>
+
+</html>
@@ -0,0 +1,49 @@
+body {
+    margin: 0;
+    padding: 0;
+    background: url(bgd.jpg) no-repeat;
+    overflow-x: hidden;
+    background-size: cover;
+    font-family: sans-serif;
+}
+
+.container {
+    padding-top: 300px;
+    width: 100%;
+    border: 2px solid black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.key {
+    padding: 5px;
+    margin-right: 5px;
+    border: 4px solid grey;
+    border-radius: 15px;
+    text-align: center;
+    transition: all 0.2s ease-in-out;
+    width: 10%;
+    align-self: center;
+    text-shadow: 2px 2px 2px red;
+	background: rgba(0, 0, 0, 0.5);
+}
+
+kbd {
+    display: block;
+    font:italic bold 50px monospace;
+    color: white;
+}
+
+.sound {
+    font-size: 20px;
+    color: red;
+    word-wrap: nowrap;
+}
+
+.playing {
+    border-color:orange;
+    box-shadow: 2px 2px 15px orange;
+
+    transform: scale(1.1, 1.1);
+}