keyboardCodeGenerator/script.js at main · CSS-Viki/keyboardCodeGenerator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// METHOD ONE
window.addEventListener("keydown", (e) => {
  const container = document.querySelector(".container");
  container.innerHTML = `
        <div class="first">
        <p class="codes">e.key</p>
        <div class="code-name">${e.key === " " ? "Space" : e.key}</div>
        </div>
        <div class="first">
        <p class="codes">e.keyCode</p>
        <div class="code-name">${e.keyCode}</div>
        </div>
        <div class="first">
        <p class="codes">e.code</p>
        <div class="code-name">${e.code}</div>
        </div>`;
});

// METHOD TWO
// key: value,

// function keyCodeElements(e) {
//   const keyCodes = {
//     "e.key": e.key === " " ? "Space" : e.key,
//     "e.keyCode": e.keyCode,
//     "e.code": e.code,
//   };

//   for (let key in keyCodes) {
//     const container = document.querySelector(".container");
//     container.innerHTML = "";

//     const div = document.createElement("div");
//     div.className = "first";
//     const paragraph = document.createElement("p");
//     const btn = document.createElement("button");

//     const keyName = document.createTextNode(key);
//     const keyValue = document.createTextNode(keyCodes[key]);

//     paragraph.appendChild(keyName);
//     btn.appendChild(keyValue);
//     div.appendChild(para);
//     div.appendChild(btn);

//     container.appendChild(div);
//   }
// }

// window.addEventListener("keydown", keyCodeElements);