trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2024-11-25 04:31:29 -08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: center;
text-align: center; text-align: center;
font-size: x-large; font-size: x-large;
font-style: oblique; font-style: oblique;
} }
#display-top p {
height: 10px;
margin-top: -10px;
}
#display-middle { #display-middle {
flex-basis: 62%; flex-basis: 62%;
width: 100%; width: 100%;
@ -338,7 +343,7 @@ i.fa-volume-up {
margin-right: auto; 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; display: none;
} }
@ -427,7 +432,7 @@ i.fa-volume-up {
margin-right: auto; 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; display: none;
} }

4
drum-machine/drumMachine.js
View File

@ -80,6 +80,8 @@ $(document).ready(function () {
padsArray.forEach(pad => { padsArray.forEach(pad => {
makeMetronomeIcons(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) => { const makeMetronomeIcons = (pad) => {
@ -110,7 +112,7 @@ const qweasdzxc = [81,87,69,65,83,68,90,88,67];
const playSample = (key) => { const playSample = (key) => {
const audioFileText = $('#'+key[0]).attr('src').slice(36) 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') { if (sessionStorage.getItem(key[0] + 'isMetronome') === 'false') {
const keyDuration = 1000; const keyDuration = 1000;
const sound = document.getElementById(key[0]); const sound = document.getElementById(key[0]);