JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<table id="sudoku">
  <caption>Sudoku Solver</caption>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <tbody>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true">
      </td>
    </tr>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true">
      </td>
    </tr>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true">
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true">
      </td>
    </tr>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td...

CSS

table {
  border-collapse: collapse;
  font-family: Calibri, sans-serif;
}

colgroup,
tbody {
  border: solid medium;
}

td {
  border: solid thin;
  height: 1.6em;
  width: 1.6em;
  text-align: center;
  padding: 0;
}

JavaScript

let Array2D = (r, c) => [...Array(r)].map(x => Array(c).fill(0));
let board = Array2D(9, 9);
let table = document.getElementById("sudoku");
let tempBoard = table.innerHTML;

function solve() {
  tempBoard = table.innerHTML;
  var i = 0;
  var j = 0;
  for (var row of table.rows) {
    for (var cell of row.cells) {
      if (cell.innerText) {
        board[i][j] = parseInt(cell.innerText);
      } else {
        board[i][j] = 0;
      }
      j++
    }
    i++;
    j = 0;
  }
  var startTime = new Date();
  if (solveBoard(board)) {
    var endTime = new Date();
    var timeDiff = endTime - startTime;
    alert("Solved Successfuly! Solved in " + timeDiff + " milliseconds.");
  } else {
    alert("No Valid Solution!");
  }
  printBoard(board);
}

function printBoard(b) {
  var i = 0;
  var j = 0;
  for (var row of table.rows) {
    for (var cell of row.cells) {
      cell.innerHTML = b[i][j].toString();
      j++;
    }
    i++;
    j = 0;
  }
}

function backToBoard() {
  table.innerHTML = tempBoard;
}

function clearBoard() {
  var i = 0;
  var j = 0;
  for (var row of table.rows) {
    for (var cell of row.cells) {
      cell.innerHTML = "";
      board[i][j] = 0;
      j++;
    }
    i++;
    j = 0;
  }
}

function isNumberInRow(b, n, r) {
  for (var j = 0; j < 9; j++) {
    if (b[r][j] == n) {
      return true;
    }
  }
  return false;
}

function isNumberInCol(b, n, c) {
  for (var i = 0; i < 9; i++) {
    if (b[i][c] == n) {
      return true;
    }
  }
  return false;
}

function isNumberInBox(b, n, r, c) {
  var localBoxRow = r - r % 3;
  var localBoxCol = c - c % 3;
  for (var i = localBoxRow; i < localBoxRow + 3; i++) {
    for (var j = localBoxCol; j < localBoxCol + 3; j++) {
      if (b[i][j] == n) {
        return true;
      }
    }
  }
  return false;
}

function isValidPlacement(b, n, r, c) {
  return !isNumberInRow(b, n, r) && !isNumberInCol(b, n, c) && !isNumberInBox(b, n, r, c);
}

function solveBoard(b) {
  for (var row = 0; row < 9; row++) {
...