├── images ├── crash.png ├── snare.png ├── tom1.png ├── tom2.png ├── tom3.png └── kickbass.png ├── sounds ├── crash.mp3 ├── snare.mp3 ├── tom1.mp3 ├── tom2.mp3 ├── tom3.mp3 └── kickbass.mp3 ├── README.md ├── index.html ├── styles.css └── index.js /images/crash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/images/crash.png -------------------------------------------------------------------------------- /images/snare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/images/snare.png -------------------------------------------------------------------------------- /images/tom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/images/tom1.png -------------------------------------------------------------------------------- /images/tom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/images/tom2.png -------------------------------------------------------------------------------- /images/tom3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/images/tom3.png -------------------------------------------------------------------------------- /sounds/crash.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/sounds/crash.mp3 -------------------------------------------------------------------------------- /sounds/snare.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/sounds/snare.mp3 -------------------------------------------------------------------------------- /sounds/tom1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/sounds/tom1.mp3 -------------------------------------------------------------------------------- /sounds/tom2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/sounds/tom2.mp3 -------------------------------------------------------------------------------- /sounds/tom3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/sounds/tom3.mp3 -------------------------------------------------------------------------------- /images/kickbass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/images/kickbass.png -------------------------------------------------------------------------------- /sounds/kickbass.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valmir-filho/drum-website-project/HEAD/sounds/kickbass.mp3 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Drum Website Project by 2023 Web Development Bootcamp Repository from Udemy. 2 | 3 | ## Content: 4 | 5 | - Drum Website Project developed by Dr. Angela Yu from Udemy. 6 | 7 | ### Used IDE: Visual Studio Code. 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Drum Website Project 7 | 8 | 9 | 10 | 11 | 12 |

🥁 Drum Project 🥁

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