diff --git a/Fronted Projects/Random-Gif-Generator b/Fronted Projects/Random-Gif-Generator new file mode 160000 index 0000000..285304c --- /dev/null +++ b/Fronted Projects/Random-Gif-Generator @@ -0,0 +1 @@ +Subproject commit 285304cead73a27909f852f6258dc0ce21e2205b diff --git a/Fronted Projects/TIc Tac Toe/.DS_Store b/Fronted Projects/TIc Tac Toe/.DS_Store new file mode 100644 index 0000000..956dba0 Binary files /dev/null and b/Fronted Projects/TIc Tac Toe/.DS_Store differ diff --git a/Fronted Projects/TIc Tac Toe/assets/favicon.ico b/Fronted Projects/TIc Tac Toe/assets/favicon.ico new file mode 100644 index 0000000..921cc20 Binary files /dev/null and b/Fronted Projects/TIc Tac Toe/assets/favicon.ico differ diff --git a/Fronted Projects/TIc Tac Toe/assets/gradient-bg.jpg b/Fronted Projects/TIc Tac Toe/assets/gradient-bg.jpg new file mode 100644 index 0000000..5f5ae97 Binary files /dev/null and b/Fronted Projects/TIc Tac Toe/assets/gradient-bg.jpg differ diff --git a/Fronted Projects/TIc Tac Toe/index.html b/Fronted Projects/TIc Tac Toe/index.html new file mode 100644 index 0000000..5788321 --- /dev/null +++ b/Fronted Projects/TIc Tac Toe/index.html @@ -0,0 +1,40 @@ + + + + + + + Document + + + + + + + + + +
+ +

+ +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + \ No newline at end of file diff --git a/Fronted Projects/TIc Tac Toe/index.js b/Fronted Projects/TIc Tac Toe/index.js new file mode 100644 index 0000000..8d74d7e --- /dev/null +++ b/Fronted Projects/TIc Tac Toe/index.js @@ -0,0 +1,116 @@ +const boxes = document.querySelectorAll(".box"); +const gameInfo = document.querySelector(".game-info"); +const newGameBtn = document.querySelector(".btn"); + + +let currentPlayer; +let gameGrid; + +const winningPositions = [ + [0,1,2], + [3,4,5], + [6,7,8], + [0,3,6], + [1,4,7], + [2,5,8], + [0,4,8], + [2,4,6] +]; + +//let's create a function to initialise the game +function initGame() { + currentPlayer = "X"; + gameGrid = ["","","","","","","","",""]; + //UI pr empty bhi karna padega boxes ko + boxes.forEach((box, index) => { + box.innerText = ""; + boxes[index].style.pointerEvents = "all"; + //one more thing is missing, initialise box with css properties again + box.classList = `box box${index+1}`; + }); + newGameBtn.classList.remove("active"); + gameInfo.innerText = `Current Player - ${currentPlayer}`; +} + +initGame(); + +function swapTurn() { + if(currentPlayer === "X") { + currentPlayer = "O"; + } + else { + currentPlayer = "X"; + } + //UI Update + gameInfo.innerText = `Current Player - ${currentPlayer}`; +} + +function checkGameOver() { + let answer = ""; + + winningPositions.forEach((position) => { + //all 3 boxes should be non-empty and exactly same in value + if( (gameGrid[position[0]] !== "" || gameGrid[position[1]] !== "" || gameGrid[position[2]] !== "") + && (gameGrid[position[0]] === gameGrid[position[1]] ) && (gameGrid[position[1]] === gameGrid[position[2]])) { + + //check if winner is X + if(gameGrid[position[0]] === "X") + answer = "X"; + else { + answer = "O"; + } + + + //disable pointer events + boxes.forEach((box) => { + box.style.pointerEvents = "none"; + }) + + //now we know X/O is a winner + boxes[position[0]].classList.add("win"); + boxes[position[1]].classList.add("win"); + boxes[position[2]].classList.add("win"); + } + }); + + //it means we have a winner + if(answer !== "" ) { + gameInfo.innerText = `Winner Player - ${answer}`; + newGameBtn.classList.add("active"); + return; + } + + //We know, NO Winner Found, let's check whether there is tie + let fillCount = 0; + gameGrid.forEach((box) => { + if(box !== "" ) + fillCount++; + }); + + //board is Filled, game is TIE + if(fillCount === 9) { + gameInfo.innerText = "Game Tied !"; + newGameBtn.classList.add("active"); + } + +} + +function handleClick(index) { + if(gameGrid[index] === "" ) { + boxes[index].innerText = currentPlayer; + gameGrid[index] = currentPlayer; + boxes[index].style.pointerEvents = "none"; + //swap karo turn ko + swapTurn(); + //check koi jeet toh nahi gya + checkGameOver(); + } +} + +boxes.forEach((box, index) => { + box.addEventListener("click", () => { + handleClick(index); + }) +}); + +newGameBtn.addEventListener("click", initGame); \ No newline at end of file diff --git a/Fronted Projects/TIc Tac Toe/styles.css b/Fronted Projects/TIc Tac Toe/styles.css new file mode 100644 index 0000000..c68791c --- /dev/null +++ b/Fronted Projects/TIc Tac Toe/styles.css @@ -0,0 +1,90 @@ +*,*::before,*::after { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Poppins', 'sans-serif'; +} + +.wrapper{ + width: 100vw; + height: 100vh; + background-image: url(./assets/gradient-bg.jpg); + background-size: cover; + background-position: center; + display: grid; + place-items: center; +} + +.game-info{ + color:white; + position:absolute; + top:3rem; + left:50%; + transform:translateX(-50%); + background-color: rgba(255, 255, 255, 0.15); + border-radius: 1rem; + border: 1px solid rgba(255, 255, 255, 0.25); + padding: 0.5rem 3rem; + /* text-align:center; */ + +} + +.tic-tac-toe{ + width:90%; + max-width:20rem; + background-color: rgba(255, 255, 255, 0.15); + border-radius: 1rem; + border: 1px solid rgba(255, 255, 255, 0.25); + padding: 2rem; + display: grid; + grid-template-columns: repeat(3, 1fr); + aspect-ratio: 1/1; +} + + +.box{ + position:relative; + width:100%; + aspect-ratio: 1/1; + cursor: pointer; + font-size: 3rem; + color:white; + display: flex; + justify-content: center; + align-items: center; +} + +.box1, .box2, .box4, .box5{ + border-right:2px solid white; + border-bottom:2px solid white; +} + +.box3, .box6{ + border-bottom: 2px solid white; +} + +.box7, .box8{ + border-right:2px solid white; +} + +.btn{ + color:white; + position: absolute; + bottom:3rem; + left:50%; + transform:translateX(-50%); + background-color: rgba(255, 255, 255, 0.15); + border-radius: 1rem; + border: 1px solid rgba(255, 255, 255, 0.25); + padding: 0.5rem 2rem; + cursor:pointer; + display: none; +} + +.btn.active{ + display: flex; +} + +.win{ + background-color: rgba(0, 255, 0, 0.3); +} \ No newline at end of file diff --git a/Fronted Projects/ecommerce-shopping-cart b/Fronted Projects/ecommerce-shopping-cart new file mode 160000 index 0000000..c532b8b --- /dev/null +++ b/Fronted Projects/ecommerce-shopping-cart @@ -0,0 +1 @@ +Subproject commit c532b8bebf8e160b0dc0b6a4f1bc797bf99da844