JSFiddle - React, Tailwind, and code Playground

by Tigran Hovhannisyan

HTML

<div id="top">
		<input type="text">
		<button onclick= " click2() "> 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;

function click2(){
	 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 + ' onclick="click1(this)" 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>')
}
	    
	    

function window.click1(element){
		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"}
					
					if(proverka() ){alert ("Выиграл пользователь")}
					else if( secondProverka() ) {alert("Выиграл компьютер") 	}	
					else { computerTurn() }
				
				
				}
		
		else {alert("Ячейка  уже занята"),clickScore=clickScore+0}
   
  
   	 }


function computerTurn(){

  comChoice =  Math.floor((Math.random() * s.length  ) );
   if(s[comChoice].innerText == 'X'||s[comChoice].innerText =='O'){
   console.log(s[comChoice].innerText);

  computerTurn(); } 
  else{ 
   s[comChoice].innerHTML="O"
    s[comChoice].style.cursor= "default"
     s[comChoice].style.color="white"
      s[comChoice].style.fontSize="40px"
 ...