The focus of this project was on working with the React frame-work and Javascript. The design of this game makes one think of the state management and the data structure of the of the game (the flow of Data). Although one can use an npm package for getting the Sudoku board (solved and unsolved), a library of function were created from scratch to handle all that.
To install the project in your local machine, click the Code button as shown bellow.
Then clone repo or download the the Zip file of the project.
In the project directory, you can run:
This installs all the necessary modules for the application. Then,
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Every sudoku puzzle involves a 9×9 grid of squares subdivided into 3×3 boxes.
In total there are 81 squares on a sudoku grid and when the puzzle is completed each square will contain exactly one number.
Sudoku is a puzzle based on a small number of very simple rules:
- Every square has to contain a single number
- Only the numbers from 1 through to 9 can be used
- Each 3×3 box can only contain each number from 1 to 9 once
- Each vertical column can only contain each number from 1 to 9 once
- Each horizontal row can only contain each number from 1 to 9 once
- Once the puzzle is solved, this means that every row, column, and 3×3 box will contain every number from 1 to 9 exactly once.
In other words, no number can be repeated in any 3×3 box, row, or column.
- Difficulty: Lets you choose between easy, medium and hard. it is on random by default.
- New Game: Lets you start a new game using the difficulty selected.
- Timer: This displays the elapsed time since the game started. It only stops once the puzzle is solved. The counter increments by 10 every second you spend viewing the solution.
- Highlights Mode: This Highlights the row, column, and 3×3 box the clicked square belongs to (See below).
- Caution Mode: This lets you know if a number is repeating in its given row, column, and 3×3 box. The enterned number will be red if it is repeating (See below).
- Show Solution: This lets you see the solved solution (See below).
