<h1>
  Shortcut Menu Helper
</h1>

<form class="form">
  <input type="text" class="input" value="Focus this input" placeholder="Focus this input"/>
  <div class="shortcut-helper-menu hidden">
    <h1 class="header">Keyboard Shortcuts</h1>
    <div class="shortcut">
      <div class="label">Play/Pause</div>
      <div class="key-command">
        <span class="key key-16">Shift</span> + <span class="key key-32">Space</span>
      </div>
    </div>
    <div class="shortcut">
      <div class="label">Skip Forward</div>
      <div class="key-command">
        <span class="key key-16">Shift</span> + <span class="key key-39">Right Arrow</span>
      </div>
    </div>
    <div class="shortcut">
      <div class="label">Skip Backwards</div>
      <div class="key-command">
        <span class="key key-16">Shift</span> + <span class="key key-37">Left Arrow</span>
      </div>
    </div>
  </div>
</form>

$color-bg:#1f242a;
$color-highlight: #00c7b2;
$color-menu-bg: #eee;

body{
  font: 16px/1.4 'Proxima Nova', sans-serif;
  letter-spacing:.05em;
  background:$color-bg;
  color: #1f242a;
}

.form{
  width:200px;
  margin:auto;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  
  .input{
    display:block;
    line-height:2rem;
    text-align:center;
    width:100%;
  }
}

.shortcut-helper-menu{
  position:absolute;
  bottom:100%;
  left:0;
  padding:1rem;
  background:#eee;
  opacity:.9;
  margin-bottom:1rem;
  border-radius:4px;

  &:after{
    content:'';
    display:block;
    width:0;
    border-style:solid;
    border-width: 10px 10px 0;
    border-color: $color-menu-bg transparent transparent;
    position:absolute;top:100%;
    left:10px;
  }
  
  &.hidden{
    display:none;
  }
  &.shown{
    display:block;
  }
}

.header{
  font-weight:600;
  margin-bottom:1rem;
}

.shortcut{
  display:flex;
  align-items:center;
  margin-bottom:1rem;
  white-space:nowrap;
}

.label{
  margin-right:1rem;
  width:8rem;
}

.key{
  display:inline-block;
  background:#ddd;
  line-height:1.6rem;
  padding:0 .5rem;
  border-radius:4px;
  &.pressed{
    background:$color-highlight;
  }
}

var input = document.querySelector('.input');
var helperMenu = document.querySelector('.shortcut-helper-menu');

function addHighlight(keyCode){
  $('.key-' + keyCode).addClass('pressed');
}

function removeHighlight(keyCode){
  $('.key-' + keyCode).removeClass('pressed');
}

window.addEventListener('keydown', function(event){
  if(event.shiftKey){
    event.preventDefault();
  }
  addHighlight(event.keyCode);
});

window.addEventListener('keyup', function(event){
  removeHighlight(event.keyCode);
});

input.addEventListener('focus', function(){
  $(helperMenu).toggleClass('hidden', 'shown');
})

input.addEventListener('blur', function(){
  $(helperMenu).toggleClass('hidden', 'shown');
})