Merge pull request #335 from riyarane46/main

added sudoku solver project
UTSAVS26 · Oct 9, 2024 · 276447f · 276447f
2 parents c629b62 + ffba432
commit 276447f
Show file tree

Hide file tree

Showing 4 changed files with 273 additions and 0 deletions.
diff --git a/Web_Development/sudoku_solver/Readme (1).md b/Web_Development/sudoku_solver/Readme (1).md
@@ -0,0 +1,38 @@
+<h1 align='center'><b>💥 Sudoku Solver 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+
+</div>
+
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>This is a Sudoku Solver project made using HTML , CSS & JS. This project automatically solves a Sudoku according to the inputs provided by the user.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+- Fork this repository.
+- Clone the forked repository.
+- Open index.html in your web browser to start your culinary exploration.
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
diff --git a/Web_Development/sudoku_solver/index.html b/Web_Development/sudoku_solver/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Sudoku Solver</title>
+</head>
+
+<body>
+
+    <h1>Sudoku Solver</h1>
+    <div class="sudoku-container">
+        <table>
+            <tbody id="sudoku-grid">
+            </tbody>
+        </table>
+    </div>
+
+    <button id="solve-btn">Solve Puzzle</button>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Web_Development/sudoku_solver/script.js b/Web_Development/sudoku_solver/script.js
@@ -0,0 +1,124 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const gridSize = 9;
+    const solveButton = document.getElementById("solve-btn");
+    solveButton.addEventListener('click', solveSudoku);
+
+    const sudokuGrid = document.getElementById("sudoku-grid");
+    for (let row = 0; row < gridSize; row++) {
+        const newRow = document.createElement("tr");
+        for (let col = 0; col < gridSize; col++) {
+            const cell = document.createElement("td");
+            const input = document.createElement("input");
+            input.type = "number";
+            input.className = "cell";
+            input.id = `cell-${row}-${col}`;
+            cell.appendChild(input);
+            newRow.appendChild(cell);
+        }
+        sudokuGrid.appendChild(newRow);
+    }
+});
+
+async function solveSudoku() {
+    const gridSize = 9;
+    const sudokuArray = [];
+
+    // Fill the sudoku with grid values
+    for (let row = 0; row < gridSize; row++) {
+        sudokuArray[row] = [];
+        for (let col = 0; col < gridSize; col++) {
+            const cellId = `cell-${row}-${col}`;
+            const cellValue = document.getElementById(cellId).value;
+            if (cellValue !== "" && parseInt(cellValue) >= 10) {
+                alert("Enter valid numbers !");
+                location.reload();
+            }
+            sudokuArray[row][col] = cellValue !== "" ? parseInt(cellValue) : 0;
+        }
+    }
+
+    // Identify user-input cells and mark them
+    for (let row = 0; row < gridSize; row++) {
+        for (let col = 0; col < gridSize; col++) {
+            const cellId = `cell-${row}-${col}`;
+            const cell = document.getElementById(cellId);
+
+            if (sudokuArray[row][col] !== 0) {
+                cell.classList.add("user-input");
+            }
+        }
+    }
+
+    // Solve the sudoku
+    if (solveSudokuHelper(sudokuArray)) {
+        for (let row = 0; row < gridSize; row++) {
+            for (let col = 0; col < gridSize; col++) {
+                const cellId = `cell-${row}-${col}`;
+                const cell = document.getElementById(cellId);
+
+                if (!cell.classList.contains("user-input")) {
+                    cell.value = sudokuArray[row][col];
+                    cell.classList.add("solved");
+                    await sleep(20);
+                }
+            }
+        }
+    } else {
+        alert("No solution exists for the given Sudoku puzzle.");
+    }
+}
+
+function solveSudokuHelper(board) {
+    const gridSize = 9;
+
+    for (let row = 0; row < gridSize; row++) {
+        for (let col = 0; col < gridSize; col++) {
+            if (board[row][col] === 0) {
+                for (let num = 1; num <= 9; num++) {
+                    if (isValidMove(board, row, col, num)) {
+                        board[row][col] = num;
+
+                        // Recursively attempt to solve the Sudoku
+                        if (solveSudokuHelper(board)) {
+                            return true; // Puzzle solved
+                        }
+
+                        board[row][col] = 0; // Backtrack
+                    }
+                }
+                return false; // No valid number found
+            }
+        }
+    }
+
+    return true; // All cells filled
+}
+
+function isValidMove(board, row, col, num) {
+    const gridSize = 9;
+
+    // Check row and column for conflicts
+    for (let i = 0; i < gridSize; i++) {
+        if (board[row][i] === num || board[i][col] === num) {
+            return false; // Conflict found
+        }
+    }
+
+    // Check the 3*3 subgrid for conflicts
+    const startRow = Math.floor(row / 3) * 3;
+    const startCol = Math.floor(col / 3) * 3;
+
+    for (let i = startRow; i < startRow + 3; i++) {
+        for (let j = startCol; j < startCol + 3; j++) {
+            if (board[i][j] === num) {
+                return false; // Conflict found
+            }
+        }
+    }
+
+    return true; // No conflicts found
+}
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
diff --git a/Web_Development/sudoku_solver/style.css b/Web_Development/sudoku_solver/style.css
@@ -0,0 +1,86 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    background: #16222A;
+    background: -webkit-linear-gradient(to right, #3A6073, #16222A);
+    background: linear-gradient(to right, #3A6073, #16222A);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 100vh;
+}
+
+h1 {
+    font-weight: 500;
+    color: #fff;
+    font-size: 3rem;
+}
+
+.sudoku-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+}
+
+table {
+    border-collapse: collapse;
+    border: 4px solid gold;
+}
+
+.cell {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    font-size: 1.3rem;
+    border: 1px solid gold;
+    transition: all 0.3s ease-in-out;
+    font-weight: bold;
+}
+
+table tr:nth-child(3n) td,
+table tr:nth-child(3n+3) td {
+    border-bottom: 2px solid gold;
+}
+
+table td:nth-child(3n) {
+    border-right: 2px solid gold;
+    /* border-right: 2px solid #000; */
+}
+
+input {
+    outline: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #039be5;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+.solved {
+    background-color: rgb(242, 5, 64);
+    /* color: white; */
+    transition: all 0.2s ease-in-out;
+}