/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!

Primary LanguageJavaScriptMIT LicenseMIT

Sudoku Visualizer

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
  2. Technology Stack
  3. Getting Started
  4. Web Application
  5. Usage
  6. Code Overview
  7. Contributing
  8. License
  9. Contact
  10. 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

JAVASCRIPT CSS5 HTML5

Getting Started

Prerequisites

  • Web browser (Google Chrome, Firefox, Safari, etc.)

Getting Started

  1. Clone the repository:

    git clone https://github.com/vansh-codes/Sudoku-Visualizer.git

  2. Navigate to the project directory:

    cd sudoku-visualizer

  3. Open index.html in your web browser to start using the application.

🌐Web Application

  1. Access here: Sudoku-Visualizer

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 file for details.

📞Contact

For any questions or feedback, please contact vansh-codes.

- Created by Vansh Chaurasiya

Show some ❤️ by starring this repository !

🔗Links

linkedin twitter

BACK TO TOP