JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div id = "wrapper">
       
<table></table>

  <div id = "time">
    <button id = "gen">Создать новую таблицу</button>
    <button class = "refresh">Обновить</button>
    <button id = "hard">Сложнее</button>
    <button id = "easy">Легче</button>
  </div>


        
</div>

CSS

table{margin-top:15px;}

td{border:1px solid red;
width:35px;
height:35px;
font-size:18px;
text-align:center;}

#wrapper{margin:25px;
width:400px;
height:400px;
}

.refresh{margin-left:5px;}

#time{
    position:relative;
    top:15px;
    display:inline;}

JavaScript

var max, numOfRows, i = 1, j = 1, x = 1, y, k, m = 0, min = 1, cellIndex = 0, index, cellNumbers = [], temp;

function getwidth(){
    temp = prompt('Введите количество столбцов:');
    temp = Number(temp);
    numOfRows = temp;
    max = numOfRows*numOfRows;
}

getwidth();
//Generation greed
function gengreed(){
    y = numOfRows;
    for(i = 1; i <= numOfRows; i++){
        $('table').append('<tr class = "'+i+'"></tr>');
        for(j = x; j <= y; j++){
            $('.'+i).append('<td id = "'+j+'"></td>')
        }
        x += numOfRows;
        y += numOfRows;
    }
}
gengreed();
//Gen array
function Generate(Gmax){
    for(k = 0; k < Gmax; k++){
    cellNumbers[k] = k + 1;
    }
}    
Generate(max);
//Fill
function Fill(Fmax){
    while(m < Fmax){
        cellIndex = Math.floor(Math.random()*(Fmax - min + 1)) + min;
            index = $('td#'+cellIndex).html();
            if(index == ""){
                $('td#'+cellIndex).html(cellNumbers[m]);  m++;       
            } 
    }  
}
    
Fill(max);
//Clear
    function Clear(){
    $('td').html('');}
    
$('.refresh').click(function(){
        Clear();
        n = 0;
        m = 0;
        Generate(max);
        Fill(max);
    });
//Generate    
$('#gen').click(function(){
    max = 0, numOfRows = 0, i = 1, j = 1, x = 1, y = 0, k = 0, m = 0, min = 1, cellIndex = 0, index = 0, cellNumbers = [], temp = 0;
    $('table').empty();
    getwidth();
    gengreed();
    Generate(max);
    Fill(max);
});
    
//Change font
function harder(){
    hard = max/2;
    alert(hard);
}

$('#hard').click(function(){
    var hardIndex = [], hardIndex2 = [], ii = 0, ij = 0;  
    for(ii = 0; ii < 4; ii++){
        hardIndex[ii] = Math.floor(Math.random()*(max - min + 1)) + min;
        $('td#'+hardIndex[ii]).css('font-size','11px');
        for(ij = 0; ij < 2; ij++){
            hardIndex2[ii] = Math.floor(Math.random()*(max - min + 1)) + min;
            $('td#'+hardIndex2[ii]).css('font-size','24px');
        }
    }
});
 ...