├── background.jpg
├── sounds
    ├── boom.wav
    ├── clap.wav
    ├── kick.wav
    ├── ride.wav
    ├── tink.wav
    ├── tom.wav
    ├── hihat.wav
    ├── openhat.wav
    └── snare.wav
├── style.css
└── index.html


/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/background.jpg


--------------------------------------------------------------------------------
/sounds/boom.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/sounds/boom.wav


--------------------------------------------------------------------------------
/sounds/clap.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/sounds/clap.wav


--------------------------------------------------------------------------------
/sounds/kick.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/sounds/kick.wav


--------------------------------------------------------------------------------
/sounds/ride.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/sounds/ride.wav


--------------------------------------------------------------------------------
/sounds/tink.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/sounds/tink.wav


--------------------------------------------------------------------------------
/sounds/tom.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/sounds/tom.wav


--------------------------------------------------------------------------------
/sounds/hihat.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/sounds/hihat.wav


--------------------------------------------------------------------------------
/sounds/openhat.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/sounds/openhat.wav


--------------------------------------------------------------------------------
/sounds/snare.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tanishka-dev/drum-kit/HEAD/sounds/snare.wav


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


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Document</title>
10 | </head>
11 | 
12 | <body>
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 |         
64 |             function playSound(e){
65 |             const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
66 |             const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
67 |             if (!audio) return;
68 |             audio.currentTime = 0;
69 |             audio.play();
70 |             key.classList.add('playing');
71 |         }
72 | 
73 |         function removeTransition(e){
74 |             if(e.propertyName !== 'transform') return;
75 |             this.classList.remove('playing');
76 |         }
77 | 
78 |         const keys= document.querySelectorAll('.key');
79 |         keys.forEach(key => key.addEventListener('transitionend', removeTransition));
80 |         window.addEventListener('keydown', playSound);
81 |     </script>
82 | 
83 | </body>
84 | 
85 | </html>


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