Magic Square (Odd)

Make odd magic square.

by Tinytsunami

HTML

<div id="demo">
  N = <input type="number" value="5" /> , DELAY = <input type="number" value="200" /> ms, <button>Create</button>
  <div></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;
}

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

  /* define variable */
  let n; // square's size
  let map = []; // td nodes
  let clock; // interval

  /* show style */
  let nowColor = "#3f4b5a";
  let finishColor = "transparent";

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

    map = [];
    n = input.value;

    if (n % 2 == 0)
      show.innerHTML = "please input odd number.";
    else {
      /* make nxn table */
      show.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 x = 0;
      let y = 0;
      let v = 1;
      let tx, ty;
      clock = setInterval(function() {
        map[y][x].style.backgroundColor = finishColor;
        if (v == 1) {
          x = Math.floor(n / 2);
          y = 0;
        } else {
          x = (x - 1) < 0 ? n - 1 : x - 1;
          y = (y - 1) < 0 ? n - 1 : y - 1;
          if (parseInt(map[y][x].innerHTML) > 0) {
            x = tx;
            y = ty;
            y = (y + 1) > n - 1 ? 0 : y + 1;
          }
        }
        tx = x;
        ty = y;
        map[y][x].innerHTML = v;
        map[y][x].style.backgroundColor = nowColor;
        v += 1;
        if (v > (n * n))
         ...