1-js-drum-kit 70% WIP

corneliugaina · Mar 10, 2019 · 6e63681 · 6e63681
1 parent 52f2255
commit 6e63681
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 0 deletions.
diff --git a/1-javascript-drum-kit/js-drum-kit.css b/1-javascript-drum-kit/js-drum-kit.css
@@ -0,0 +1,51 @@
+html {
+font-size: 10px;
+background: url(https://thumbs.gfycat.com/AbleLiveIcelandichorse-size_restricted.gif) bottom center;
+background-size: cover;
+}
+
+body,html {
+margin: 0;
+padding: 0;
+font-family: sans-serif;
+}
+
+.keys {
+display: flex;
+flex: 1;
+min-height: 100vh;
+align-items: center;
+justify-content: center;
+}
+
+.key {
+border: .4rem solid rgb(0, 0, 0);
+border-radius: .5rem;
+margin: 1rem;
+font-size: 1.5rem;
+padding: 1rem .5rem;
+transition: all .15s ease;
+width: 10rem;
+text-align: center;
+color: white;
+background: rgba(0,0,0,0.4);
+text-shadow: 0 0 .5rem black;
+}
+
+.playing {
+transform: scale(1.5);
+border-color: #ffc600;
+box-shadow: 0 0 1rem #ffc600;
+}
+
+kbd {
+display: block;
+font-size: 4rem;
+}
+
+.sound {
+font-size: 1.2rem;
+text-transform: uppercase;
+letter-spacing: .1rem;
+color: #ffc600;
+}
diff --git a/1-javascript-drum-kit/js-drum-kit.html b/1-javascript-drum-kit/js-drum-kit.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>JS Drum Kit</title>
+    <link rel="stylesheet" href="js-drum-kit.css">
+</head>
+<body>
+    <div class="keys">
+        <div data-key="65" class="key">
+            <kbd>A</kbd>
+            <span class="sound">clap</span>
+        </div>
+        <div data-key="83" class="key">
+            <kbd>S</kbd>
+            <span class="sound">hihat</span>
+        </div>
+        <div data-key="68" class="key">
+            <kbd>D</kbd>
+            <span class="sound">kick</span>
+        </div>
+        <div data-key="70" class="key">
+            <kbd>F</kbd>
+            <span class="sound">openhat</span>
+        </div>
+        <div data-key="71" class="key">
+            <kbd>G</kbd>
+            <span class="sound">boom</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">tom</span>
+        </div>
+        <div data-key="76" class="key">
+            <kbd>L</kbd>
+            <span class="sound">tink</span>
+        </div>
+    </div>
+
+    <audio data-key="65" src="sounds/clap.wav"></audio>
+    <audio data-key="83" src="sounds/hihat.wav"></audio>
+    <audio data-key="68" src="sounds/kick.wav"></audio>
+    <audio data-key="70" src="sounds/openhat.wav"></audio>
+    <audio data-key="71" src="sounds/boom.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/tom.wav"></audio>
+    <audio data-key="76" src="sounds/tink.wav"></audio>
+
+    <script>
+        window.addEventListener('keydown', function (e) { // on ecoute l'event a l'appui d'une touche + lancement de la fonction
+            const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+            const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+            if(!audio) return; // arret du fonctionnement de la fonction     
+            audio.currentTime = 0; // remet le son instantanement a zero
+            audio.play();
+            key.classList.add('playing'); // on va ajouter la classe lors de l'appel de la fonction
+
+        });
+
+        const keys = document.querySelectorAll('.key');
+        keys.forEach(key => keys.addEventListener('transitionend',)
+ );
+    </script>
+
+
+    </body>
+</html>
diff --git a/1-javascript-drum-kit/sounds/boom.wav b/1-javascript-drum-kit/sounds/boom.wav
diff --git a/1-javascript-drum-kit/sounds/clap.wav b/1-javascript-drum-kit/sounds/clap.wav
diff --git a/1-javascript-drum-kit/sounds/hihat.wav b/1-javascript-drum-kit/sounds/hihat.wav
diff --git a/1-javascript-drum-kit/sounds/kick.wav b/1-javascript-drum-kit/sounds/kick.wav
diff --git a/1-javascript-drum-kit/sounds/openhat.wav b/1-javascript-drum-kit/sounds/openhat.wav
diff --git a/1-javascript-drum-kit/sounds/ride.wav b/1-javascript-drum-kit/sounds/ride.wav
diff --git a/1-javascript-drum-kit/sounds/snare.wav b/1-javascript-drum-kit/sounds/snare.wav
diff --git a/1-javascript-drum-kit/sounds/tink.wav b/1-javascript-drum-kit/sounds/tink.wav
diff --git a/1-javascript-drum-kit/sounds/tom.wav b/1-javascript-drum-kit/sounds/tom.wav
diff --git a/index.html b/index.html
diff --git a/scripts.js b/scripts.js
diff --git a/style.css b/style.css