Magic Square (Double even)

Make double even magic square.

by Tinytsunami

HTML

<div id="demo">
  N = <input type="number" value="4" /> , 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;
}

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 show2 = 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 clock; // interval

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

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

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

    if (n % 4 != 0)
      show.innerHTML = "please input number multiple of 4.";
    else {
      /* make nxn table */
      show.innerHTML = "";
      show2.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 numbers */
      let v = 1;
      for (let i = 0; i < n; i++)
        for (let j = 0; j < n; j++) {
          map[i][j].innerHTML = v;
          if (i % 4 == 0 || i % 4 == 3)
            if (j % 4 == 0 || j % 4 == 3)
              map[i][j].style.backgroundColor = fixedColor;
          if (i % 4 == 1 || i % 4 == 2)
            if (j % 4 == 1 || j % 4 == 2)
              map[i][j].style.backgroundColor = fixedColor;
          v += 1;
        }

      let reGet = false;
      let i =...