├── .DS_Store ├── images ├── drum.png ├── kick.png ├── tom1.png ├── tom2.png ├── tom3.png ├── tom4.png ├── crash.png └── snare.png ├── sounds ├── crash.mp3 ├── snare.mp3 ├── tom-1.mp3 ├── tom-2.mp3 ├── tom-3.mp3 ├── tom-4.mp3 └── kick-bass.mp3 ├── README.md ├── index.html ├── styles.css └── index.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/.DS_Store -------------------------------------------------------------------------------- /images/drum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/images/drum.png -------------------------------------------------------------------------------- /images/kick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/images/kick.png -------------------------------------------------------------------------------- /images/tom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/images/tom1.png -------------------------------------------------------------------------------- /images/tom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/images/tom2.png -------------------------------------------------------------------------------- /images/tom3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/images/tom3.png -------------------------------------------------------------------------------- /images/tom4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/images/tom4.png -------------------------------------------------------------------------------- /images/crash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/images/crash.png -------------------------------------------------------------------------------- /images/snare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/images/snare.png -------------------------------------------------------------------------------- /sounds/crash.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/sounds/crash.mp3 -------------------------------------------------------------------------------- /sounds/snare.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/sounds/snare.mp3 -------------------------------------------------------------------------------- /sounds/tom-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/sounds/tom-1.mp3 -------------------------------------------------------------------------------- /sounds/tom-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/sounds/tom-2.mp3 -------------------------------------------------------------------------------- /sounds/tom-3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/sounds/tom-3.mp3 -------------------------------------------------------------------------------- /sounds/tom-4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/sounds/tom-4.mp3 -------------------------------------------------------------------------------- /sounds/kick-bass.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozngrsc/Drum-Kit/HEAD/sounds/kick-bass.mp3 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Drum-Kit 2 | 3 | Click demo to try it by yourself! 4 | 5 | ## Drum-Kit Demo Link 6 | 7 | You can view the site here 8 | [Click Me](https://ozngrsc.github.io/Drum-Kit/) 9 | 10 | ## Topics 11 | 12 | - Html 13 | - Css 14 | - JavaScript 15 | - Responsive Design 16 | 17 | 18 | ## Author 19 | 20 | Ozan Gürsucu (ozngrsc) 21 | 22 | 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 🥁 Drum Kit 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Drum 🥁 Kit

14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #283149; 4 | } 5 | 6 | h1 { 7 | font-size: 5rem; 8 | color: #DBEDF3; 9 | font-family: "Arvo", cursive; 10 | text-shadow: 3px 0 #DA0463; 11 | 12 | } 13 | 14 | footer { 15 | color: #DBEDF3; 16 | font-family: sans-serif; 17 | } 18 | 19 | .w { 20 | background-image: url("images/tom1.png"); 21 | } 22 | 23 | .a { 24 | background-image: url("images/tom2.png"); 25 | } 26 | 27 | .s { 28 | background-image: url("images/tom3.png"); 29 | } 30 | 31 | .d { 32 | background-image: url("images/tom4.png"); 33 | } 34 | 35 | .j { 36 | background-image: url("images/snare.png"); 37 | } 38 | 39 | .k { 40 | background-image: url("images/crash.png") 41 | } 42 | 43 | .l { 44 | background-image: url("images/kick.png"); 45 | } 46 | 47 | .set { 48 | margin: 10% auto; 49 | } 50 | 51 | .game-over { 52 | background-color: red; 53 | opacity: 0.8; 54 | } 55 | 56 | .pressed { 57 | box-shadow: 0 3px 4px 0 #DBEDF3; 58 | opacity: 0.5; 59 | } 60 | 61 | .red { 62 | color: red; 63 | } 64 | 65 | .drum { 66 | outline: none; 67 | border: 10px solid #404B69; 68 | font-size: 5rem; 69 | font-family: 'Arvo', cursive; 70 | line-height: 2; 71 | font-weight: 900; 72 | color: #DA0463; 73 | text-shadow: 3px 0 #DBEDF3; 74 | border-radius: 15px; 75 | display: inline-block; 76 | width: 150px; 77 | height: 150px; 78 | text-align: center; 79 | margin: 10px; 80 | background-color: white; 81 | } 82 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* Detecting Button Press */ 2 | 3 | var numberOfDrumButtons = document.querySelectorAll(".drum").length; 4 | 5 | for (var i = 0; i < numberOfDrumButtons; i++) { 6 | document.querySelectorAll(".drum")[i].addEventListener("click", function () { 7 | var buttonInnerHTML = this.innerHTML; 8 | 9 | makeSound(buttonInnerHTML); 10 | 11 | buttonAnimation(buttonInnerHTML); 12 | }); 13 | } 14 | 15 | /* Detecting Keyboard Press */ 16 | 17 | document.addEventListener("keypress", function (event) { 18 | makeSound(event.key); 19 | 20 | buttonAnimation(event.key); 21 | }); 22 | 23 | function makeSound(key) { 24 | switch (key) { 25 | case "w": 26 | var tom1 = new Audio("sounds/tom-1.mp3"); 27 | tom1.play(); 28 | break; 29 | 30 | case "a": 31 | var tom2 = new Audio("sounds/tom-2.mp3"); 32 | tom2.play(); 33 | break; 34 | 35 | case "s": 36 | var tom3 = new Audio("sounds/tom-3.mp3"); 37 | tom3.play(); 38 | break; 39 | 40 | case "d": 41 | var tom4 = new Audio("sounds/tom-4.mp3"); 42 | tom4.play(); 43 | break; 44 | 45 | case "j": 46 | var snare = new Audio("sounds/snare.mp3"); 47 | snare.play(); 48 | break; 49 | 50 | case "k": 51 | var crash = new Audio("sounds/crash.mp3"); 52 | crash.play(); 53 | break; 54 | 55 | case "l": 56 | var kick = new Audio("sounds/kick-bass.mp3"); 57 | kick.play(); 58 | break; 59 | 60 | default: 61 | console.log(buttonInnerHTML); 62 | } 63 | } 64 | 65 | function buttonAnimation(currentKey) { 66 | var activeButton = document.querySelector("." + currentKey); 67 | 68 | activeButton.classList.add("pressed"); 69 | 70 | setTimeout(function () { 71 | activeButton.classList.remove("pressed"); 72 | }, 100); 73 | } 74 | --------------------------------------------------------------------------------