// Select color input

var colorInput = $('#colorPicker');

// Select size input

var inputHeight = $('#input_height');
var inputWidth = $('#input_width');

// Define the canvas
var pixelCanvas = $('#pixel_canvas');

// When size is submitted by the user, call makeGrid()

$('#sizePicker').submit(function(event){
    makeGrid();
    event.preventDefault();
});

pixelCanvas.on('click', 'td', function(){
    $(this).css('background-color',colorInput.val());
});

function makeGrid() {
// Your code goes here!

    // Clear the canvas before creating a new one

    pixelCanvas.children().remove('tr');

    // Assigns values to height and width

    var height = inputHeight.val();
    var width = inputWidth.val();

    // Build the canvas

    // Create rows
    for (maxRows = 0; maxRows < height; maxRows++)
    {
        $('<tr></tr>').appendTo(pixelCanvas);
    }

    // Create columns
    for (maxCols = 0; maxCols < width; maxCols++)
    {
        $('<td></td>').appendTo('tr');
    }
}