From b137e5e18546306061c9d5be393b41aa7a1524bc Mon Sep 17 00:00:00 2001
From: Trent Palmer <trenttdually@gmail.com>
Date: Wed, 27 May 2020 12:52:54 -0700
Subject: [PATCH] drum-machine add notification to .focus(); with 'v' key

---
 drum-machine/drumMachine.css | 11 ++++++++---
 drum-machine/drumMachine.js  |  4 +++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/drum-machine/drumMachine.css b/drum-machine/drumMachine.css
index e0d234e..af3c1cc 100644
--- a/drum-machine/drumMachine.css
+++ b/drum-machine/drumMachine.css
@@ -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;
   }
 
diff --git a/drum-machine/drumMachine.js b/drum-machine/drumMachine.js
index 7132660..eb0d254 100644
--- a/drum-machine/drumMachine.js
+++ b/drum-machine/drumMachine.js
@@ -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]);