<div id="container">
</div>

<script>
function createGrid(m, n, s) {
  const rowsRep = "(" + m + ", " + s + ")";
  const colsRep = "(" + n + ", " + s + ")";
  
  const pDiv = document.createElement("div");
  pDiv.style.display = "grid";
  pDiv.style.gridTemplateColumns = "repeat" + colsRep;
  pDiv.style.gridTemplateRows = "repeat" + rowsRep;
  pDiv.style.gap = "4px";
  
  for(let i = 0; i < m; i++) {
    for(let j = 0; j < n; j++) {
      const cDiv = document.createElement("div");
      cDiv.style.width = s;
      cDiv.style.height = s;
      cDiv.style.background = "var(--bg)";
      cDiv.style.border = "1px solid var(--muted-border)";
      cDiv.style.borderRadius = "4px";
      pDiv.append(cDiv);
    }  
  }
  
  return pDiv;
}

function createButtonWithCaption(caption) {
  let btn = document.createElement("button");
  btn.innerHTML = caption;
  return btn;
}

function toGridAddButtons(grid, btns, idxs) {
  let cDivs = grid.children;
  let n1 = btns.length;
  let n2 = idxs.length;
  let n = (n1 < n2) ? n1 : n2;
  
  for (let i = 0; i < n; i++) {
    let idx = idxs[i];
    let btn = btns[i];
    let cDiv = cDivs[idx];
    cDiv.style.padding = "0";
    cDiv.style.display = "flex";
    cDiv.append(btn);
    btn.style.flexGrow = "1";
  }
  
  for(let cDiv of cDivs) {
    cDiv.style.border = "0";
  }
}

function createArrowKeysKeypad() {
  // create button element
  let uBtn = createButtonWithCaption("&uparrow;")
  let dBtn = createButtonWithCaption("&downarrow;")
  let lBtn = createButtonWithCaption("&leftarrow;")
  let rBtn = createButtonWithCaption("&rightarrow;")
  let btns = [uBtn, rBtn, dBtn, lBtn];
  
  // create grid element
  let grid = createGrid(3, 3, "30px");
  
  // add buttons to grid with certain index
  let idxs = [1, 5, 7, 3];
  toGridAddButtons(grid, btns, idxs);
  
  // create btns in grid
  grid.btns = btns;
  
  return grid;
}

function createTextarea() {
  let txa = document.createElement("textarea");
  txa.style.width = "150px";
  txa.style.height = "100px";
  txa.style.overflowY = "scroll";
  
  return txa;
}

function printLine(txa, str) {
  let vals = txa.value;
  
  if(vals.length == 0) {
    vals = str;
  } else {
    vals += "\n" + str;
  }
  
  txa.value = vals;
  txa.scrollTop = txa.scrollHeight;
}
</script>

<script>
// get container element, set style
let cnt = document.getElementById("container");
cnt.style.marginTop = "1em";

// create textarea element
let txa = createTextarea();
txa.style.marginLeft = "1em"

// create arrow keys keypad
let keypad = createArrowKeysKeypad();
keypad.style.float = "left";

// attach event handler to keypad buttons
keypad.btns[0].addEventListener("click", () => { printLine(txa, "up") });
keypad.btns[1].addEventListener("click", () => { printLine(txa, "right") });
keypad.btns[2].addEventListener("click", () => { printLine(txa, "down") });
keypad.btns[3].addEventListener("click", () => { printLine(txa, "left") });

// append element to container
cnt.append(keypad);
cnt.append(txa);
</script>