JSFiddle - React, Tailwind, and code Playground

by Cale Bergh

HTML

<div id="gridLayout" class="gridLayout">
    <div id="gridHeader">
            <h2>Aperture Configuration:</h2>
Grid Size:
    <input id="rows" type="number" min="1" max="50" value="10" width="40" 
size="3" onChange="GRASP.start();"/>x
            <input id="cols" type="number" min="1" max="50" value="10" 
width="40" size="3" onChange="GRASP.start();"/>
    </div>
    <div id="grid" class="gridContainer"></div>
</div>

JavaScript

function starter() { //removed $ reference and added a func name.
    var GRID_ROWS,
    GRID_COLS,
    GRID_ELEMENT;

    GRASP.config = {
        gridContainer: "grid",
        matrixContainer: "matrix",
        matrixHeader: "matrixHeader"
    };

    GRASP.start = function () {
        GRID_ROWS = $("#rows").val();
        GRID_COLS = $("#cols").val();
        createGrid();
    };

    function createGrid() {
//Love to know what the # is doing      
        GRID_ELEMENT = $("#" + GRASP.config.gridContainer);
        var cell; // Contains the 1 or 0 based upon the cell selection
        var newGrid = $('<div id="grid" class="gridContainer" ></div>');

//add cells to grid top to bottom with class 'cell and hover attribute
        for (var i = 1; i <= GRID_ROWS; i++) {
            for (var j = 1; j <= GRID_COLS; j++) {
                $("<div class='cell' data-hover-text='"+i+","+j+"'>0</div>")
                    .appendTo(newGrid);
                    newGrid.on('click', '.cell', cellClick);
            }
        }

        newGrid.height(38 * GRID_ROWS);
        newGrid.width(38 * GRID_COLS);
//add all the new cells to GRID_ELEMENT       
        GRID_ELEMENT.replaceWith(newGrid);
    }
//Changes contents of a cell from 0 to 1, fancy if else statement
    function cellClick() {
        $(this).text($(this).text() == "0" ? "1" : "0");
    }
}// removed the null, false, undefined code since I was using JQuery

// define GRASP
window.GRASP = {};

$(document).ready(function () {
    starter();
});