Magic Square (Single even)

Make single even magic square.

by Tinytsunami

HTML

<div id="demo">
  N = <input type="number" value="6" /> , DELAY = <input type="number" value="200" /> ms, <button>Create</button>
  <div></div>
  <div id="saved_number"></div>
</div>

CSS

body {
  color: #ffffff;
  background: #20262e;
  font-family: monospace, sans-serif;
}

#demo {
  padding: 5px;
}

#demo input {
  width: 60px;
  color: #ffffff;
  background: #20262e;
  outline: none;
}

#demo input[type="number"] {
  border: none;
  border-bottom: 1px solid #ffffff;
}

#demo button {
  color: #ffffff;
  background: #20262e;
  border: 1px solid #ffffff;
  outline: none;
}

#demo button:hover {
  color: #20262e;
  background: #ffffff;
  border: 1px solid #ffffff;
}

#demo div table {
  border: 1px solid #ffffff;
  margin-top: 20px;
}

#demo table td {
  text-align: center;
  width: 28px;
  height: 28px;
  border: 1px solid #ffffff;
}

#saved_number {
  width: 100%;
  margin-top: 20px;
  overflow-wrap: break-word;
}

#k {
  color: #3399FF;
}

JavaScript

(function() {
  /* get elements */
  let demo = document.getElementById('demo');
  let input = demo.getElementsByTagName('input')[0];
  let delay = demo.getElementsByTagName('input')[1];
  let button = demo.getElementsByTagName('button')[0];
  let show = demo.getElementsByTagName('div')[0];
  let command = demo.getElementsByTagName('div')[1];

  /* define letiable */
  let n; // square's size
  let map = []; // td nodes
  let arr = []; // numbers that isn't in main diagonal
  let odd_size; // subsquare(create by n/2)
  let k; // k = (n - 2) / 4
  let clock; // interval

  /* show style */
  let selectColor = "#3f4b5a";
  let splitColor = "#5a3f3f";
  let calcColor = "#3f5a3f";
  let finishColor = "transparent";

  /* when create be clicked */
  button.onclick = function() {
    if (clock) clearInterval(clock);

    n = input.value;
    map = [];
    odd_map = [];

    if (n % 2 != 0 || n % 4 == 0)
      show.innerHTML = "please input number single even.";
    else {
      /* make nxn odd table(by odd_size) */
      show.innerHTML = "";
      command.innerHTML = "";
      let table = document.createElement('table');
      table.setAttribute('border', '1');
      table.setAttribute('cellspacing', '0');

      let tbody = document.createElement('tbody');
      for (let i = 0; i < n; i++) {
        let tr = document.createElement('tr');
        map[i] = [];
        for (let j = 0; j < n; j++) {
          let td = document.createElement('td');
          map[i][j] = td;
          tr.appendChild(td);
        }
        tbody.appendChild(tr);
      }
      table.appendChild(tbody);
      show.appendChild(table);

      /* create subsquare numbers */
      let x = 0,
        tx = 0;
      let y = 0,
        ty = 0;
      let v = 1;
      odd_size = n / 2;
      while (v <= odd_size * odd_size) {
        if (v == 1) {
          x = Math.floor(odd_size / 2);
          y = 0;
        } else {
          x = (x - 1) < 0 ? odd_size - 1 : x - 1;
          y = (y - 1) < 0 ?...