Creating a web sudoku game with Html, CSS, and JS: Learning web dev from 0.

Do you know or have heard of the game “SUDOKU”? For sure yes. But for those who don’t, here’s a brief description: Sudoku is a game of logic and number deduction in which the goal is to fill a 9x9 grid with numbers 1 through 9, so that each row, column, and 3x3 section contains each number one time. Numbers are provided in some cells as clues to help solve the game. Sudoku is a popular game all over the world and can be played on paper or online.

Situation:

When I decided that I wanted to learn web development, I knew that it was not enough to watch JavaScript, HTML, or CSS tutorials. I needed to build
a web application, even if it was a simple one. I decided to create a sudoku game, made with what I knew as JavaScript vanilla, which would then boost learning Angular or React. In this way, I would be directly exposed to these technologies, and then leap to master a framework.

Task:

To start, I had to consider what features I wanted for my application. I thought it would be important for the game to have the option to solve itself, in case the user gave up and wanted to see how the number selection should be to complete the game correctly. Another thing is that the game needed to be able to be restarted, at the user’s decision. To select the numbers, I wanted it to go through a digital keyboard which would have the option to delete the numbers marked on the table. But the most important thing for me was how the game table would be generated. For the table, I didn’t want the game to have multiple default games that it would select randomly. Instead, I wanted each match to be generated automatically.

Actions:

To begin, I had to create a page in HTML, where the buttons would be and the container in which I would have a single div tag that would represent a simple box in the table, and then with a JavaScript function, I would multiply it to create a 9x9 board boxes. I would do the same thing later with the numeric keypad, which would contain digits from 1 to 9, turning it into a standard 3x3 number keypad, with an extra button that would have the delete function.

The most challenging part was creating the functions that would generate the numbers for the matches. The way I thought to do it was to create a complete number table with the numbers positioned correctly according to the Sudoku rules, and then use a copy in which I would distribute random empty spaces throughout the table, which should be filled in by the user. Then the entire table would be saved for use in case the user wanted to use the “Auto-Solver”.

The first problem I faced was to create a complete game with numbers that would be randomly generated according to the rules of the game, which would be checked with functions dedicated to checking that no number was repeated in the rows, columns, and the 9 groups of 3x3 squares. For this, I looked for information, and I found a way to solve it recursively using backtracking, which for a few moments broke my head. The second problem was that all the games looked the same. To solve this, before generating the numbers that would make up the complete game, it would fill in a single column of random numbers from 1 to 9 without repeating themselves, which would make each game unique.

Finally, I would add all the other functionalities of the game, such as the keyboard, the delete function, the default numbers of each game that should be unalterable, and the buttons to restart and solve the game.

Lesson learned:

Creating this Web-Sudoku application taught me a lot about web development. It was an interesting introduction to HTML, CSS, and JavaScript as it was a real challenge using these technologies with very limited knowledge about them.

If you are interested, you can access the app through the following link: https://ernestolaria.github.io/sudoku

You are welcome to follow me and comment.