* {
  font-family: 'Roboto Slab', sans-serif;
  font-size: 18px;
  text-align: center;
}

h1 {
  font-size: 2em;
}

#UIKeyValue {
  font-weight: 900;
  font-size: 5em;
  color: #555;
  opacity: 1;
}

#UIKeyId {
font-weight: 300;
  font-size: 1em;
  color: black;
  opacity: 1;
}

function genRGBString() {
  const random256Color = (min, max) => min + Math.floor(Math.random() * (max - min + 1))
  const r = random256Color(0, 255)
  const g = random256Color(0, 255)
  const b = random256Color(0, 255)
  return `rgb(${r},${g},${b})`
}

document.addEventListener("keydown", function(event) {
  event.preventDefault()
  const keyPressDisplay = document.getElementById('UIKeyValue')
  const keyPressId = document.getElementById('UIKeyId')
  keyPressDisplay.innerHTML = event.key
  keyPressDisplay.style.color = genRGBString()
  keyPressId.innerHTML = event.code
})

// left arrow = 37
// up arrow = 38
// right arrow = 39
// down arrow = 40