prabhurohiths · aseelkp · Oct 12, 2022
diff --git a/tic-tac toe/index.html b/tic-tac toe/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tic Tac Toe</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <div class="board" id="board">
+      <h1>Tic Tac Toe</h1>
+      <div class="container">
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+        <div class="cell"></div>
+      </div>
+      <div class="footer">
+        <div>
+          Crafted with 💖 <br />
+          ©️Aseel
+      </div>
+    </div>
+    <div class="winning-message">
+      <div class="winning-text"></div>
+      <button class="restartBtn" id="restartButton">Restart</button>
+    </div>
+  </body>
+</html>
diff --git a/tic-tac toe/script.js b/tic-tac toe/script.js
@@ -0,0 +1,96 @@
+const cellElements = document.querySelectorAll(".cell");
+const board = document.getElementById("board");
+const winningMessageTextElement =
+document.getElementsByClassName("winning-text");
+const winningMessageElement =
+document.getElementsByClassName("winning-message");
+const restartBtn = document.getElementById("restartButton");
+
+const xClass = "x";
+const circleClass = "circle";
+let circleTurn 
+
+const winningCombinations = [
+  [0, 1, 2],
+  [3, 4, 5],
+  [6, 7, 8],
+  [0, 3, 6],
+  [1, 4, 7],
+  [2, 5, 8],
+  [0, 4, 8],
+  [2, 4, 6],
+];
+
+
+restartBtn.addEventListener("click", startGame);
+startGame();
+function startGame(){
+  circleTurn = false
+  cellElements.forEach((cell) => {
+    cell.classList.remove(xClass);
+    cell.classList.remove(circleClass);
+    cell.removeEventListener("click", handleCLick);
+    cell.addEventListener("click", handleCLick, { once: true });
+  });
+  setBoardHoverClass();
+  winningMessageElement[0].classList.remove("show");
+
+}
+
+
+
+
+function handleCLick(e) {
+  const cell = e.target;
+  const currentClass = circleTurn ? circleClass : xClass;
+  //placeMark
+  placeMark(cell, currentClass);
+  //check for winner
+  if (checkWin(currentClass)) {
+    endgame(false);
+  } else if (isDraw()) {
+    endgame(true);
+  } else {
+    //swap turn
+    circleTurn = !circleTurn;
+    //hover
+    setBoardHoverClass();
+  }
+}
+function endgame(draw) {
+  if (draw) {
+    winningMessageTextElement[0].innerText = "Draw! 😐";
+  } else {
+    winningMessageTextElement[0].innerText = `${circleTurn ? "O" : "X"} Wins! 🎉`;
+  }
+  winningMessageElement[0].classList.add("show");
+}
+function placeMark(cell, currentClass) {
+  cell.classList.add(currentClass);
+}
+
+function isDraw() {
+  return [...cellElements].every((cell) => {
+    return (
+      cell.classList.contains(xClass) || cell.classList.contains(circleClass)
+    );
+  });
+}
+
+function setBoardHoverClass() {
+  board.classList.remove(xClass);
+  board.classList.remove(circleClass);
+  if (circleTurn) {
+    board.classList.add(circleClass);
+  } else {
+    board.classList.add(xClass);
+  }
+}
+
+function checkWin(currentClass) {
+  return winningCombinations.some((combination) => {
+    return combination.every((index) => {
+      return cellElements[index].classList.contains(currentClass);
+    });
+  });
+}
diff --git a/tic-tac toe/style.css b/tic-tac toe/style.css
@@ -0,0 +1,146 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+:root {
+  --cell-size: 100px;
+  --mark-size: calc(var(--cell-size) * 0.9);
+}
+.board {
+  height: 100vh;
+  width: 100wh;
+  display: grid;
+  justify-content: center;
+  align-content: space-evenly;
+  justify-items: center;
+}
+.container {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  background: rgb(131 163 255 / 35%);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(7px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.cell {
+  width: var(--cell-size);
+  height: var(--cell-size);
+  border: 1px #000 solid;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.cell:first-child,
+.cell:nth-child(2),
+.cell:nth-child(3) {
+  border-top: none;
+}
+.cell:nth-child(3n + 1) {
+  border-left: none;
+}
+.cell:nth-child(3n + 3) {
+  border-right: none;
+}
+.cell:last-child,
+.cell:nth-child(8),
+.cell:nth-child(7) {
+  border-bottom: none;
+}
+
+.cell.x,
+.cell.circle {
+  cursor: not-allowed;
+}
+
+.cell.x::before,
+.cell.x::after,
+.cell.circle::before {
+  background-color: #000;
+}
+.board.x .cell:not(.x):not(.circle):hover::before,
+.board.x .cell:not(.x):not(.circle):hover::after,
+.board.circle .cell:not(.x):not(.circle):hover::before {
+  background-color: lightgray;
+}
+
+.cell.x::before,
+.cell.x::after,
+.board.x .cell:not(.x):not(.circle):hover::before,
+.board.x .cell:not(.x):not(.circle):hover::after {
+  content: "";
+  height: var(--mark-size);
+  width: calc(var(--mark-size) * 0.15);
+  position: absolute;
+}
+.cell.x::before,
+.board.x .cell:not(.x):not(.circle):hover::before {
+  transform: rotate(45deg);
+}
+.cell.x::after,
+.board.x .cell:not(.x):not(.circle):hover::after {
+  transform: rotate(-45deg);
+}
+
+.cell.circle::before,
+.cell.circle::after,
+.board.circle .cell:not(.x):not(.circle):hover::before,
+.board.circle .cell:not(.x):not(.circle):hover::after {
+  content: "";
+  border-radius: 50%;
+  position: absolute;
+}
+.cell.circle::before,
+.board.circle .cell:not(.x):not(.circle):hover::before {
+  height: var(--mark-size);
+  width: var(--mark-size);
+}
+.cell.cell.circle::after,
+.board.circle .cell:not(.x):not(.circle):hover::after {
+  height: calc(var(--mark-size) * 0.7);
+  width: calc(var(--mark-size) * 0.7);
+  background-color: #fff;
+}
+
+.winning-message {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.8);
+  font-weight: bold;
+  flex-direction: column;
+}
+.winning-text {
+  color: #fff;
+  font-size: 4rem;
+}
+.restartBtn {
+  background-color: #fff;
+  border: 1px solid #000;
+  padding: 0.5rem;
+  cursor: pointer;
+  font-size: 3rem;
+}
+.restartBtn:hover {
+  background-color: #000;
+  color: #fff;
+}
+
+.winning-message.show {
+  display: flex;
+}
+
+.footer{
+    font-size: 1.3rem;
+
+}