Merge branch 'main' of https://github.com/vishal-raj-1/awesome-javasc…

…ript-projects into johncent

assets/css/FAQs.css

@@ -9,29 +9,60 @@
 	 margin: 0;
 	 padding: 0;
 	 font-family: 'Hind', sans-serif;
-	 background: rgb(239, 250, 251);
+	 background: brown;
 	 color: #4d5974;
 	 display: flex;
 	 min-height: 100vh;
-}
+	}
+
  .container {
 	 margin: 0 auto;
 	 padding: 4rem;
 	 width: 48rem;
 }
+
+ .card{
+	background-color:rgb(194, 187, 187);
+	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+}
+h2{
+	color: #362222;
+	text-align:center;
+	letter-spacing: 2px;
+	background-color:rgb(194, 187, 187);
+}
+.border-bottom{
+	border-bottom: 1px solid purple;
+	padding-bottom: 5px;
+}
+
+.img{
+    width:200px;
+	position:relative;
+    top: -10px;
+    filter: drop-shadow(0 25px 0px #E1D6F6);
+}
+
+/*expand and collapse cards*/
+
+
  .accordion .accordion-item {
-	 border-bottom: 1px solid #e5e5e5;
+	border-bottom: 1px solid #ebc7c7;
+	color: #222831;
+	text-align: center;
+
 }
+
  .accordion .accordion-item button[aria-expanded='true'] {
-	 border-bottom: 1px solid #03b5d2;
+	border-bottom: 1px dotted  #F0EFEF;
 }
  .accordion button {
 	 position: relative;
 	 display: block;
-	 text-align: left;
+	 align-items: center;
 	 width: 100%;
 	 padding: 1em 0;
-	 color: #7288a2;
+	 color: #31112C;
 	 font-size: 1.15rem;
 	 font-weight: 400;
 	 border: none;
@@ -40,15 +71,17 @@
 }
  .accordion button:hover, .accordion button:focus {
 	 cursor: pointer;
-	 color: #03b5d2;
+	 color: #EE4540;
+
 }
  .accordion button:hover::after, .accordion button:focus::after {
 	 cursor: pointer;
-	 color: #03b5d2;
-	 border: 1px solid #03b5d2;
+	 color: #A72693;
+	 border: 1px solid #A72693;
 }
  .accordion button .accordion-title {
 	 padding: 1em 1.5em 1em 0;
+
 }
  .accordion button .icon {
 	 display: inline-block;
@@ -80,7 +113,7 @@
 	 background: currentColor;
 }
  .accordion button[aria-expanded='true'] {
-	 color: #03b5d2;
+	 color: #EE4540;
 }
  .accordion button[aria-expanded='true'] .icon::after {
 	 width: 0;
@@ -100,7 +133,7 @@
 }
  .accordion .accordion-content p {
 	 font-size: 1rem;
-	 font-weight: 300;
+	 font-weight: bold;
 	 margin: 2em 0;
 }
- 
+/*ends*/

assets/css/Sudoku_Solver.css

@@ -0,0 +1,71 @@
+#container {
+    height: auto;
+    width: 540px;
+    background-color: white;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: space-evenly;
+    margin: 0 auto;
+}
+
+#generate-sudoku {
+    margin: auto;
+    display: block;
+    ;
+}
+
+#solve {
+    margin: auto;
+    display: block;
+    ;
+}
+
+#container div {
+    background-color: whitesmoke;
+    height: 60px;
+    width: 60px;
+    box-sizing: border-box;
+    font-family: sans-serif;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 60px;
+    font-size: 30px;
+    color: red;
+}
+
+#container div:hover {
+    background-color: rgb(250, 250, 135);
+}
+
+.lsb {
+    border-left: black 2px solid;
+}
+
+.bsb {
+    border-bottom: black 2px solid;
+}
+
+.rsb {
+    border-right: black 2px solid;
+}
+
+.tsb {
+    border-top: black 2px solid;
+}
+
+.ldb {
+    border-left: black 0.6px dashed;
+}
+
+.bdb {
+    border-bottom: black 0.6px dashed;
+}
+
+.rdb {
+    border-right: black 0.6px dashed;
+}
+
+.tdb {
+    border-top: black 0.6px dashed;
+}

assets/js/Sudoku_Solver.js

@@ -0,0 +1,197 @@
+var arr = [
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    []
+]
+var temp = [
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    []
+]
+
+for (var i = 0; i < 9; i++) {
+    for (var j = 0; j < 9; j++) {
+        arr[i][j] = document.getElementById(i * 9 + j);
+
+    }
+}
+
+function initializeTemp(temp) {
+
+    for (var i = 0; i < 9; i++) {
+        for (var j = 0; j < 9; j++) {
+            temp[i][j] = false;
+
+        }
+    }
+}
+
+
+function setTemp(board, temp) {
+
+    for (var i = 0; i < 9; i++) {
+        for (var j = 0; j < 9; j++) {
+            if (board[i][j] != 0) {
+                temp[i][j] = true;
+            }
+
+        }
+    }
+}
+
+
+function setColor(temp) {
+
+    for (var i = 0; i < 9; i++) {
+        for (var j = 0; j < 9; j++) {
+            if (temp[i][j] == true) {
+                arr[i][j].style.color = "#DC3545";
+            }
+
+        }
+    }
+}
+
+function resetColor() {
+
+    for (var i = 0; i < 9; i++) {
+        for (var j = 0; j < 9; j++) {
+
+            arr[i][j].style.color = "green";
+
+
+        }
+    }
+}
+
+var board = [
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    []
+]
+
+
+let button = document.getElementById('generate-sudoku')
+let solve = document.getElementById('solve')
+
+console.log(arr)
+
+function changeBoard(board) {
+    for (var i = 0; i < 9; i++) {
+        for (var j = 0; j < 9; j++) {
+            if (board[i][j] != 0) {
+
+                arr[i][j].innerText = board[i][j]
+            } else
+                arr[i][j].innerText = ''
+        }
+    }
+}
+
+
+button.onclick = function() {
+    var xhrRequest = new XMLHttpRequest()
+    xhrRequest.onload = function() {
+        var response = JSON.parse(xhrRequest.response)
+        console.log(response)
+        initializeTemp(temp)
+        resetColor()
+
+        board = response.board
+        setTemp(board, temp)
+        setColor(temp)
+        changeBoard(board)
+    }
+    xhrRequest.open('get', 'https://sugoku.herokuapp.com/board?difficulty=easy')
+        //we can change the difficulty of the puzzle the allowed values of difficulty are easy, medium, hard and random
+    xhrRequest.send()
+}
+
+//to be completed by student, function should not return anything
+// you can make a call to changeboard(board) function to update the state on the screen
+//returns a boolean true of false
+
+function isSafe(board, r, c, no) {
+
+
+    //not repeating in the same row or column 
+    for (var i = 0; i < 9; i++) {
+        if (board[i][c] == no || board[r][i] == no) {
+            return false;
+        }
+    }
+    //subgrid
+    var sx = r - r % 3;
+    var sy = c - c % 3;
+
+    for (var x = sx; x < sx + 3; x++) {
+        for (var y = sy; y < sy + 3; y++) {
+            if (board[x][y] == no) {
+                return false;
+            }
+        }
+    }
+
+    return true;
+}
+
+function solveSudokuHelper(board, r, c) {
+
+    //base case 
+    if (r == 9) {
+        changeBoard(board);
+        return true;
+    }
+    //other cases 
+    if (c == 9) {
+        return solveSudokuHelper(board, r + 1, 0);
+    }
+    //pre-filled cell, skip it
+    if (board[r][c] != 0) {
+        return solveSudokuHelper(board, r, c + 1);
+    }
+
+    //there is 0 in the current location
+    for (var i = 1; i <= 9; i++) {
+
+        if (isSafe(board, r, c, i)) {
+            board[r][c] = i;
+            var success = solveSudokuHelper(board, r, c + 1);
+            if (success == true) {
+                return true;
+            }
+            //backtracking step
+            board[r][c] = 0;
+        }
+
+    }
+    return false;
+
+}
+
+function solveSudoku(board) {
+    solveSudokuHelper(board, 0, 0);
+}
+
+
+solve.onclick = function() {
+    solveSudoku(board)
+}