gist連携

gist.markdown

gist連携

A Pen by nomura on CodePen.

License.

index.markdown

この下にキーに対応した文字列を表示させる

refactoring.js

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

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

script.js

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;
  }
}

scripts

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

style.css

p {
  font-size:20px;
}