Online sudoku puzzle solver that also generates random puzzles.
- Clone this repo
- Run
npm installto install dependencies - Run
npm startto launch the app
- Read Thinking in React
- Drew mockup
- Determined component heirarchy
- Built static version
- Issue: I built the grid by creating a div for each row. This does not allow for the squares/grid to resize according to the window, as the rows get broken up when the window width becomes too narrow. I will have to look into re-implementing it with CSS grid tomorrow.
- Implemented css grid by getting rid of row divs and adding each square component to the grid directly
- This allowed a quick resolution of rows splitting up
- I couldn't get the squares to resize dynamically with grid properties
- Managed to fiddle with view-height and max-width/height to get sizing down
- Handled button and key board events
- Installed react-keyboard-event-handler
- Highlighted grid cols and rows in focus
- Added state variable to keep track of all Square values in Grid
- Issue: Put state of grid in Grid.js, but the buttons in the button bar, which reside in App.js, also modify state. Need to migrate state variables to App, passing them to Gris as props.
- Resolved above issue
- Implemented reset button and highlighting of invalid input
- Completed backtracking search algorithm to solve puzzle
- Fetched random sudoku puzzle from online API
- Touched up aethestics