https://github.com/vansh-codes/sudoku-visualizer
A web-based app to visualize Sudoku solving using backtracking. Features include random puzzle generation, variable solving speeds, and celebratory visual effects for completed puzzles. Enjoy solving!
https://github.com/vansh-codes/sudoku-visualizer
sudoku-generator sudoku-solver sudoku-visualizer vanilla-js
Last synced: 10 months ago
JSON representation
A web-based app to visualize Sudoku solving using backtracking. Features include random puzzle generation, variable solving speeds, and celebratory visual effects for completed puzzles. Enjoy solving!
- Host: GitHub
- URL: https://github.com/vansh-codes/sudoku-visualizer
- Owner: vansh-codes
- License: mit
- Created: 2024-07-11T07:18:27.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-30T09:28:23.000Z (almost 2 years ago)
- Last Synced: 2025-01-20T02:03:08.335Z (over 1 year ago)
- Topics: sudoku-generator, sudoku-solver, sudoku-visualizer, vanilla-js
- Language: JavaScript
- Homepage: https://sudoku-visualizer.vercel.app
- Size: 297 KB
- Stars: 26
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Sudoku Visualizer
🎉 Welcome to the Sudoku Solver Visualizer! 🎉 This web-based app lets you visualize the solving process using backtracking. Features include 🔀 random puzzle generation, ⏩ variable solving speeds, and ✨ visual effects to celebrate a solved puzzle. Enjoy a fun and interactive Sudoku-solving experience!
## 📍Table of Contents
1. [Features](#Features)
2. [Technology Stack](#Technology-Stack)
3. [Getting Started](#Getting-Started)
4. [Web Application](#Web-Application)
5. [Usage](#Usage)
6. [Code Overview](#Code-Overview)
7. [Contributing](#Contributing)
8. [License](#License)
9. [Contact](#Contact)
10. [Links](#Links)
## ✨Features
- **🔢 Live Input Feedback**: Receive real-time feedback as you input numbers into the Sudoku grid.
- **🎨 Interactive UI**: Engage with an intuitive and visually appealing user interface designed for ease of use.
- **👌 Good UX**: Enjoy a seamless user experience with smooth interactions and clear instructions.
- **⚡ Fast Backtracking Algorithm**: Solve Sudoku puzzles quickly and efficiently using an optimized backtracking algorithm.
- **🌐 Cross-Platform**: Access the Sudoku visualizer on both web and mobile platforms for convenience.
- **🛠️ Customizable Settings**: Tailor the visualization settings to your preferences, including solving speed and difficulty level.
- **📚 Learn Mode**: Understand the backtracking process step-by-step with an educational mode that explains each move when speed set to Xtra slow.
## 💻Technology Stack
## Getting Started
### Prerequisites
- Web browser (Google Chrome, Firefox, Safari, etc.)
### Getting Started
1. Clone the repository:
```bash
git clone https://github.com/vansh-codes/Sudoku-Visualizer.git
```
2. Navigate to the project directory:
```bash
cd sudoku-visualizer
```
3. Open `index.html` in your web browser to start using the application.
## 🌐Web Application
1. Access here: [Sudoku-Visualizer](https://sudoku-visualizer.vercel.app/)
## Usage
1. **Clear Board**: Click the "Clear" button to clear the Sudoku board.
2. **Generate Board**: Click the "Generate Board" button to generate a new random Sudoku puzzle.
3. **Solve**: Click the "Solve" button to start solving the puzzle using the selected algorithm and speed.
4. **Select Speed**: Choose the speed of the solving animation from the dropdown menu (Fast, Medium, Slow, Extra Slow).
5. **Select Algorithm**: Choose the algorithm for solving the puzzle from the dropdown menu (currently supports Backtracking).
6. **Enjoy the Visual Effects**: Upon solving the puzzle, enjoy the fireworks effect celebrating your success.
## Code Overview
### HTML Elements
- `subMenu`: Refers to the submenu element inside the navigation bar.
- `speedButton`: Refers to the button for selecting speed inside the navigation bar.
- `speedDropDown`: Holds the current selected speed.
- `speedOptions`: List of all available speed options.
- `confetti`: Configures the confetti for celebrating the solved puzzle.
- `algorithmsDropDown`: Holds the current selected algorithm.
- `algorithmsOptions`: List of all available algorithm options.
### Speed Constants
Defines the different speeds for the solving animation:
- `FAST_SPEED`: 0.4 seconds
- `MEDIUM_SPEED`: 10 seconds
- `SLOW_SPEED`: 50 seconds
### Event Listeners
- `clear.addEventListener('click', clickedClear)`: Clears the board.
- `randomlyFill.addEventListener('click', clickedRandomlyFill)`: Fills the board with a random puzzle.
- `solve.addEventListener('click', clickedSolve)`: Starts solving the puzzle.
### Main Functions
- `clickedClear(e)`: Clears the board and resets the state.
- `clickedRandomlyFill(e)`: Clears the board and fills it with a random puzzle.
- `clickedSolve(e)`: Starts the solving process.
- `solveByBacktracking(algo)`: Solves the puzzle using the Backtracking algorithm.
- `backtracking(matrix, algo)`: Initializes and runs the backtracking algorithm.
- `backtrackingHelper(matrix, isFixed, i, j, data, algo)`: Recursively solves the puzzle using backtracking.
### Utility Functions
- `getFixedEntries(matrix)`: Returns an array indicating which entries are fixed.
- `canBeCorrect(matrix, i, j)`: Checks if the current state of the board is valid.
- `allBoardNonZero(matrix)`: Checks if all cells in the board are filled.
- `readValue()`: Reads the current values from the Sudoku board.
## Contributing
Contributions are welcome! Please fork the repository and submit a pull request for any enhancements or bug fixes.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## 📞Contact
For any questions or feedback, please contact [vansh-codes](https://github.com/vansh-codes).
### - Created by **Vansh Chaurasiya**
Show some ❤️ by starring this repository !
## 🔗Links
[](https://www.linkedin.com/in/vanshchaurasiya24)
[](https://www.twitter.com/vanshchaurasiy4)