Cypher Grid

by Eric Miller

HTML

<div class="controls">
    <input class="in-gridsize" type="text" />
    <button class="action-build">Build</button>
</div>
<table>
    <thead></thead>
    <tbody></tbody>
</table>

CSS

body {
    font-size:14px;
}
table {
    border-spacing:0;
    border-collapse:collapse;
}
td {
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    border-right:1px solid #CCC;
    border-bottom:1px solid #CCC;
}
th, .col-id {
    background:#CCC;
    font-weight:bold;
}

JavaScript

//[CONSTANTS]
var DEFAULT_GRIDSIZE = 12;

function randomChar() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz!@#$%^&*+=-",
        rnum = Math.floor(Math.random() * chars.length);
    return chars.substring(rnum, rnum + 1);
}

function build() {
    var tr, td,
    gridsize = $('.in-gridsize').val();
    $('tbody, thead').html('');
    tr = $('<tr><th></th></tr>');
    for (var i = gridsize; i > 0; i--) { // create rows
        $(tr).append($('<th>' + i + '</th>'));
    }
    $('thead').append(tr);
    for (var i = gridsize; i > 0; i--) { // create rows
        tr = $('<tr></tr>');
        $(tr).append($('<td class="col col-id">' + i + '</td>'));
        for (var ii = gridsize; ii > 0; ii--) { // create td
            td = $('<td>' + randomChar() + '</td>');
            $(tr).append(td);
        }
        $('tbody').append(tr);
    }
}

function init() {
    $('.action-build').on('click', build);
    $('.in-gridsize').val(DEFAULT_GRIDSIZE);
}

$(document).ready(init());