diff --git a/TicTacToe/image/favicon.png b/TicTacToe/image/favicon.png new file mode 100644 index 00000000..527188ad Binary files /dev/null and b/TicTacToe/image/favicon.png differ diff --git a/TicTacToe/index.html b/TicTacToe/index.html new file mode 100644 index 00000000..f496933e --- /dev/null +++ b/TicTacToe/index.html @@ -0,0 +1,51 @@ + + + + + + + + TicTacToe + + + + + + + + + + + + +
+

Tic Tac Toe

+ +
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+ + + + +
+ + + + + + \ No newline at end of file diff --git a/TicTacToe/script.js b/TicTacToe/script.js new file mode 100644 index 00000000..61541c11 --- /dev/null +++ b/TicTacToe/script.js @@ -0,0 +1,103 @@ +const gameInfo = document.querySelector('.game-info'); +const boxes = document.querySelectorAll('.box'); +const newGameBtn = document.querySelector('.new-game-btn'); + + +let currentPlayer; + +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 gameGrid; + + + +function initGame() { + currentPlayer = 'x'; + gameGrid = ["", "", "", "", "", "", "", "", ""]; + + boxes.forEach((box, index) => { + box.innerText = ""; + box.style.pointerEvents = "all"; + box.classList.remove("win"); + }); + + gameInfo.innerText = `Current Player - ${currentPlayer.toUpperCase()}`; + newGameBtn.classList.remove("active"); +} + +initGame(); + + + +boxes.forEach((box, index) => { + box.addEventListener('click', () => { + handleClick(index); + }); +}); + +function handleClick(index) { + if (gameGrid[index] === "") { + boxes[index].innerText = currentPlayer.toUpperCase(); + boxes[index].style.pointerEvents = "none"; + gameGrid[index] = currentPlayer; + swapTurn(); + checkGameOver(); + } +} + + +function swapTurn() { + currentPlayer = currentPlayer === 'x' ? 'o' : 'x'; + gameInfo.innerText = `Current Player - ${currentPlayer.toUpperCase()}`; +} + +function checkGameOver() { + let winner = ""; + winningPositions.forEach((position) => { + if (gameGrid[position[0]] != "" && + gameGrid[position[1]] != "" && + gameGrid[position[2]] != "" && + gameGrid[position[0]] === gameGrid[position[1]] && + gameGrid[position[1]] === gameGrid[position[2]] + ) { + boxes.forEach((box) => { + box.style.pointerEvents = "none"; + }); + + winner = gameGrid[position[0]] === 'x' ? 'x' : 'o'; + boxes[position[0]].classList.add("win"); + boxes[position[1]].classList.add("win"); + boxes[position[2]].classList.add("win"); + } + }); + + if (winner != "") { + gameInfo.innerText = `Winner - ${winner.toUpperCase()}`; + newGameBtn.classList.add("active"); + return; + } + + + let allBoxesFilled = true; + gameGrid.forEach((box) => { + if (box === "") { + allBoxesFilled = false; + } + }); + + if (allBoxesFilled) { + gameInfo.innerText = `It's a Draw`; + newGameBtn.classList.add("active"); + } +} + +newGameBtn.addEventListener('click', initGame); \ No newline at end of file diff --git a/TicTacToe/style.css b/TicTacToe/style.css new file mode 100644 index 00000000..0e129d7d --- /dev/null +++ b/TicTacToe/style.css @@ -0,0 +1,126 @@ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +:root { + --white: #fff; + --black: #000; + --border-clr: rgba(255, 255, 255, 0.25); + --bg-clr: rgba(255, 255, 255, 0.15); +} + +html { + font-size: 62.5%; +} + +body { + font-size: 1.6rem; +} + +.wrapper { + width: 100vw; + min-height: 100vh; + color: var(--white); + background-image: linear-gradient(to right, #fc5c7d, #6a82fb); + display: grid; + place-items: center; + align-items: start; +} + +.app-name { + font-size: 4.5rem; + align-self: center; + padding-bottom: 3rem; +} + + +.game-info { + border: 1px solid var(--border-clr); + padding: 0.8rem 4.8rem; + border-radius: 1.6rem; + background-color: var(--bg-clr); + backdrop-filter: blur(7px); +} + +.game { + width: 90%; + max-width: 32rem; + aspect-ratio: 1/1; + background-color: var(--bg-clr); + border: 1px solid var(--border-clr); + border-radius: 1.6rem; + backdrop-filter: blur(7px); + display: grid; + grid-template-columns: repeat(3, 1fr); + padding: 3.2rem; +} + +.box { + width: 100%; + aspect-ratio: 1 / 1; + display: grid; + place-items: center; + font-size: 4.8rem; + cursor: pointer; + transition: all 150ms ease-in-out 0s; +} + +.box-1, +.box-2, +.box-4, +.box-5 { + border-bottom: 2px solid var(--white); + border-right: 2px solid var(--white); +} + +.box-3, +.box-6 { + border-bottom: 2px solid var(--white); +} + +.box-7, +.box-8 { + border-right: 2px solid var(--white); +} + +/* new game button */ +.new-game-btn { + color: var(--white); + background-color: var(--bg-clr); + border: none; + border: 1px solid var(--border-clr); + border-radius: 1.6rem; + padding: 0.8rem 3.2rem; + backdrop-filter: blur(7px); + cursor: pointer; + opacity: 0; + visibility: hidden; + pointer-events: none; + text-transform: capitalize; + transition: all 150ms ease-in-out; +} + +.new-game-btn.active { + opacity: 1; + visibility: visible; + pointer-events: all; +} + +.win { + background-color: rgba(0, 255, 0, 0.3); +} + +@media (max-width: 350px) { + .box { + font-size: 4rem; + } + + .app-name { + font-size: 3.5rem; + } +} \ No newline at end of file diff --git a/calculator2/calci.css b/calculator2/calci.css new file mode 100644 index 00000000..c74e23d1 --- /dev/null +++ b/calculator2/calci.css @@ -0,0 +1,44 @@ +.container1 { + text-align: center; + margin-top: 23px; +} + +table { + margin: auto; + border-collapse: collapse; +} + +input { + border-radius: 10px; + font-size: 24px; + height: 50px; + width: 250px; + padding: 5px; + border: 1px solid #ccc; + margin-bottom: 10px; +} + +button { + border-radius: 10px; + font-size: 20px; + background: #4CAF50; + color: #fff; + width: 60px; + height: 60px; + margin: 6px; + cursor: pointer; + transition: background 0.3s ease; +} + +button:hover { + background: #45a049; + transform: scale(1.05); +} + +.calculator { + background-color: #34495E; + padding: 20px; + border-radius: 20px; + display: inline-block; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); +} diff --git a/calculator2/calci.html b/calculator2/calci.html new file mode 100644 index 00000000..33fa320b --- /dev/null +++ b/calculator2/calci.html @@ -0,0 +1,62 @@ + + + + + + + + + Calculator + + + +
+ + + + + +

Simple Calculator

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/calculator2/calci.js b/calculator2/calci.js new file mode 100644 index 00000000..089c3cca --- /dev/null +++ b/calculator2/calci.js @@ -0,0 +1,29 @@ +let screen = document.getElementById("display"); +buttons = document.querySelectorAll("button"); +let screenValue = ""; +for (item of buttons) { + item.addEventListener("click", (e) => { + buttonText = e.target.innerText; + if (buttonText == "X") { + buttonText = "*"; + screenValue += buttonText; + screen.value = screenValue; + } else if (buttonText == "C") { + screenValue = ""; + screen.value = screenValue; + } else if (buttonText == "=") { + var result; + try { + result = eval(screenValue); + } catch (error) { + result = "Expression error"; + } + screen.value = result; + } else { + screenValue += buttonText; + screen.value = screenValue; + } + }); +} + +