JSFiddle - React, Tailwind, and code Playground

by Eric Abutaliev

HTML

<div id="main">
</div>

CSS

#main{
    box-sizing: border-box;
    width: 400px;
    height: 400px;
    font-size: 30px;
}
.block{
    margin: 0;
    box-sizing: border-box;
    float: left;
    border: 1px dotted grey;
}
.block:nth-child(even){
    background: #3e5f92;
    color: white;
}

JavaScript

var view={
    area: $("#main"),
    arr: [],
    init: function(size){
        if (size%2==0){ throw Error("Area size must be an odd number"); }
        for (var i=0; i<size; i++){
            this.arr[i]=[];
            for (var j=0; j<size; j++){
                this.area.append("<div class=block></div>");
                this.arr[i][j]={
                    el: this.area.find("div:last"),
                    state: ""
                }
            }
        }
        this.area.find("div").css({
            width: this.area.width()/size,
            height: this.area.height()/size
        });
    },
    print: function(){
        for (var i=0; i<this.arr.length; i++){
            for (var j=0; j<this.arr[i].length; j++){
                var a=this.arr[i][j];
                a.el.text( a.state );   
            }
        }
    }
}