JSFiddle - React, Tailwind, and code Playground

JS - ex draw chess board

by Ben Clayton

HTML

<div id='board'></div>

CSS

#board {
    border:8px solid brown;
    display:inline-block;
    margin-top:40px;
    margin-left:40px;
}

.square {
        width:20px;
        height:20px;
        float:left;
        }

.square.white {background-color:#FFFFFF}
.square.black {background-color:#000000}

JavaScript

function draw_board(rows,cols){
    var s='';
    for(var r=0;r<rows;r++){
        for(var c=0;c<cols;c++){
            var cls= (r%2==c%2)?"black":"white";
            s+="<div class='square "+cls+"'></div>";
        }
        s+="<div style='clear:both'></div>";
     }
    document.getElementById('board').innerHTML=s;

}
draw_board(8,8)