sudoku game

HTML

<script src="http://raymondmayjr.com/sudoku/js/sudoku.js"></script>
<div id="game">
</div>

CSS

#game {
    padding: 10px;
}
tr {
    margin:0;
    padding:0;
}
td {
    text-align: center;
    font-size: 24px;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid lightgray;
}

.first-row {
    border-top: 1px solid #000;
}

.first-col {
    border-left: 1px solid #000;
}

.mini-right {
    border-right: 1px solid #000;
}

.mini-bottom {
    border-bottom: 1px solid #000;
}

.cell-selected {
    background: lightBlue;
}

JavaScript

//Generate a complete puzzle
var grid = CU.Sudoku.generate();
 
//Clear 60 cells from the puzzle
CU.Sudoku.cull(grid, 60);

var table = $(document.createElement('table'));
for(var r = 0; r < 9; r++){
    var tr = $(document.createElement('tr'));
    for(var c = 0; c < 9; c++){
        var td = $(document.createElement('td'));
        if(grid.rows[r][c] !== 0){
            td.html(grid.rows[r][c]);
        }
        if(r === 0){
            td.addClass('first-row');
        }
        if(c === 0){
            td.addClass('first-col');
        }
        if((c+1) % 3 === 0){
            td.addClass('mini-right');
        }
        if((r+1) % 3 === 0){
            td.addClass('mini-bottom');
        }
        tr.append(td);
    }
    table.append(tr);
}
    
$('#game').append(table);