KQText Font Builder

by sperske

HTML

<input name='height' value='8' />x<input name='width' value='5' /><br/>
<table id='Grid'></table>
<br/>
<span id='Value'>

CSS

input {
    width: 50px
}
table {
    border-collapse: collapse;
}
td {
    width: 25px;
    height: 25px;
    border: 1px solid black;
}
td.selected {
    background-color: grey;
}

JavaScript

var draw = function() {
    var height = $('input[name=height]').val(),
        width = $('input[name=width]').val(),
        table = $('#Grid'),
        value = $('#Value'),
        row,
        col,
        tr;

    table.empty();
    value.html('');
    for(row = 0; row < height; row++) {
        tr = $('<tr>');
        for(col = 0; col < width; col++) {
            tr.append('<td>')
        }
        table.append(tr);
    }
}
$(draw);
$('input').on('keyup change', draw);

$('#Grid').on('click', 'td', function() {
    var height = $('input[name=height]').val(),
        width = $('input[name=width]').val(),
        table = $('#Grid'),
        value = $('#Value'),
        font = '';

    $(this).toggleClass('selected');

    $('td', table).each(function() {
        font = ($(this).hasClass('selected') ? '1' : '0') + font;
    });
    value.html('0'+parseInt(font, 2).toString(16));
});