JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

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="64" width="40" size="3" onChange="GRASP.start();">
		x
		<input id="cols" type="number" min="1" max="50" value="64" width="40" size="3" onChange="GRASP.start();">
	</div>
	<div id="grid" class="gridContainer"></div>


	<div id="matrix" class="autocorrMatrixContainer"></div>
</div>

CSS

@charset "UTF-8";
/* CSS Document */

.texthotpink { color: #CC6699 }
.textpink { color: #FFCCCC }
.textblue { color: #0099CC }
.textteal { color: #588485 }

.gridLayout {
	position: absolute;
/*	height: 100%; */
}

.autocorrMatrixContainer {
    position: absolute;
/*    float: left; */
/*    bottom: 0px; */
	display: block;
	background: none;
	font-family: Arial, Helvetica, Verdana, sans-serif;
}

.autocorrMatrixCell {
	width: 16px;
	height: 16px;
	position: absolute;
	z-index: 0;
	font-size: xx-small;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	line-height: 2em;
/*	padding-top: 0.25em; */
}

.autocorrMatrixCellWrapper {
	width: 16px;
	height: 16px;
	position: absolute;
	background: none;
	z-index: 2;
	border-style: solid outset;
	border-width: 1px;
	border-color: black;
	font-size: x-small;
}

.autocorrMatrixCellCoordText {
	font-size: xx-small;
	font-weight: normal;
	font-style: normal;
	padding-top: 2px;
	padding-left: 3px;
	color: #444444;
	text-align: left;
	vertical-align: top;
}

.autocorrMatrixCellValid {
	background: #00FF00;
}

.autocorrMatrixCellInvalid {
	background: #FF4400;
}

.autocorrMatrixCellSelected {
	background: none;
}

.autocorrMatrixCellUnselected {
	background: none;
}

.gridContainer {
/*	width: inherit; */
/*	float: left; */
	position: relative;
	top: 10px;
	padding: 0 0 0 0;
	display: block;
	background: none;
	font-family: Arial, Helvetica, Verdana, sans-serif;
}

.cell {
	width: 36px;
	height: 36px;
	position: absolute;
	z-index: 0;
	
/*
	font-size: 16pt;
*/
	font-size: x-large;
	font-weight: normal;
	font-style: normal;
	color: #888888;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	line-height: 2em;
/*	padding-top: 0.25em; */
}

.cellSelected {
	background: #00CCFF;
}

.cellUnselected {
	background: none;
}

.cellCoordinates {
	width: 36px;
	height: 36px;
	position: absolute;
	background: none;
	z-index: 1;
}

.cellWrapper...

JavaScript

(function(GRASP, $){
    var GRID_ROWS,
        GRID_COLS,
        GRID_ELEMENT,
        MATRIX_ROWS,
        MATRIX_COLS,
        MATRIXHEADER_ELEMENT,
        MATRIX_ELEMENT,
        A,C;

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

    GRASP.start = function(){
        GRID_ROWS = $("#rows").val();
        GRID_COLS = $("#cols").val();
        MATRIX_ROWS = GRID_ROWS * 2 - 1;
        MATRIX_COLS = GRID_COLS * 2 - 1;
        createGrid();
        //createAutocorrelationMatrix();
    };

    function createGrid()
    {
        GRID_ELEMENT = $("#"+GRASP.config.gridContainer);
        GRID_ELEMENT.html(""); // Clear Grid ;)
        var coord;
        var cell; // Contains the 1 or 0 based upon the cell selection
        var newGrid = $('<div id="grid" class="gridContainer"/>');

        for(var i=1; i<=GRID_ROWS; i++){
            for(var j=1; j<=GRID_COLS; j++){
                coord = "" + i + "," + j;

                $(document.createElement("div"))
                    .addClass("cellWrapper")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * 36, 10) + "px")
                    .css("top", parseInt((i-1) * 36, 10) + "px")
                    .width(36).height(36)
                    .data("row", i).data("col", j)
                    .appendTo(newGrid)
                    .on("click", cellClick)
                    .on("mouseenter", {isMatrix: false}, cellMouseEnter)
                    .on("mouseleave", cellMouseLeave);

                $(document.createElement("div"))
                    .addClass("cell cellUnselected")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * 36, 10) + "px")
                    .css("top", parseInt((i-1) * 36, 10) + "px")
                    .text("0")
                    .appendTo(newGrid);
            }
        }
        
        GRID_ELEMENT.replaceWith( newGrid...