JSFiddle - React, Tailwind, and code Playground

by ravan

HTML

<input id="num" type="text" placeholder="Número" /> <input id="btn" type="button" value="Gerar!" /><br /><br />
<div id="result"></div>

CSS

#result {
    text-align: center;  
}

JavaScript

function fill(m, n, x) {
    n *= 2;
    for (var i = x - 1; i <= n - x; i++) {
        m[x - 1][i] = m[n - x][i] = x;
        m[i][x - 1] = m[i][n - x] = x;
    }
    return m;
}

function prepare(n) {
    n *= 2;
    m = new Array(n);
    for (var i = 0; i < n; i++) {
        m[i] = new Array(n);
    }
    return m;
}

function quad(n) {
    m = prepare(n);
    for (var i = 1; i <= n; i++) {
        m = fill(m, n, i);
    }
    return m;
}

/* só para parte visual */
document.getElementById("btn").onclick = function() {
    num = document.getElementById("num").value;
    matriz = quad(num);
    matriz = matriz.join('<br/>').replace(/,/g, ' ')
    document.getElementById("result").innerHTML = matriz;
}