Created
December 12, 2016 16:07
-
-
Save dhcodes/cb6b1b071c9d5986afda303508958497 to your computer and use it in GitHub Desktop.
rWZOrz
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <title>JS Drumset</title> | |
| <body> | |
| <h1>JS Drumset</h1> | |
| <div id="keys"> | |
| </div> | |
| </body> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let keys = ['a', 's', 'd', 'f', 'j', 'k', 'l', ';']; | |
| for (let i = 0; i < keys.length; i++) { | |
| let node = document.createElement('button') | |
| let textNode = document.createTextNode(keys[i]); | |
| node.appendChild(textNode); | |
| document.getElementById('keys').appendChild(node) | |
| document.addEventListener('keydown', (event) => { | |
| if (event.key == keys[i]) { | |
| node.classList.add('clicked'); | |
| sounds[i].play(); | |
| } | |
| }, false); | |
| document.addEventListener('keyup', (event) => { | |
| if (event.key == keys[i]) { | |
| node.classList.remove('clicked'); | |
| } | |
| }, false); | |
| node.addEventListener('mousedown', (event) => { | |
| node.classList.add('clicked'); | |
| sounds[i].play(); | |
| node.addEventListener('mouseup', (event) => { | |
| node.classList.remove('clicked'); | |
| }) | |
| }, false) | |
| } | |
| let sound1 = new Audio('http://audiosoundclips.com/wp-content/uploads/2011/12/Drum1.mp3'); | |
| let sound2 = new Audio('http://audiosoundclips.com/wp-content/uploads/2011/12/Drum2.mp3'); | |
| let sound3 = new Audio('http://audiosoundclips.com/wp-content/uploads/2011/12/Drum3.mp3'); | |
| let sound4 = new Audio('http://audiosoundclips.com/wp-content/uploads/2011/12/Drum4.mp3'); | |
| let sound5 = new Audio('http://audiosoundclips.com/wp-content/uploads/2011/12/Drum5.mp3'); | |
| let sound6 = new Audio('http://audiosoundclips.com/wp-content/uploads/2011/12/Drum6.mp3'); | |
| let sound7 = new Audio('http://audiosoundclips.com/wp-content/uploads/2011/12/Drum7.mp3'); | |
| let sound8 = new Audio('http://audiosoundclips.com/wp-content/uploads/2011/12/Drum8.mp3'); | |
| let sounds = [ | |
| sound1, sound2, sound3, sound4, sound5, sound6, sound7, sound8 | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Special+Elite|Grand+Hotel'); | |
| body { | |
| display: flex; | |
| background: url("https://images.unsplash.com/photo-1454035554703-a345f67effea") no-repeat center center fixed; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| height: 80vh; | |
| } | |
| h1 { | |
| font-family: 'Grand Hotel', sans-serif; | |
| font-size: 3rem; | |
| color: white; | |
| text-shadow: 4px 4px #222; | |
| } | |
| #keys { | |
| width: 100%; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-around; | |
| } | |
| button { | |
| font-family: 'Special Elite', sans-serif; | |
| margin: 0 auto; | |
| height: 60px; | |
| width: 60px; | |
| font-size: 1.5rem; | |
| background-color: rgba(0,0,0,0.5); | |
| color: yellow; | |
| border: 3px solid white; | |
| border-radius: 10px; | |
| transition: all 0.5s; | |
| } | |
| .clicked { | |
| transform: scale(2); | |
| background-color: orange; | |
| border-color: yellow; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment