├── Sample Puzzle.png
├── README.md
├── index.html
├── sudoku.css
└── sudoku.js
/Sample Puzzle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ImKennyYip/Sudoku/HEAD/Sample Puzzle.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [Sudoku](https://youtu.be/S4uRtTb8U-U)
2 | - Tutorial: https://youtu.be/S4uRtTb8U-U
3 | - Demo: https://imkennyyip.github.io/Sudoku/
4 |
5 | In this tutorial, you will learn how to create Sudoku using basic HTML, CSS, JavaScript. You will learn how to select numbers and place them on the tile, and check for errors.
6 |
7 | 
8 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Sudoku
6 |
7 |
8 |
9 |
10 |
11 |
12 | Sudoku
13 |
14 | 0
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/sudoku.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, Helvetica, sans-serif;
3 | text-align: center;
4 | }
5 |
6 | hr {
7 | width: 500px;
8 | }
9 |
10 | #errors {
11 | color: coral;
12 | }
13 |
14 | #board {
15 | width: 450px;
16 | height: 450px;
17 |
18 | margin: 0 auto;
19 | display: flex;
20 | flex-wrap: wrap;
21 | }
22 |
23 | .tile {
24 | width: 48px;
25 | height: 48px;
26 | border: 1px solid lightgray;
27 |
28 | /* Text */
29 | font-size: 20px;
30 | font-weight: bold;
31 | display: flex;
32 | justify-content: center;
33 | align-items: center;
34 | }
35 |
36 | #digits {
37 | width: 450px;
38 | height: 50px;
39 |
40 | margin: 0 auto;
41 | display: flex;
42 | flex-wrap: wrap;
43 | }
44 |
45 | .number {
46 | width: 44px;
47 | height: 44px;
48 | border: 1px solid black;
49 | margin: 2px;
50 |
51 | /* Text */
52 | font-size: 20px;
53 | font-weight: bold;
54 | display: flex;
55 | justify-content: center;
56 | align-items: center;
57 | }
58 |
59 | .number-selected {
60 | background-color: gray;
61 | }
62 |
63 | .tile-start {
64 | background-color: whitesmoke;
65 | }
66 |
67 | .horizontal-line {
68 | border-bottom: 1px solid black;
69 | }
70 |
71 | .vertical-line {
72 | border-right: 1px solid black;
73 | }
--------------------------------------------------------------------------------
/sudoku.js:
--------------------------------------------------------------------------------
1 |
2 | var numSelected = null;
3 | var tileSelected = null;
4 |
5 | var errors = 0;
6 |
7 | var board = [
8 | "--74916-5",
9 | "2---6-3-9",
10 | "-----7-1-",
11 | "-586----4",
12 | "--3----9-",
13 | "--62--187",
14 | "9-4-7---2",
15 | "67-83----",
16 | "81--45---"
17 | ]
18 |
19 | var solution = [
20 | "387491625",
21 | "241568379",
22 | "569327418",
23 | "758619234",
24 | "123784596",
25 | "496253187",
26 | "934176852",
27 | "675832941",
28 | "812945763"
29 | ]
30 |
31 | window.onload = function() {
32 | setGame();
33 | }
34 |
35 | function setGame() {
36 | // Digits 1-9
37 | for (let i = 1; i <= 9; i++) {
38 | //1
39 | let number = document.createElement("div");
40 | number.id = i
41 | number.innerText = i;
42 | number.addEventListener("click", selectNumber);
43 | number.classList.add("number");
44 | document.getElementById("digits").appendChild(number);
45 | }
46 |
47 | // Board 9x9
48 | for (let r = 0; r < 9; r++) {
49 | for (let c = 0; c < 9; c++) {
50 | let tile = document.createElement("div");
51 | tile.id = r.toString() + "-" + c.toString();
52 | if (board[r][c] != "-") {
53 | tile.innerText = board[r][c];
54 | tile.classList.add("tile-start");
55 | }
56 | if (r == 2 || r == 5) {
57 | tile.classList.add("horizontal-line");
58 | }
59 | if (c == 2 || c == 5) {
60 | tile.classList.add("vertical-line");
61 | }
62 | tile.addEventListener("click", selectTile);
63 | tile.classList.add("tile");
64 | document.getElementById("board").append(tile);
65 | }
66 | }
67 | }
68 |
69 | function selectNumber(){
70 | if (numSelected != null) {
71 | numSelected.classList.remove("number-selected");
72 | }
73 | numSelected = this;
74 | numSelected.classList.add("number-selected");
75 | }
76 |
77 | function selectTile() {
78 | if (numSelected) {
79 | if (this.innerText != "") {
80 | return;
81 | }
82 |
83 | // "0-0" "0-1" .. "3-1"
84 | let coords = this.id.split("-"); //["0", "0"]
85 | let r = parseInt(coords[0]);
86 | let c = parseInt(coords[1]);
87 |
88 | if (solution[r][c] == numSelected.id) {
89 | this.innerText = numSelected.id;
90 | }
91 | else {
92 | errors += 1;
93 | document.getElementById("errors").innerText = errors;
94 | }
95 | }
96 | }
97 |
98 |
--------------------------------------------------------------------------------