├── README.md
├── LICENSE
├── style.css
├── script.js
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # Sudoku-Solver
2 | 
3 | ![](https://github.com/sagnikghoshcr7/images/blob/master/Sudoku-Solver.gif)
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Sagnik Ghosh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | #container{
 2 |     height: auto;
 3 |     width: 540px;
 4 |     background-color: white;
 5 |     display: flex;
 6 |     flex-wrap: wrap;
 7 |     justify-content: space-evenly;
 8 |     align-content: space-evenly ; 
 9 |     margin: 0 auto;
10 | }
11 | 
12 | #generate-sudoku{
13 |     margin:auto;
14 |     display:block;;
15 | }
16 | 
17 | 
18 | #solve{
19 |     margin:auto;
20 |     display:block;;
21 | }
22 | 
23 | #container div{
24 |     background-color: whitesmoke;
25 |     height: 60px;
26 |     width: 60px;
27 |     box-sizing: border-box;
28 |     font-family: sans-serif;
29 |     text-align: center;
30 |     vertical-align: middle;
31 |     line-height: 60px; 
32 |     font-size: 30px; 
33 |     color: green;
34 |     
35 | }
36 | 
37 | #container div:hover{
38 |     background-color: lightskyblue;
39 | }
40 | 
41 | .lsb{
42 |     border-left: black 2px solid;
43 | }
44 | 
45 | .bsb{
46 |     border-bottom: black 2px solid;
47 | }
48 | 
49 | .rsb{
50 |     border-right: black 2px solid;
51 | }
52 | 
53 | .tsb{
54 |     border-top: black 2px solid;
55 | }
56 | 
57 | 
58 | .ldb{
59 |     border-left: black 0.6px dashed;
60 | }
61 | 
62 | .bdb{
63 |     border-bottom: black 0.6px dashed;
64 | }
65 | 
66 | .rdb{
67 |     border-right: black 0.6px dashed;
68 | }
69 | 
70 | .tdb{
71 |     border-top: black 0.6px dashed;
72 | }
73 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | var arr = [[], [], [], [], [], [], [], [], []]
  2 | var temp = [[], [], [], [], [], [], [], [], []]
  3 | 
  4 | for (var i = 0; i < 9; i++) {
  5 |     for (var j = 0; j < 9; j++) {
  6 |         arr[i][j] = document.getElementById(i * 9 + j);
  7 | 
  8 |     }
  9 | }
 10 | 
 11 | function initializeTemp(temp) {
 12 | 
 13 |     for (var i = 0; i < 9; i++) {
 14 |         for (var j = 0; j < 9; j++) {
 15 |             temp[i][j] = false;
 16 | 
 17 |         }
 18 |     }
 19 | }
 20 | 
 21 | 
 22 | function setTemp(board, temp) {
 23 | 
 24 |     for (var i = 0; i < 9; i++) {
 25 |         for (var j = 0; j < 9; j++) {
 26 |             if (board[i][j] != 0) {
 27 |                 temp[i][j] = true;
 28 |             }
 29 | 
 30 |         }
 31 |     }
 32 | }
 33 | 
 34 | 
 35 | function setColor(temp) {
 36 | 
 37 |     for (var i = 0; i < 9; i++) {
 38 |         for (var j = 0; j < 9; j++) {
 39 |             if (temp[i][j] == true) {
 40 |                 arr[i][j].style.color = "#DC3545";
 41 |             }
 42 | 
 43 |         }
 44 |     }
 45 | }
 46 | 
 47 | function resetColor() {
 48 | 
 49 |     for (var i = 0; i < 9; i++) {
 50 |         for (var j = 0; j < 9; j++) {
 51 | 
 52 |             arr[i][j].style.color = "green";
 53 | 
 54 | 
 55 |         }
 56 |     }
 57 | }
 58 | 
 59 | var board = [[], [], [], [], [], [], [], [], []]
 60 | 
 61 | 
 62 | let button = document.getElementById('generate-sudoku')
 63 | let solve = document.getElementById('solve')
 64 | 
 65 | console.log(arr)
 66 | function changeBoard(board) {
 67 |     for (var i = 0; i < 9; i++) {
 68 |         for (var j = 0; j < 9; j++) {
 69 |             if (board[i][j] != 0) {
 70 | 
 71 |                 arr[i][j].innerText = board[i][j]
 72 |             }
 73 | 
 74 |             else
 75 |                 arr[i][j].innerText = ''
 76 |         }
 77 |     }
 78 | }
 79 | 
 80 | 
 81 | button.onclick = function () {
 82 |     var xhrRequest = new XMLHttpRequest()
 83 |     xhrRequest.onload = function () {
 84 |         var response = JSON.parse(xhrRequest.response)
 85 |         console.log(response)
 86 |         initializeTemp(temp)
 87 |         resetColor()
 88 | 
 89 |         board = response.board
 90 |         setTemp(board, temp)
 91 |         setColor(temp)
 92 |         changeBoard(board)
 93 |     }
 94 |     xhrRequest.open('get', 'https://sugoku.herokuapp.com/board?difficulty=easy')
 95 |     //we can change the difficulty of the puzzle the allowed values of difficulty are easy, medium, hard and random
 96 |     xhrRequest.send()
 97 | }
 98 | 
 99 | //to be completed by student, function should not return anything
100 | // you can make a call to changeboard(board) function to update the state on the screen
101 | //returns a boolean true of false
102 | 
103 | function isSafe(board,r,c,no){
104 | 
105 | 
106 |     //not repeating in the same row or column 
107 |     for(var i=0;i<9;i++){
108 |         if(board[i][c]==no || board[r][i]==no){
109 |             return false;
110 |         }
111 |     }
112 |     //subgrid
113 |     var sx = r - r%3;
114 |     var sy = c - c%3;
115 | 
116 |     for(var x=sx;x<sx+3;x++){
117 |         for(var y=sy;y<sy+3;y++){
118 |             if(board[x][y]==no){
119 |                 return false;
120 |             }
121 |         }
122 |     }
123 | 
124 |     return true;
125 | }
126 | 
127 | function solveSudokuHelper(board,r,c){
128 | 
129 |     //base case 
130 |     if(r==9){
131 |         changeBoard(board);
132 |         return true;
133 |     }
134 |     //other cases 
135 |     if(c==9){
136 |         return solveSudokuHelper(board,r+1,0);
137 |     }
138 |     //pre-filled cell, skip it
139 |     if(board[r][c]!=0){
140 |         return solveSudokuHelper(board,r,c+1);
141 |     }
142 | 
143 |     //there is 0 in the current location
144 |     for(var i=1;i<=9;i++){
145 | 
146 |         if(isSafe(board,r,c,i)){
147 |             board[r][c] = i;
148 |             var success = solveSudokuHelper(board,r,c+1);
149 |             if(success==true){
150 |                 return true;
151 |             }
152 |             //backtracking step
153 |             board[r][c] = 0;
154 |         }
155 | 
156 |     }
157 |     return false;
158 | 
159 | }
160 | 
161 | function solveSudoku(board) {
162 |     solveSudokuHelper(board,0,0);
163 | }
164 | 
165 | 
166 | solve.onclick = function () {
167 |     solveSudoku(board)
168 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Document</title>
  8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  9 |         integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 10 | 
 11 |     <link rel="stylesheet" href="style.css">
 12 |     <script defer src="script.js"></script>
 13 | </head>
 14 | 
 15 | <body>
 16 |     <nav class="navbar navbar-light " style="font-size: 25px; color: blue; font-family: sans-serif; background-color: whitesmoke;">
 17 |         <p><b>Sudoku Solver - </b><b style="color: red;">Sagnik Ghosh</b></p>
 18 |     </nav>
 19 |     <br><br>
 20 |     <div id="container">
 21 | 
 22 |         <div class="lsb tsb" id="0">
 23 | 
 24 |         </div>
 25 | 
 26 |         <div class="tsb ldb" id="1">
 27 | 
 28 |         </div>
 29 | 
 30 |         <div class="tsb ldb" id="2">
 31 | 
 32 |         </div>
 33 | 
 34 |         <div class="tsb lsb" id="3">
 35 | 
 36 |         </div>
 37 |         <div class="tsb ldb" id="4">
 38 | 
 39 |         </div>
 40 | 
 41 |         <div class="tsb ldb" id="5">
 42 | 
 43 |         </div>
 44 |         <div class="tsb lsb" id="6">
 45 | 
 46 |         </div>
 47 | 
 48 |         <div class="tsb ldb" id="7">
 49 | 
 50 |         </div>
 51 |         <div class="tsb rsb ldb" id="8">
 52 | 
 53 |         </div>
 54 | 
 55 |         <div class="lsb tdb" id="9">
 56 | 
 57 |         </div>
 58 | 
 59 |         <div class="ldb tdb" id="10">
 60 | 
 61 |         </div>
 62 | 
 63 |         <div class="ldb tdb" id="11">
 64 | 
 65 |         </div>
 66 | 
 67 |         <div class="lsb tdb" id="12">
 68 | 
 69 |         </div>
 70 |         <div class="ldb tdb" id="13">
 71 | 
 72 |         </div>
 73 | 
 74 |         <div class="ldb tdb" id="14">
 75 | 
 76 |         </div>
 77 |         <div class="lsb tdb" id="15">
 78 | 
 79 |         </div>
 80 | 
 81 |         <div class="ldb tdb" id="16">
 82 | 
 83 |         </div>
 84 |         <div class="rsb ldb tdb" id="17">
 85 | 
 86 |         </div>
 87 | 
 88 |         <div class="lsb bsb tdb" id="18">
 89 | 
 90 |         </div>
 91 | 
 92 |         <div class="bsb ldb tdb" id="19">
 93 | 
 94 |         </div>
 95 | 
 96 |         <div class="bsb ldb tdb" id="20">
 97 | 
 98 |         </div>
 99 | 
100 |         <div class="bsb lsb tdb" id="21">
101 | 
102 |         </div>
103 |         <div class="bsb ldb tdb" id="22">
104 | 
105 |         </div>
106 | 
107 |         <div class="bsb ldb tdb" id="23">
108 | 
109 |         </div>
110 |         <div class="bsb lsb tdb" id="24">
111 | 
112 |         </div>
113 | 
114 |         <div class="bsb ldb tdb" id="25">
115 | 
116 |         </div>
117 |         <div class="bsb rsb ldb tdb" id="26">
118 | 
119 |         </div>
120 | 
121 |         <div class="lsb" id="27">
122 | 
123 |         </div>
124 | 
125 |         <div class="ldb" id="28">
126 | 
127 |         </div>
128 | 
129 |         <div class="ldb" id="29">
130 | 
131 |         </div>
132 | 
133 |         <div class="lsb" id="30">
134 | 
135 |         </div>
136 |         <div class="ldb" id="31">
137 | 
138 |         </div>
139 | 
140 |         <div class="ldb" id="32">
141 | 
142 |         </div>
143 |         <div class="lsb" id="33">
144 | 
145 |         </div>
146 | 
147 |         <div class="ldb" id="34">
148 | 
149 |         </div>
150 |         <div class="rsb ldb" id="35">
151 | 
152 |         </div>
153 | 
154 |         <div class="lsb tdb" id="36">
155 | 
156 |         </div>
157 | 
158 |         <div class="ldb tdb" id="37">
159 | 
160 |         </div>
161 | 
162 |         <div class="ldb tdb" id="38">
163 |         </div>
164 | 
165 |         <div class="lsb tdb" id="39">
166 | 
167 |         </div>
168 |         <div class="ldb tdb" id="40">
169 | 
170 |         </div>
171 | 
172 |         <div class="ldb tdb" id="41">
173 | 
174 |         </div>
175 |         <div class="lsb tdb" id="42">
176 | 
177 |         </div>
178 | 
179 |         <div class="ldb tdb" id="43">
180 | 
181 |         </div>
182 |         <div class="rsb ldb tdb" id="44">
183 | 
184 |         </div>
185 | 
186 |         <div class="lsb bsb tdb" id="45">
187 | 
188 |         </div>
189 | 
190 |         <div class="bsb ldb tdb" id="46">
191 | 
192 |         </div>
193 | 
194 |         <div class="bsb ldb tdb" id="47">
195 | 
196 |         </div>
197 | 
198 |         <div class="bsb lsb tdb" id="48">
199 | 
200 |         </div>
201 |         <div class="bsb ldb tdb" id="49">
202 | 
203 |         </div>
204 | 
205 |         <div class="bsb ldb tdb" id="50">
206 | 
207 |         </div>
208 |         <div class="bsb lsb tdb" id="51">
209 | 
210 |         </div>
211 | 
212 |         <div class="bsb ldb tdb" id="52">
213 | 
214 |         </div>
215 |         <div class="bsb rsb ldb tdb" id="53">
216 | 
217 |         </div>
218 | 
219 |         <div class="lsb" id="54">
220 | 
221 |         </div>
222 | 
223 |         <div class="ldb" id="55">
224 | 
225 |         </div>
226 | 
227 |         <div class="ldb" id="56">
228 | 
229 |         </div>
230 | 
231 |         <div class="lsb" id="57">
232 | 
233 |         </div>
234 |         <div class="ldb" id="58">
235 | 
236 |         </div class="ldb">
237 | 
238 |         <div class="ldb" id="59">
239 | 
240 |         </div>
241 |         <div class="lsb" id="60">
242 | 
243 |         </div>
244 | 
245 |         <div class="ldb" id="61">
246 | 
247 |         </div>
248 |         <div class="rsb ldb" id="62">
249 | 
250 |         </div>
251 | 
252 |         <div class="lsb tdb" id="63">
253 | 
254 |         </div>
255 | 
256 |         <div class="ldb tdb" id="64">
257 | 
258 |         </div>
259 | 
260 |         <div class="ldb tdb" id="65">
261 | 
262 |         </div>
263 | 
264 |         <div class="lsb tdb" id="66">
265 | 
266 |         </div>
267 |         <div class="ldb tdb" id="67">
268 | 
269 |         </div>
270 | 
271 |         <div class="ldb tdb" id="68">
272 | 
273 |         </div>
274 |         <div class="lsb tdb" id="69">
275 | 
276 |         </div>
277 | 
278 |         <div class="ldb tdb" id="70">
279 | 
280 |         </div>
281 |         <div class="rsb ldb tdb" id="71">
282 | 
283 |         </div>
284 | 
285 |         <div class="lsb bsb tdb" id="72">
286 | 
287 |         </div>
288 | 
289 |         <div class="bsb ldb tdb" id="73">
290 | 
291 |         </div>
292 | 
293 |         <div class="bsb ldb tdb" id="74">
294 | 
295 |         </div>
296 | 
297 |         <div class="bsb lsb tdb" id="75">
298 | 
299 |         </div>
300 |         <div class="bsb ldb tdb" id="76">
301 | 
302 |         </div>
303 | 
304 |         <div class="bsb tdb ldb" id="77">
305 | 
306 |         </div>
307 |         <div class="bsb lsb tdb" id="78">
308 | 
309 |         </div>
310 | 
311 |         <div class="bsb ldb tdb" id="79">
312 | 
313 |         </div>
314 |         <div class="bsb rsb ldb tdb" id="80">
315 | 
316 |         </div>
317 | 
318 | 
319 |     </div>
320 |     <br>
321 |     <div id="buttons">
322 |         <button type="button" class="btn btn-danger" id="generate-sudoku">Get New
323 |             Puzzle</button>&nbsp;&nbsp;&nbsp;&nbsp;
324 |         <button type="button" class="btn btn-success" id="solve">Solve</button>
325 |     </div>
326 | </body>
327 | 
328 | </html>
329 | 


--------------------------------------------------------------------------------