Sudoku

Sudoku generator / riddle built in vanilla Javascript

by mles

HTML

<div class="frame">
    <div class="buttons">
        <p>
            <button id="seeGetParameters">See Get Parameters</button>
        </p>
        <p>
            <button id="tableCreate">Create Table</button>
        </p>
    </div>
</div>

CSS

.frame {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.container {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: space-around;

    height: 91vmin;
    width: 91vmin;
    background: black;
}

.block {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: space-around;

    height: 30vmin;
    width: 30vmin;
    background: lightgrey;
}

.cell {
    color: red;
    text-align: center;
    vertical-align: middle;
    line-height: 10vmin;
    font-size: 5vmin;

    height: 9.5vmin;
    width: 9.5vmin;
    border: 1px solid black;
    background: white;
}

dialog {
    background: #e8e8e8;
    border: 1px solid #dadada;
    font-family: sans-serif;

    position: relative;
    left: -6.25vmin;
    top: -6.25vmin;
    z-index: 999;

    padding: 0;
    border: 0;
}

.popupblock {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: space-around;

    height: 22vmin;
    width: 22vmin;
    background: lightgrey;
}

.popupcell {
    color: black;
    text-align: center;
    vertical-align: middle;
    line-height: 7vmin;
    /*font-size: 4vmin;*/
    font-size: 2vmin;

    height: 7vmin;
    width: 7vmin;
    border: 1px solid black;
    background: white;
}

JavaScript

var urlParams;

function createEmptySudoku() {
    var sudoku = [];
    for (var x = 1; x <= 9; x++) {
        sudoku[x] = [];
        for (var y = 1; y <= 9; y++) {
            sudoku[x][y] = [];
        }
    }
    return sudoku;
}

var sudoku = createEmptySudoku();
sudoku[1][1]['value'] = 1;
sudoku[9][1]['value'] = 3;
sudoku[5][2]['value'] = 6;
sudoku[3][3]['value'] = 3;
sudoku[6][3]['value'] = 1;

sudoku[2][4]['value'] = 7;
sudoku[4][4]['value'] = 1;
sudoku[3][5]['value'] = 8;
sudoku[7][5]['value'] = 5;
sudoku[6][6]['value'] = 3;
sudoku[8][6]['value'] = 4;

sudoku[4][7]['value'] = 8;
sudoku[7][7]['value'] = 6;
sudoku[5][8]['value'] = 1;
sudoku[1][9]['value'] = 6;
sudoku[9][9]['value'] = 7;


var background = '#C0FFC0';

sudoku[3][1]['background'] = background;
sudoku[5][1]['background'] = background;
sudoku[6][1]['background'] = background;
sudoku[8][1]['background'] = background;

sudoku[3][2]['background'] = background;
sudoku[5][2]['background'] = background;
sudoku[6][2]['background'] = background;
sudoku[9][2]['background'] = background;

sudoku[1][3]['background'] = background;
sudoku[2][3]['background'] = background;
sudoku[8][3]['background'] = background;
sudoku[9][3]['background'] = background;

sudoku[1][4]['background'] = background;
sudoku[6][4]['background'] = background;
sudoku[7][4]['background'] = background;
sudoku[9][4]['background'] = background;

sudoku[2][5]['background'] = background;
sudoku[3][5]['background'] = background;
sudoku[4][5]['background'] = background;
sudoku[5][5]['background'] = background;

sudoku[2][6]['background'] = background;
sudoku[5][6]['background'] = background;
sudoku[7][6]['background'] = background;
sudoku[8][6]['background'] = background;

sudoku[1][7]['background'] = background;
sudoku[4][7]['background'] = background;
sudoku[7][7]['background'] = background;
sudoku[9][7]['background'] = background;

sudoku[4][8]['background'] = background;
sudoku[6][8]['background'] = background;
sudoku[7][8]['background']...