diff --git a/Web Dev Projects/keyboard sound/background.jpg b/Web Dev Projects/keyboard sound/background.jpg
new file mode 100644
index 00000000..590036d6
Binary files /dev/null and b/Web Dev Projects/keyboard sound/background.jpg differ
diff --git a/Web Dev Projects/keyboard sound/index.html b/Web Dev Projects/keyboard sound/index.html
new file mode 100644
index 00000000..20511049
--- /dev/null
+++ b/Web Dev Projects/keyboard sound/index.html	
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS Drum Kit</title>
+  <link rel="stylesheet" href="style.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>
+
+function hapusTransisi(e) {
+    if(e.propertyName !== 'transform') return;
+    e.target.classList.remove('playing');
+}
+
+function playsound(e){
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
+    if (!audio) return;
+
+    key.classList.add('playing');
+    audio.currentTime = 0;
+    audio.play();
+  }
+
+    const keys = Array.from(document.querySelectorAll('.key'));
+    keys.forEach(key => key.addEventListener('transitionend', hapusTransisi));
+    window.addEventListener('keydown', playsound);
+
+
+
+</script>
+
+
+</body>
+</html>
diff --git a/Web Dev Projects/keyboard sound/nyoba.html b/Web Dev Projects/keyboard sound/nyoba.html
new file mode 100644
index 00000000..1945679a
--- /dev/null
+++ b/Web Dev Projects/keyboard sound/nyoba.html	
@@ -0,0 +1,35 @@
+<div class="keys">
+ 
+<div data-key="83" class="kode">
+    <h2>A</h2>
+    <span class="sound">Sound A</span>
+</div>
+<div data-key="66" class="kode">
+    <h2>B</h2>
+    <span class="sound">Sound B</span>
+</div>
+
+<audio data-key="65" src="sounds/hihat.wav"></audio>
+<audio data-key="83" src="sounds/clap.wav"></audio>
+
+</div>
+
+<script>
+
+    function playsound(e){
+        const suara = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+        const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
+        if(!suara) return;
+
+
+        suara.currentTime = 0;
+        suara.play();
+    
+    }
+    
+    
+    const keys = Array.from(document.querySelectorAll('.kode'));
+    window.addEventListener('keydown', playsound);
+    
+    
+    </script>
diff --git a/Web Dev Projects/keyboard sound/sounds/boom.wav b/Web Dev Projects/keyboard sound/sounds/boom.wav
new file mode 100644
index 00000000..8d6423bc
Binary files /dev/null and b/Web Dev Projects/keyboard sound/sounds/boom.wav differ
diff --git a/Web Dev Projects/keyboard sound/sounds/clap.wav b/Web Dev Projects/keyboard sound/sounds/clap.wav
new file mode 100644
index 00000000..ef952e5e
Binary files /dev/null and b/Web Dev Projects/keyboard sound/sounds/clap.wav differ
diff --git a/Web Dev Projects/keyboard sound/sounds/hihat.wav b/Web Dev Projects/keyboard sound/sounds/hihat.wav
new file mode 100644
index 00000000..885cb196
Binary files /dev/null and b/Web Dev Projects/keyboard sound/sounds/hihat.wav differ
diff --git a/Web Dev Projects/keyboard sound/sounds/kick.wav b/Web Dev Projects/keyboard sound/sounds/kick.wav
new file mode 100644
index 00000000..8fe46dea
Binary files /dev/null and b/Web Dev Projects/keyboard sound/sounds/kick.wav differ
diff --git a/Web Dev Projects/keyboard sound/sounds/openhat.wav b/Web Dev Projects/keyboard sound/sounds/openhat.wav
new file mode 100644
index 00000000..50637521
Binary files /dev/null and b/Web Dev Projects/keyboard sound/sounds/openhat.wav differ
diff --git a/Web Dev Projects/keyboard sound/sounds/ride.wav b/Web Dev Projects/keyboard sound/sounds/ride.wav
new file mode 100644
index 00000000..e5829dfe
Binary files /dev/null and b/Web Dev Projects/keyboard sound/sounds/ride.wav differ
diff --git a/Web Dev Projects/keyboard sound/sounds/snare.wav b/Web Dev Projects/keyboard sound/sounds/snare.wav
new file mode 100644
index 00000000..c4edfc75
Binary files /dev/null and b/Web Dev Projects/keyboard sound/sounds/snare.wav differ
diff --git a/Web Dev Projects/keyboard sound/sounds/tink.wav b/Web Dev Projects/keyboard sound/sounds/tink.wav
new file mode 100644
index 00000000..1f3c7b91
Binary files /dev/null and b/Web Dev Projects/keyboard sound/sounds/tink.wav differ
diff --git a/Web Dev Projects/keyboard sound/sounds/tom.wav b/Web Dev Projects/keyboard sound/sounds/tom.wav
new file mode 100644
index 00000000..9e2cdf69
Binary files /dev/null and b/Web Dev Projects/keyboard sound/sounds/tom.wav differ
diff --git a/Web Dev Projects/keyboard sound/style.css b/Web Dev Projects/keyboard sound/style.css
new file mode 100644
index 00000000..bfdba843
--- /dev/null
+++ b/Web Dev Projects/keyboard sound/style.css	
@@ -0,0 +1,51 @@
+html {
+  font-size: 10px;
+  background: url('./background.jpg') 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 black;
+  border-radius: .5rem;
+  margin: 1rem;
+  font-size: 1.5rem;
+  padding: 1rem .5rem;
+  transition: all .07s 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.1);
+  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;
+}
