trent
/
fcc-challenges
mirror of https://github.com/TrentSPalmer/fcc-challenges.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

drum-machine add notification to .focus(); with 'v' key

This commit is contained in:
Trent Palmer 2020-05-27 12:52:54 -07:00
parent a76e33a644
commit b137e5e185
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
drum-machine/drumMachine.css
View File

@ -54,12 +54,17 @@ body {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: center;
text-align: center;
font-size: x-large;
font-style: oblique;
}
#display-top p {
height: 10px;
margin-top: -10px;
}
#display-middle {
flex-basis: 62%;
width: 100%;
@ -338,7 +343,7 @@ i.fa-volume-up {
margin-right: auto;
}
#select-volume, #display-middle-right-f, #display-middle-right-g {
#select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip {
display: none;
}
@ -427,7 +432,7 @@ i.fa-volume-up {
margin-right: auto;
}
#select-volume, #display-middle-right-f, #display-middle-right-g {
#select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip {
display: none;
}

4
drum-machine/drumMachine.js
View File

@ -80,6 +80,8 @@ $(document).ready(function () {
padsArray.forEach(pad => {
makeMetronomeIcons(pad);
});
$('#display-top').html('<p id="volumeTip">press "V" to focus Volume so you can adjust with arrow keys</p>');
});
const makeMetronomeIcons = (pad) => {
@ -110,7 +112,7 @@ const qweasdzxc = [81,87,69,65,83,68,90,88,67];
const playSample = (key) => {
const audioFileText = $('#'+key[0]).attr('src').slice(36)
$('#display-top').html(key[0] +": " + audioFileText.replace(/\//g,' ').replace(/-/g,'&#8209;'));
$('#display-top').html( "<p>" + key[0] +": " + audioFileText.replace(/\//g,' ').replace(/-/g,'&#8209;') + "</p>");
if (sessionStorage.getItem(key[0] + 'isMetronome') === 'false') {
const keyDuration = 1000;
const sound = document.getElementById(key[0]);