thinkswell · kushpo357 · Jan 16, 2025 · Jan 16, 2025
diff --git a/SudokuSolver/kushpo357/Readme.md b/SudokuSolver/kushpo357/Readme.md
@@ -0,0 +1,40 @@
+# Sudoku Solver
+
+A web-based Sudoku Solver that allows users to input a 9x9 Sudoku puzzle and solve it with a single click. Built with HTML, CSS, JavaScript, and TailwindCSS.
+
+## Features
+- Interactive 9x9 Sudoku grid for input.
+- Validates input to allow only numbers 1-9.
+- Solves the puzzle instantly or alerts if no solution exists.
+- Reset functionality to clear the grid.
+
+## Tech Stack
+- **Frontend**: HTML, TailwindCSS for styling.
+- **Logic**: JavaScript for puzzle solving using a backtracking algorithm.
+
+## File Structure
+- `index.html`: Core structure of the webpage.
+- `styles.css`: Styling for the Sudoku grid and buttons.
+- `script.js`: Logic for solving the Sudoku puzzle and interactive functionalities.
+
+## How to Use
+1. Open `index.html` in your browser.
+2. Enter numbers 1-9 in the grid (leave empty cells as blank).
+3. Click **Solve** to see the solution or **Reset** to clear the grid.
+
+## Algorithm
+- Uses a backtracking approach to solve the Sudoku puzzle.
+- Checks each cell to ensure compliance with Sudoku rules.
+
+## Demo
+Initial position
+![alt text](image.png)
+
+inputing a sudoku problem
+![alt text](image-1.png)
+
+submitting and generating a solution
+![alt text](image-2.png)
+---
+
+
diff --git a/SudokuSolver/kushpo357/image-1.png b/SudokuSolver/kushpo357/image-1.png
diff --git a/SudokuSolver/kushpo357/image-2.png b/SudokuSolver/kushpo357/image-2.png
diff --git a/SudokuSolver/kushpo357/image.png b/SudokuSolver/kushpo357/image.png
diff --git a/SudokuSolver/kushpo357/index.html b/SudokuSolver/kushpo357/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sudoku Solver</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body class="bg-gray-100 text-gray-800">
+  <div class="container mx-auto text-center py-8">
+    <h1 class="text-4xl font-bold mb-4">Sudoku Solver</h1>
+    <p class="text-lg mb-4">Enter your 9x9 Sudoku puzzle:</p>
+    <form>
+      <table id="sudokuTable" class="mx-auto border-collapse">
+      </table>
+      <div class="mt-4 flex justify-center space-x-4">
+        <button id="resetButton" type="reset" class="button bg-gray-200 px-6 py-3 rounded-md shadow-md hover:bg-gray-300">
+          Reset
+        </button>
+        <button id="solveButton" type="button" onclick="solveSudoku()" class="button bg-blue-500 text-white px-6 py-3 rounded-md shadow-md hover:bg-blue-600">
+          Solve
+        </button>
+      </div>
+    </form>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/SudokuSolver/kushpo357/script.js b/SudokuSolver/kushpo357/script.js
@@ -0,0 +1,112 @@
+class SudokuSolver {
+  constructor() {
+    this.N = 9; 
+  }
+
+  isSafe(row, col, val, grid) {
+    for (let i = 0; i < this.N; i++) {
+      if (
+        grid[row][i] === val ||
+        grid[i][col] === val ||
+        grid[Math.floor(row / 3) * 3 + Math.floor(i / 3)][
+          Math.floor(col / 3) * 3 + (i % 3)
+        ] === val
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  solve(grid) {
+    for (let i = 0; i < this.N; i++) {
+      for (let j = 0; j < this.N; j++) {
+        if (grid[i][j] === 0) {
+          for (let k = 1; k <= 9; k++) {
+            if (this.isSafe(i, j, k, grid)) {
+              grid[i][j] = k;
+              let solvePossible = this.solve(grid);
+              if (solvePossible) {
+                return true;
+              } else {
+                grid[i][j] = 0;
+              }
+            }
+          }
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  solveSudoku(grid) {
+    return this.solve(grid);
+  }
+}
+
+function initializeSudokuTable() {
+  const sudokuTable = document.getElementById("sudokuTable");
+  for (let i = 0; i < 9; i++) {
+    const row = sudokuTable.insertRow(i);
+    for (let j = 0; j < 9; j++) {
+      const cell = row.insertCell(j);
+      const input = document.createElement("input");
+      input.type = "text";
+      input.maxLength = 1;
+      input.className =
+        "w-full h-full text-center text-lg border-none focus:ring-2 focus:ring-blue-500";
+      input.addEventListener("input", validateInput);
+      cell.appendChild(input);
+    }
+  }
+}
+
+function validateInput(event) {
+  const inputValue = event.target.value;
+  event.target.value = inputValue.replace(/[^1-9]/g, "");
+}
+
+function getSudokuPuzzle() {
+  const puzzle = [];
+  const rows = document.getElementById("sudokuTable").rows;
+  for (let i = 0; i < 9; i++) {
+    const row = rows[i];
+    const rowData = [];
+    for (let j = 0; j < 9; j++) {
+      const input = row.cells[j].querySelector("input");
+      rowData.push(parseInt(input.value) || 0);
+    }
+    puzzle.push(rowData);
+  }
+  return puzzle;
+}
+
+function displaySolvedPuzzle(solvedPuzzle) {
+  const rows = document.getElementById("sudokuTable").rows;
+  for (let i = 0; i < 9; i++) {
+    const row = rows[i];
+    for (let j = 0; j < 9; j++) {
+      const input = row.cells[j].querySelector("input");
+      input.value = solvedPuzzle[i][j];
+    }
+  }
+}
+
+function solveSudoku() {
+  const sudokuSolver = new SudokuSolver();
+  const puzzle = getSudokuPuzzle();
+
+  if (sudokuSolver.solveSudoku(puzzle)) {
+    displaySolvedPuzzle(puzzle);
+  } else {
+    alert("No solution exists.");
+  }
+}
+
+function resetSudokuTable() {
+  const inputs = document.querySelectorAll("#sudokuTable input");
+  inputs.forEach((input) => (input.value = ""));
+}
+
+initializeSudokuTable();
diff --git a/SudokuSolver/kushpo357/styles.css b/SudokuSolver/kushpo357/styles.css
@@ -0,0 +1,43 @@
+/* General Body Styling */
+body {
+  font-family: Arial, sans-serif;
+}
+
+/* Sudoku Table Styling */
+#sudokuTable {
+  margin: 0 auto;
+  border-collapse: collapse;
+}
+
+#sudokuTable td {
+  border: 1px solid #000; /* Standard Grid Borders */
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+#sudokuTable tr:nth-child(3n) td {
+  border-bottom: 3px solid #000; /* Thick Line After Every 3rd Row */
+}
+
+#sudokuTable td:nth-child(3n) {
+  border-right: 3px solid #000; /* Thick Line After Every 3rd Column */
+}
+
+#sudokuTable tr:last-child td {
+  border-bottom: none; /* Remove Border for Last Row */
+}
+
+#sudokuTable td:last-child {
+  border-right: none; /* Remove Border for Last Column */
+}
+
+/* Button Styling */
+.button {
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.button:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}