diff --git a/DrumKit/.DS_Store b/DrumKit/.DS_Store
new file mode 100644
index 0000000..a86f452
Binary files /dev/null and b/DrumKit/.DS_Store differ
diff --git a/DrumKit/images/crash.png b/DrumKit/images/crash.png
new file mode 100644
index 0000000..a992fa0
Binary files /dev/null and b/DrumKit/images/crash.png differ
diff --git a/DrumKit/images/kick.png b/DrumKit/images/kick.png
new file mode 100644
index 0000000..b64877e
Binary files /dev/null and b/DrumKit/images/kick.png differ
diff --git a/DrumKit/images/snare.png b/DrumKit/images/snare.png
new file mode 100644
index 0000000..1e089ba
Binary files /dev/null and b/DrumKit/images/snare.png differ
diff --git a/DrumKit/images/tom1.png b/DrumKit/images/tom1.png
new file mode 100644
index 0000000..855b211
Binary files /dev/null and b/DrumKit/images/tom1.png differ
diff --git a/DrumKit/images/tom2.png b/DrumKit/images/tom2.png
new file mode 100644
index 0000000..3e9f363
Binary files /dev/null and b/DrumKit/images/tom2.png differ
diff --git a/DrumKit/images/tom3.png b/DrumKit/images/tom3.png
new file mode 100644
index 0000000..762cbf8
Binary files /dev/null and b/DrumKit/images/tom3.png differ
diff --git a/DrumKit/images/tom4.png b/DrumKit/images/tom4.png
new file mode 100644
index 0000000..e79c49e
Binary files /dev/null and b/DrumKit/images/tom4.png differ
diff --git a/DrumKit/index.html b/DrumKit/index.html
new file mode 100644
index 0000000..f0a25ef
--- /dev/null
+++ b/DrumKit/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ Drum Kit
+
+
+
+
+
+ Drum 🥁 Kit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/DrumKit/index.js b/DrumKit/index.js
new file mode 100644
index 0000000..7436ed4
--- /dev/null
+++ b/DrumKit/index.js
@@ -0,0 +1,57 @@
+var numberOfDrumButtons = document.querySelectorAll(".drum").length;
+for (var i = 0; i < numberOfDrumButtons; i++) {
+ document
+ .querySelectorAll(".drum")
+ [i].addEventListener("click", function playSound() {
+ var buttonInnerHtml = this.innerHTML;
+ makeSound(buttonInnerHtml);
+ buttonAnimation(buttonInnerHtml);
+ });
+}
+document.addEventListener("keydown", function (event) {
+ makeSound(event.key);
+ buttonAnimation(event.key);
+});
+//Read mdn docs for more on EventListerner.
+function makeSound(key) {
+ switch (key) {
+ case "w":
+ var audio = new Audio("sounds/tom-1.mp3");
+ audio.play();
+ break;
+ case "a":
+ var audio = new Audio("sounds/tom-2.mp3");
+ audio.play();
+ break;
+ case "s":
+ var audio = new Audio("sounds/tom-3.mp3");
+ audio.play();
+ break;
+ case "d":
+ var audio = new Audio("sounds/tom-4.mp3");
+ audio.play();
+ break;
+ case "j":
+ var audio = new Audio("sounds/snare.mp3");
+ audio.play();
+ break;
+ case "k":
+ var audio = new Audio("sounds/crash.mp3");
+ audio.play();
+ break;
+ case "l":
+ var audio = new Audio("sounds/kick-bass.mp3");
+ audio.play();
+ break;
+
+ default:
+ break;
+ }
+}
+function buttonAnimation(currentKey) {
+ var activeButton = document.querySelector("." + currentKey);
+ activeButton.classList.add("pressed");
+ setTimeout(function () {
+ activeButton.classList.remove("pressed");
+ }, 100);
+}
diff --git a/DrumKit/sounds/crash.mp3 b/DrumKit/sounds/crash.mp3
new file mode 100644
index 0000000..d568062
Binary files /dev/null and b/DrumKit/sounds/crash.mp3 differ
diff --git a/DrumKit/sounds/kick-bass.mp3 b/DrumKit/sounds/kick-bass.mp3
new file mode 100644
index 0000000..faf06c6
Binary files /dev/null and b/DrumKit/sounds/kick-bass.mp3 differ
diff --git a/DrumKit/sounds/snare.mp3 b/DrumKit/sounds/snare.mp3
new file mode 100644
index 0000000..e7cf5b8
Binary files /dev/null and b/DrumKit/sounds/snare.mp3 differ
diff --git a/DrumKit/sounds/tom-1.mp3 b/DrumKit/sounds/tom-1.mp3
new file mode 100644
index 0000000..7dc3003
Binary files /dev/null and b/DrumKit/sounds/tom-1.mp3 differ
diff --git a/DrumKit/sounds/tom-2.mp3 b/DrumKit/sounds/tom-2.mp3
new file mode 100644
index 0000000..f3c0485
Binary files /dev/null and b/DrumKit/sounds/tom-2.mp3 differ
diff --git a/DrumKit/sounds/tom-3.mp3 b/DrumKit/sounds/tom-3.mp3
new file mode 100644
index 0000000..3806033
Binary files /dev/null and b/DrumKit/sounds/tom-3.mp3 differ
diff --git a/DrumKit/sounds/tom-4.mp3 b/DrumKit/sounds/tom-4.mp3
new file mode 100644
index 0000000..58b04be
Binary files /dev/null and b/DrumKit/sounds/tom-4.mp3 differ
diff --git a/DrumKit/styles.css b/DrumKit/styles.css
new file mode 100644
index 0000000..2d1a921
--- /dev/null
+++ b/DrumKit/styles.css
@@ -0,0 +1,80 @@
+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;
+}
+
+.game-over {
+ background-color: red;
+ opacity: 0.8;
+}
+
+.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;
+}