Father-son project: Drawing on a grid

Question

I made this bit of code that uses jQuery in a simple HTML file to see if my son would think it is fun/interesting and to help me with my jQuery skills. The thing that was hard was the selectors towards the bottom of the script block. I am wondering if there is a better way to do this. Warning: it auto-refreshes to 're-pixel' the screen (for lack of a better word).

Also I am building tables but I am sure they are not right, it was my intention to grab the innerwidth and innerheight and create a table that is divided into fractional squares that perfectly fill the view-able browser screen. I had trouble getting the logic right.

Also, I had to place a span tag in side the <td> blocks so the wouldn't collapse on me. I wanted to do this in divs but I wasn't sure how to get the same effect.

$(document).ready(function () {
// find random colors
function colorMe() {
    var newColor = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6);
    return newColor;
}
// not sure about this but i got it to work in some wierd way.
var wb = Math.floor(window.innerWidth / 200);
var hb = Math.floor(window.innerHeight / 200);

// table buildout append cells and rows to the table. 
// Note the yucky span tag to prevent td collapse 
var table = $('<table border=1 bordercolor=white cellpadding=0 cellspacing=0 width="100%" height="100%"></table>');
for (i = 0; i < 100; i++) {
    row = $('<tr></tr>');
    for (j = 0; j < 200; j++) {
        var row1 = $('<td bgcolor="' + colorMe() + '" width="' + wb + '"></td>').html('<div style="display:inline-block;height:' + hb + 'px;"></div>');
        table.append(row);
        row.append(row1);
    }
}
// table to body append
$('body').append(table);

// mouse event to emulate a pen commenting out the last two give it a fun calligraphy look
$("td").hover(function () {
    var whoIsMe = $(this).index();

    $(this).stop()
        .animate({
        "opacity": "0"
    }, "fast");

    $(this).next("td")
        .stop()
        .animate({
        "opacity": "0"
    }, "fast");

    $(this).prev("td")
        .stop()
        .animate({
        "opacity": "0"
    }, "fast");

    $(this).parent()
        .next()
        .children("td")
        .eq(whoIsMe)
        .stop()
        .animate({
        "opacity": "0"
    }, "fast");

    $(this).parent()
        .prev()
        .children("td")
        .eq(whoIsMe)
        .stop()
        .animate({
        "opacity": "0"
    }, "fast");
});
// eventually reload for a fresh palette of colored squares
setTimeout(function () {
    window.location.reload(1);
}, 50000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Here is a link to a jsfiddle.

Answer 1

To make them square:

var size = Math.max(window.innerWidth,window.innerHeight)/200;
var xbound = Math.floor(window.innerWidth/size);
var ybound = Math.floor(window.innerHeight/size);

Simply use xbound and ybound as the upper limits in the for loops.

Try to use CSS where you can.

Additionally, your script loads very slowly because of the excessive DOM manipulation. Rather than adding each element to the page one by one, create a single object and then paste that in one go. Just add up the html code with the += operator before inserting it into the page.

Answer 2

Some quick advice since this already has an accepted answer - you will make things quickly less confusing if you use a few other javascript libraries.

• At the very least you should always be using lodash, underscore, or surgarjs. Either one of these brings so much to the table as far as making loops and the idioms of javascript make actual sense.
• If you want to stick with outputting html, at least use a template system like handlebars. It will clear all that javascript-mixed-with-html mess right up.
• Beyond that you get into mvvm and routing libraries like knockout or sammyjs.
• And if you want some real structure, a full-on framework like AngularJs or EmeberJs is almost certainly overkill for such a project but many novices find that it makes their learning javascript significantly easier.