JSFiddle - React, Tailwind, and code Playground

by Ivan Pshenitsyn

HTML

<div id="top">
		<input type="number">
		<button id="button">create</button>
	</div>

	<div id="center"></div>

CSS

*{margin:0;padding:0;}
body{background:#1f1c1c;}
#top{top:20px;float:left;}
#center{margin:4% auto;}

JavaScript

var s=document.getElementsByTagName("td");
	var clickScore=1;
	var center=document.getElementById("center");
	var input=document.getElementsByTagName("input")[0];
	var tdQuan=input.value;
	var classZ=document.getElementsByClassName("z"+tdQuan);
	var comChoice=0;

document.getElementById('button').addEventListener('click', function(){
		console.log(222);
	 	tdQuan=input.value
		if(isNaN(tdQuan)){
			alert("Ведённое значение не является числовым. Введите  цифру")
		}	else {
    	createTab()
    }
});

    
function createTab(){

 var table="";
 var rows=10;
	
	for (var z=1; z<=tdQuan; z++) {
		 table+='<tr >';
		   for (var x=1; x<=tdQuan; x++){
		      table+='<td class=z' + x + ' style="border:1px solid #565252;width:70px;height:70px;"></td>'
	        }
		      table+='</tr>';
	}
		
	 center.innerHTML=('<table id="myTable" style="border:2px solid #6d6464;margin:0 auto;text-align:center;">'+table+'<table>');
   
   setTdListeners();   
}

var setTdListeners = function(){
    var tds = document.getElementsByTagName('td');
    for(var i = 0; i < tds.length; i++){
      tds[i].addEventListener('click', function(){
      	var element = this;
        if(element.innerText==""){
          clickScore=clickScore+2
          if(clickScore%2==1 ){
            element.style.cursor= "default";
            element.style.color="white";
            element.style.fontSize="40px";
            element.style.textAlign="center";
            element.innerHTML="X";
          }	else {
            element.style.cursor= "default";
            element.style.color="white";
            element.style.fontSize="40px";
            element.style.textAlign="center";
            element.innerHTML="O";
          }
          computerTurn();
          proverka();
        }	else {
          alert("Ячейка  уже занята");
          clickScore = clickScore+0;
        } 
      })
    };
  };


function computerTurn(){
  comChoice =  Math.floor((Math.random() * s.length ) );
  if(s[comChoice].innerText ==...