Cacher is the code snippet organizer for pro developers

const OUTPUT_ID = "displayArea",
  cursor = {
    ArrowUp: "↑",
    ArrowDown: "↓",
    ArrowLeft: "←",
    ArrowRight: "→",
  };

document.onkeydown = keydown;
function keydown(e) {
  document.getElementById(OUTPUT_ID).textContent = cursor[e.key]
}

document.onkeydown = keydown;

function keydown() {
  if (event.key == "ArrowUp") {
    document.getElementById("displayArea").textContent = "↑";
  } else if (event.key == "ArrowDown") {
    document.getElementById("displayArea").textContent = "↓";
  } else if (event.key == "ArrowLeft") {
    document.getElementById("displayArea").textContent = "←";
  } else if (event.key == "ArrowRight") {
    document.getElementById("displayArea").textContent = "→";
  } else {
    document.getElementById("displayArea").textContent = event.key;
  }
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

p {
  font-size:20px;
}