Draw a checkerpiece over a table cell within the first three rows

Question

I am trying to draw pieces on checkerboard cells. I have this code that draws a checkerboard using a table element. How to draw checker pieces over the first three rows with black squares

.myboard {
padding: 5px;
width: 800px;
height: 800px;
border: 2px solid white;
margin: auto;
grid-template-columns: repeat(8, 100px); /* Adjust size based on your preference */
grid-template-rows: repeat(8, 100px);
}

/*declare the properties of a square here*/
.square{
width:100px;
height:100px;

}
/*modify the css properties below to alter the style of the board*/
.black {
background-color:rosybrown;
}

.white {
background-color: mintcream;
}
/* the css style below controls the how the circles look like*/
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px; /* Adjust circle size */
height: 30px; /* Adjust circle size */
background-color: black;
border-radius: 50%;
}
<!--the html-->
<table class="table" id="checkertable">
</table>
<!--the javascript code that gives the table a checkerboard pattern-->
function createCheckerboard() {
const table = document.getElementById('checkertable');
for (let row = 0; row < 8; row++) {
const newRow = table.insertRow();
for (let col = 0; col < 8; col++) {
const newCell = newRow.insertCell();
newCell.classList.add('square');
if ((row + col) % 2 === 0) {
newCell.classList.add('white');
//draw pieces over the dark squares on the first three rows

} else {
newCell.classList.add('black');

}
}
}
}

window.onload = () => createCheckerboard();

Answer 1

You can use the unicode characters for the pieces.

https://en.m.wikipedia.org/wiki/Chess_symbols_in_Unicode

To get better help, save your code in the playground, and post a link here, so people can try and review it more easily.

Answer 2

Okay

Answer 3

Looks like you already figured it out.
https://sololearn.com/compiler-playground/Wrg7FFsOF6kW/?ref=app