JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div id="mainChessBoard">
</div>

<div id="mainChessBoard1">
</div>

CSS

#mainChessBoard, #mainChessBoard1, #myChessBoard
{
    width:160px;
    height:160px;
    border:1px solid black;
}

div
{
 width:20px;
 height:20px;
 float:left;
}

JavaScript

for (var i=0; i< 64; i++){
    document.getElementById("mainChessBoard").
    appendChild(document.createElement("div")).
    style.backgroundColor = parseInt((i / 8) + i) % 2 == 0 ? 'grey' : 'white';    
}

for (let i=0; i< 64; i++) {
document.getElementById("mainChessBoard1").
appendChild(document.createElement("div")).
style.backgroundColor = parseInt((i/8) +i) % 2 === 0 ? "black" : "yellow";
}

const divColors = document.querySelector("div");

for(let i=0; i< 16; i++) {
divColors.children[i].textContent = "W"
}
for(let i=48; i< 64; i++) {
divColors.children[i].textContent = "B"
}



divColors.children[0].addEventListener("click", () => {console.log("Hey")})
console.log(divColors.children[0].style.backgroundColor);