diff --git a/images/crash.png b/images/crash.png
new file mode 100644
index 0000000..a992fa0
Binary files /dev/null and b/images/crash.png differ
diff --git a/images/kick.png b/images/kick.png
new file mode 100644
index 0000000..b64877e
Binary files /dev/null and b/images/kick.png differ
diff --git a/images/snare.png b/images/snare.png
new file mode 100644
index 0000000..1e089ba
Binary files /dev/null and b/images/snare.png differ
diff --git a/images/tom1.png b/images/tom1.png
new file mode 100644
index 0000000..855b211
Binary files /dev/null and b/images/tom1.png differ
diff --git a/images/tom2.png b/images/tom2.png
new file mode 100644
index 0000000..3e9f363
Binary files /dev/null and b/images/tom2.png differ
diff --git a/images/tom3.png b/images/tom3.png
new file mode 100644
index 0000000..762cbf8
Binary files /dev/null and b/images/tom3.png differ
diff --git a/images/tom4.png b/images/tom4.png
new file mode 100644
index 0000000..e79c49e
Binary files /dev/null and b/images/tom4.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fa62401
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ Drum Kit
+
+
+
+
+
+ Online Drum 🥁 Kit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..a428d5f
--- /dev/null
+++ b/index.js
@@ -0,0 +1,81 @@
+var numberOfDrumButtons = document.querySelectorAll(".drum").length;
+
+for (var i = 0; i < numberOfDrumButtons; i++) {
+
+ document.querySelectorAll(".drum")[i].addEventListener("click", function() {
+
+ var buttonInnerHTML = this.innerHTML;
+
+ makeSound(buttonInnerHTML);
+
+ buttonAnimation(buttonInnerHTML);
+
+ });
+
+}
+
+document.addEventListener("keypress", function(event) {
+
+ makeSound(event.key);
+
+ buttonAnimation(event.key);
+
+});
+
+
+function makeSound(key) {
+
+ switch (key) {
+ case "w":
+ var tom1 = new Audio("sounds/tom-1.mp3");
+ tom1.play();
+ break;
+
+ case "a":
+ var tom2 = new Audio("sounds/tom-2.mp3");
+ tom2.play();
+ break;
+
+ case "s":
+ var tom3 = new Audio('sounds/tom-3.mp3');
+ tom3.play();
+ break;
+
+ case "d":
+ var tom4 = new Audio('sounds/tom-4.mp3');
+ tom4.play();
+ break;
+
+ case "j":
+ var snare = new Audio('sounds/snare.mp3');
+ snare.play();
+ break;
+
+ case "k":
+ var crash = new Audio('sounds/crash.mp3');
+ crash.play();
+ break;
+
+ case "l":
+ var kick = new Audio('sounds/kick-bass.mp3');
+ kick.play();
+ break;
+
+
+ default: console.log(key);
+
+ }
+}
+
+
+function buttonAnimation(currentKey) {
+
+ var activeButton = document.querySelector("." + currentKey);
+
+ activeButton.classList.add("pressed");
+
+ setTimeout(function() {
+ activeButton.classList.remove("pressed");
+ }, 100);
+
+}
diff --git a/sounds/crash.mp3 b/sounds/crash.mp3
new file mode 100644
index 0000000..d568062
Binary files /dev/null and b/sounds/crash.mp3 differ
diff --git a/sounds/kick-bass.mp3 b/sounds/kick-bass.mp3
new file mode 100644
index 0000000..faf06c6
Binary files /dev/null and b/sounds/kick-bass.mp3 differ
diff --git a/sounds/snare.mp3 b/sounds/snare.mp3
new file mode 100644
index 0000000..e7cf5b8
Binary files /dev/null and b/sounds/snare.mp3 differ
diff --git a/sounds/tom-1.mp3 b/sounds/tom-1.mp3
new file mode 100644
index 0000000..7dc3003
Binary files /dev/null and b/sounds/tom-1.mp3 differ
diff --git a/sounds/tom-2.mp3 b/sounds/tom-2.mp3
new file mode 100644
index 0000000..f3c0485
Binary files /dev/null and b/sounds/tom-2.mp3 differ
diff --git a/sounds/tom-3.mp3 b/sounds/tom-3.mp3
new file mode 100644
index 0000000..3806033
Binary files /dev/null and b/sounds/tom-3.mp3 differ
diff --git a/sounds/tom-4.mp3 b/sounds/tom-4.mp3
new file mode 100644
index 0000000..58b04be
Binary files /dev/null and b/sounds/tom-4.mp3 differ
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..aaa580d
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,76 @@
+body {
+ text-align: center;
+ background-color: #283149;
+}
+
+h1 {
+ font-size: 5rem;
+ color: #DBEDF3;
+ font-family: "Arvo", cursive;
+ text-shadow: 3px 0 #DA0463;
+
+}
+
+footer {
+ color: #DBEDF3;
+ font-family: sans-serif;
+}
+
+.w {
+ background-image: url("images/tom1.png");
+}
+
+.a {
+ background-image: url("images/tom2.png");
+}
+
+.s {
+ background-image: url("images/tom3.png");
+}
+
+.d {
+ background-image: url("images/tom4.png");
+}
+
+.j {
+ background-image: url("images/snare.png");
+}
+
+.k {
+ background-image: url("images/crash.png");
+}
+
+.l {
+ background-image: url("images/kick.png");
+}
+
+.set {
+ margin: 10% auto;
+}
+
+.pressed {
+ box-shadow: 0 3px 4px 0 #DBEDF3;
+ opacity: 0.5;
+}
+
+.red {
+ color: red;
+}
+
+.drum {
+ outline: none;
+ border: 10px solid #404B69;
+ font-size: 5rem;
+ font-family: 'Arvo', cursive;
+ line-height: 2;
+ font-weight: 900;
+ color: #DA0463;
+ text-shadow: 3px 0 #DBEDF3;
+ border-radius: 15px;
+ display: inline-block;
+ width: 150px;
+ height: 150px;
+ text-align: center;
+ margin: 10px;
+ background-color: white;
+}