My latest project involves creating an interactive sudoku solver. I've successfully created a grid made up of various elements to resemble an empty sudoku grid. However, my challenge lies in getting the numbers to display within the grid cells. Click here for the code
function createGrid() {
for (var rows = 0; rows < 9; rows++) {
for (var columns = 0; columns < 9; columns++) {
cell = "<div class='grid' "
if (rows%3==2) {
cell += "style='box-shadow: 0 1px 0 #000, "
} else {
cell += "style='box-shadow: 0 1px 0 rgb(150, 150, 150), "
}
if (rows%3==0) {
cell += "0 -1px 0 #000, "
} else {
cell += "0 -1px 0 rgb(150, 150, 150), "
}
if (columns%3==2) {
cell += "1px 0 0 #000, "
} else {
cell += "1px 0 0 rgb(150, 150, 150), "
}
if (columns%3==0) {
cell += "-1px 0 0 #000;'>4</div>"
} else {
cell += "-1px 0 0 rgb(150, 150, 150);'>3</div>"
}
$("#container").append(cell);
}
}
$(".grid").width(90);
$(".grid").height(90);
}
$( document ).ready(function() {
createGrid()
});
Although each cell contains either a 3 or 4, they are not visible on the grid as intended.