Skip to content

Clock #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

Clock #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4cc507e
Adds html code to index.html
fwortham4 Dec 9, 2016
0a1671e
Adds styling to style.css
fwortham4 Dec 10, 2016
a0ea92a
Adds sounds directory.
fwortham4 Dec 10, 2016
8d9fc83
Adds two JS functions so we can play the sounds and remove the 'playi…
fwortham4 Dec 10, 2016
fd30c43
Merge pull request #1 from fwortham4/DrumKit
fwortham4 Dec 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions Forrests_Builds/01 - JavaScript Drum Kit/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- data-key: links the keyboard event to the corresponding sound in the sound directory. -->

<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>

<script>
// Play Sound Function:
function playSound(event) {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`); // selects AUDIO based on keyCode from keydown event.
const key = document.querySelector(`.key[data-key="${event.keyCode}"]`); // selects KEY based on keyCode from keydown event.
if(!audio) return; // stops the function from running altogether.
audio.currentTime = 0; // rewinds to the start
audio.play(); // Plays the sound... duh
key.classList.add('playing') // ADDs 'playing' class to key that you press. (Equivalent to jQuery = "key.addClass('playing');")
}

// Transition End Event Function:
function removeTransition (event) {
if(event.propertyName !== 'transform') return; // SKIP if it's not a 'transform' element.
this.classList.remove('playing'); // Removes the 'playing' class from THIS (which happens to be -> key).
// console.log(event.propertyName);
}

// Actually Happening:
const keys = document.querySelectorAll('.key'); // Selects an array of all keys.
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound)
// });
</script>

</body>
</html>
Binary file added Forrests_Builds/01 - JavaScript Drum Kit/sounds/boom.wav
View file
Open in desktop
Binary file not shown.
Binary file added Forrests_Builds/01 - JavaScript Drum Kit/sounds/clap.wav
View file
Open in desktop
Binary file not shown.
Binary file added Forrests_Builds/01 - JavaScript Drum Kit/sounds/hihat.wav
View file
Open in desktop
Binary file not shown.
Binary file added Forrests_Builds/01 - JavaScript Drum Kit/sounds/kick.wav
View file
Open in desktop
Binary file not shown.
Binary file added Forrests_Builds/01 - JavaScript Drum Kit/sounds/openhat.wav
View file
Open in desktop
Binary file not shown.
Binary file added Forrests_Builds/01 - JavaScript Drum Kit/sounds/ride.wav
View file
Open in desktop
Binary file not shown.
Binary file added Forrests_Builds/01 - JavaScript Drum Kit/sounds/snare.wav
View file
Open in desktop
Binary file not shown.
Binary file added Forrests_Builds/01 - JavaScript Drum Kit/sounds/tink.wav
View file
Open in desktop
Binary file not shown.
Binary file added Forrests_Builds/01 - JavaScript Drum Kit/sounds/tom.wav
View file
Open in desktop
Binary file not shown.
52 changes: 52 additions & 0 deletions Forrests_Builds/01 - JavaScript Drum Kit/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
html {
font-size: 10px;
background:url(http://bopdj.com/skin/frontend/bopdj/default/ebay/Products/NativeInstruments/MASCHINE/STUDIO/BLACK/5.jpg) no-repeat center center;
/*background-color: black;*/
background-size: cover;
}

body,html {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}

.keys {
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
justify-content: center;
}

.key {
border: 4px solid black;
border-radius: 5px;
margin: 1em;
font-size: 1.95em;
padding: 1em .5em;
transition: all .07s;
width: 100px;
text-align: center;
color: white;
background:rgba(0,0,0,0.4);
text-shadow: 0 0 5px black;
}

.playing {
transform:scale(1.1);
border-color:#ffc600;
box-shadow: 0 0 10px #ffc600;
}

kbd {
display: block;
font-size: 40px;
}

.sound {
font-size: 1.2rem;
text-transform:uppercase;
letter-spacing: 1px;
color:#ffc600;
}