JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

<div id='logger'>

</div>
<table id='prop'>

  <tr class='row'>
    <td class='cell'></td>
    <td class='cell'></td>
    <td class='cell'></td>
  </tr>
  
  <tr class='row'>
    <td class='cell'></td>
    <td class='cell'></td>
    <td class='cell'></td>
  </tr>
  
  <tr class='row'>
    <td class='cell'></td>
    <td class='cell'></td>
    <td class='cell'></td>
  </tr>

</table>

CSS

.cell{
  height:50px;
  width:50px;
  background-color:#2a2a2a;
}

JavaScript

var logger = function(msg){
	var loggerElem = document.getElementById('logger');
  loggerElem.textContent = msg
}

var cells = document.querySelectorAll('.cell')
const BOARD_WIDTH = 3;
logger(cells.length);
 var makeMove = (gameSquare, row, cell)=>{
  	
    logger(`${gameSquare}, ${row}, ${cell}`);
  
 }
for(let index=0; index < cells.length; index++){
	var cell = cells[index];
  
/*   6
  
  1,2
  
  5
  1,1
  
  8
  2,1 */
  

  cell.addEventListener('click', ()=>{
  		
     const row = Math.floor(index / BOARD_WIDTH);
    const col = index % BOARD_WIDTH;
    makeMove(cells, row, col);
      
      
  });
  
  
	

}