Full Featured CSS Sudoku
Output Readme Download Replit Sel. & Copy Full

About

Create a sudoku game that is just one HTML/CSS file.

To view this on TripleLog, click here.

HTML

The index.html file is a generated file, so don't change it (any changes will be overwritten when you run script.js). Modify the template.html file.

CSS

A lot of CSS to run the game is included in the generated HTML file. Modify the style.css file to change the styling.

JavaScript

The script.js file generates the static file. You will need the nunjucks module and then just run node script.js to generate the index.html file.

It converts sudoku puzzle string into the game. The string is 81 characters. Nine characters for the first row from left to right, then nine for the second row, etc... Empty cells are represented by "."

You can modify the logic to accept different formats if needed.

This version of the script includes four not-necessary features that are nice to have. The numbers given from the start are bolded and should be impossible to erase. Any illegal moves (2 of the same number in a row, column, or 3x3 block) are blocked. Once all 9 of a given number have placed in the puzzle, that number in the selection bar at the top will be greyed out. Once the player has completed the puzzle, a message appears.