├── raw-files
    ├── starter.txt
    ├── sounds
    │   ├── boom.wav
    │   ├── clap.wav
    │   ├── kick.wav
    │   ├── ride.wav
    │   ├── tink.wav
    │   ├── tom.wav
    │   ├── hihat.wav
    │   ├── snare.wav
    │   └── openhat.wav
    ├── style.css
    ├── index-START.html
    └── index-FINISHED.html
├── Meta-data
└── README.md


/raw-files/starter.txt:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/Meta-data:
--------------------------------------------------------------------------------
1 | - Status: On hold.
2 | - Reason: Waiting for it.
3 | 


--------------------------------------------------------------------------------
/raw-files/sounds/boom.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jishanshaikh4/drum-kit/HEAD/raw-files/sounds/boom.wav


--------------------------------------------------------------------------------
/raw-files/sounds/clap.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jishanshaikh4/drum-kit/HEAD/raw-files/sounds/clap.wav


--------------------------------------------------------------------------------
/raw-files/sounds/kick.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jishanshaikh4/drum-kit/HEAD/raw-files/sounds/kick.wav


--------------------------------------------------------------------------------
/raw-files/sounds/ride.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jishanshaikh4/drum-kit/HEAD/raw-files/sounds/ride.wav


--------------------------------------------------------------------------------
/raw-files/sounds/tink.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jishanshaikh4/drum-kit/HEAD/raw-files/sounds/tink.wav


--------------------------------------------------------------------------------
/raw-files/sounds/tom.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jishanshaikh4/drum-kit/HEAD/raw-files/sounds/tom.wav


--------------------------------------------------------------------------------
/raw-files/sounds/hihat.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jishanshaikh4/drum-kit/HEAD/raw-files/sounds/hihat.wav


--------------------------------------------------------------------------------
/raw-files/sounds/snare.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jishanshaikh4/drum-kit/HEAD/raw-files/sounds/snare.wav


--------------------------------------------------------------------------------
/raw-files/sounds/openhat.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jishanshaikh4/drum-kit/HEAD/raw-files/sounds/openhat.wav


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## :saxophone: Drum-Kit (#1)
2 | > Very simple kit of drum with sounds and playable on the go.
3 | 
4 | ### Teaching credits
5 | - [JavaScript 30.](https://www.javascript30.com/)
6 | - [w3schools.com](https://www.w3schools.com/default.asp?language='js')
7 | 


--------------------------------------------------------------------------------
/raw-files/style.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   font-size: 10px;
 3 |   background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
 4 |   background-size: cover;
 5 | }
 6 | body,html {
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   font-family: sans-serif;
10 | }
11 | 
12 | .keys {
13 |   display: flex;
14 |   flex: 1;
15 |   min-height: 100vh;
16 |   align-items: center;
17 |   justify-content: center;
18 | }
19 | 
20 | .key {
21 |   border: .4rem solid black;
22 |   border-radius: .5rem;
23 |   margin: 1rem;
24 |   font-size: 1.5rem;
25 |   padding: 1rem .5rem;
26 |   transition: all .07s ease;
27 |   width: 10rem;
28 |   text-align: center;
29 |   color: white;
30 |   background: rgba(0,0,0,0.4);
31 |   text-shadow: 0 0 .5rem black;
32 | }
33 | 
34 | .playing {
35 |   transform: scale(1.1);
36 |   border-color: #ffc600;
37 |   box-shadow: 0 0 1rem #ffc600;
38 | }
39 | 
40 | kbd {
41 |   display: block;
42 |   font-size: 4rem;
43 | }
44 | 
45 | .sound {
46 |   font-size: 1.2rem;
47 |   text-transform: uppercase;
48 |   letter-spacing: .1rem;
49 |   color: #ffc600;
50 | }
51 | 


--------------------------------------------------------------------------------
/raw-files/index-START.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>JS Drum Kit</title>
 6 |   <link rel="stylesheet" href="style.css">
 7 | </head>
 8 | <body>
 9 | 
10 | 
11 |   <div class="keys">
12 |     <div data-key="65" class="key">
13 |       <kbd>A</kbd>
14 |       <span class="sound">clap</span>
15 |     </div>
16 |     <div data-key="83" class="key">
17 |       <kbd>S</kbd>
18 |       <span class="sound">hihat</span>
19 |     </div>
20 |     <div data-key="68" class="key">
21 |       <kbd>D</kbd>
22 |       <span class="sound">kick</span>
23 |     </div>
24 |     <div data-key="70" class="key">
25 |       <kbd>F</kbd>
26 |       <span class="sound">openhat</span>
27 |     </div>
28 |     <div data-key="71" class="key">
29 |       <kbd>G</kbd>
30 |       <span class="sound">boom</span>
31 |     </div>
32 |     <div data-key="72" class="key">
33 |       <kbd>H</kbd>
34 |       <span class="sound">ride</span>
35 |     </div>
36 |     <div data-key="74" class="key">
37 |       <kbd>J</kbd>
38 |       <span class="sound">snare</span>
39 |     </div>
40 |     <div data-key="75" class="key">
41 |       <kbd>K</kbd>
42 |       <span class="sound">tom</span>
43 |     </div>
44 |     <div data-key="76" class="key">
45 |       <kbd>L</kbd>
46 |       <span class="sound">tink</span>
47 |     </div>
48 |   </div>
49 | 
50 |   <audio data-key="65" src="sounds/clap.wav"></audio>
51 |   <audio data-key="83" src="sounds/hihat.wav"></audio>
52 |   <audio data-key="68" src="sounds/kick.wav"></audio>
53 |   <audio data-key="70" src="sounds/openhat.wav"></audio>
54 |   <audio data-key="71" src="sounds/boom.wav"></audio>
55 |   <audio data-key="72" src="sounds/ride.wav"></audio>
56 |   <audio data-key="74" src="sounds/snare.wav"></audio>
57 |   <audio data-key="75" src="sounds/tom.wav"></audio>
58 |   <audio data-key="76" src="sounds/tink.wav"></audio>
59 | 
60 | <script>
61 | 
62 | </script>
63 | 
64 | 
65 | </body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/raw-files/index-FINISHED.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 |   <head>
 6 |   <meta charset="UTF-8">
 7 |   <title>JS Drum Kit</title>
 8 |   <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 | 
12 | 
13 |   <div class="keys">
14 |     <div data-key="65" class="key">
15 |       <kbd>A</kbd>
16 |       <span class="sound">clap</span>
17 |     </div>
18 |     <div data-key="83" class="key">
19 |       <kbd>S</kbd>
20 |       <span class="sound">hihat</span>
21 |     </div>
22 |     <div data-key="68" class="key">
23 |       <kbd>D</kbd>
24 |       <span class="sound">kick</span>
25 |     </div>
26 |     <div data-key="70" class="key">
27 |       <kbd>F</kbd>
28 |       <span class="sound">openhat</span>
29 |     </div>
30 |     <div data-key="71" class="key">
31 |       <kbd>G</kbd>
32 |       <span class="sound">boom</span>
33 |     </div>
34 |     <div data-key="72" class="key">
35 |       <kbd>H</kbd>
36 |       <span class="sound">ride</span>
37 |     </div>
38 |     <div data-key="74" class="key">
39 |       <kbd>J</kbd>
40 |       <span class="sound">snare</span>
41 |     </div>
42 |     <div data-key="75" class="key">
43 |       <kbd>K</kbd>
44 |       <span class="sound">tom</span>
45 |     </div>
46 |     <div data-key="76" class="key">
47 |       <kbd>L</kbd>
48 |       <span class="sound">tink</span>
49 |     </div>
50 |   </div>
51 | 
52 |   <audio data-key="65" src="sounds/clap.wav"></audio>
53 |   <audio data-key="83" src="sounds/hihat.wav"></audio>
54 |   <audio data-key="68" src="sounds/kick.wav"></audio>
55 |   <audio data-key="70" src="sounds/openhat.wav"></audio>
56 |   <audio data-key="71" src="sounds/boom.wav"></audio>
57 |   <audio data-key="72" src="sounds/ride.wav"></audio>
58 |   <audio data-key="74" src="sounds/snare.wav"></audio>
59 |   <audio data-key="75" src="sounds/tom.wav"></audio>
60 |   <audio data-key="76" src="sounds/tink.wav"></audio>
61 | 
62 | <script>
63 |   function removeTransition(e) {
64 |     if (e.propertyName !== 'transform') return;
65 |     e.target.classList.remove('playing');
66 |   }
67 | 
68 |   function playSound(e) {
69 |     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
70 |     const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
71 |     if (!audio) return;
72 | 
73 |     key.classList.add('playing');
74 |     audio.currentTime = 0;
75 |     audio.play();
76 |   }
77 | 
78 |   const keys = Array.from(document.querySelectorAll('.key'));
79 |   keys.forEach(key => key.addEventListener('transitionend', removeTransition));
80 |   window.addEventListener('keydown', playSound);
81 | </script>
82 | 
83 | 
84 | </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------