Tic Tac Toe Game

Web Development/TictactoeGame/app.js

@@ -0,0 +1,126 @@
+
+const statusDiv = document.querySelector('.status');
+const resetDiv = document.querySelector('.reset');
+const cellDivs = document.querySelectorAll('.game-cell');
+
+
+const xSymbol = '×';
+const oSymbol = '○';
+
+
+let gameIsLive = true;
+let xIsNext = true;
+
+
+const letterToSymbol = (letter) => letter === 'x' ? xSymbol : oSymbol;
+
+const handleWin = (letter) => {
+  gameIsLive = false;
+  if (letter === 'x') {
+    statusDiv.innerHTML = `${letterToSymbol(letter)} has won!`;
+  } else {
+    statusDiv.innerHTML = `<span>${letterToSymbol(letter)} has won!</span>`;
+  }
+};
+
+const checkGameStatus = () => {
+  const topLeft = cellDivs[0].classList[1];
+  const topMiddle = cellDivs[1].classList[1];
+  const topRight = cellDivs[2].classList[1];
+  const middleLeft = cellDivs[3].classList[1];
+  const middleMiddle = cellDivs[4].classList[1];
+  const middleRight = cellDivs[5].classList[1];
+  const bottomLeft = cellDivs[6].classList[1];
+  const bottomMiddle = cellDivs[7].classList[1];
+  const bottomRight = cellDivs[8].classList[1];
+
+
+  if (topLeft && topLeft === topMiddle && topLeft === topRight) {
+    handleWin(topLeft);
+    cellDivs[0].classList.add('won');
+    cellDivs[1].classList.add('won');
+    cellDivs[2].classList.add('won');
+  } else if (middleLeft && middleLeft === middleMiddle && middleLeft === middleRight) {
+    handleWin(middleLeft);
+    cellDivs[3].classList.add('won');
+    cellDivs[4].classList.add('won');
+    cellDivs[5].classList.add('won');
+  } else if (bottomLeft && bottomLeft === bottomMiddle && bottomLeft === bottomRight) {
+    handleWin(bottomLeft);
+    cellDivs[6].classList.add('won');
+    cellDivs[7].classList.add('won');
+    cellDivs[8].classList.add('won');
+  } else if (topLeft && topLeft === middleLeft && topLeft === bottomLeft) {
+    handleWin(topLeft);
+    cellDivs[0].classList.add('won');
+    cellDivs[3].classList.add('won');
+    cellDivs[6].classList.add('won');
+  } else if (topMiddle && topMiddle === middleMiddle && topMiddle === bottomMiddle) {
+    handleWin(topMiddle);
+    cellDivs[1].classList.add('won');
+    cellDivs[4].classList.add('won');
+    cellDivs[7].classList.add('won');
+  } else if (topRight && topRight === middleRight && topRight === bottomRight) {
+    handleWin(topRight);
+    cellDivs[2].classList.add('won');
+    cellDivs[5].classList.add('won');
+    cellDivs[8].classList.add('won');
+  } else if (topLeft && topLeft === middleMiddle && topLeft === bottomRight) {
+    handleWin(topLeft);
+    cellDivs[0].classList.add('won');
+    cellDivs[4].classList.add('won');
+    cellDivs[8].classList.add('won');
+  } else if (topRight && topRight === middleMiddle && topRight === bottomLeft) {
+    handleWin(topRight);
+    cellDivs[2].classList.add('won');
+    cellDivs[4].classList.add('won');
+    cellDivs[6].classList.add('won');
+  } else if (topLeft && topMiddle && topRight && middleLeft && middleMiddle && middleRight && bottomLeft && bottomMiddle && bottomRight) {
+    gameIsLive = false;
+    statusDiv.innerHTML = 'Game is tied!';
+  } else {
+    xIsNext = !xIsNext;
+    if (xIsNext) {
+      statusDiv.innerHTML = `${xSymbol} is next`;
+    } else {
+      statusDiv.innerHTML = `<span>${oSymbol} is next</span>`;
+    }
+  }
+};
+
+
+
+const handleReset = () => {
+  xIsNext = true;
+  statusDiv.innerHTML = `${xSymbol} is next`;
+  for (const cellDiv of cellDivs) {
+    cellDiv.classList.remove('x');
+    cellDiv.classList.remove('o');
+    cellDiv.classList.remove('won');
+  }
+  gameIsLive = true;
+};
+
+const handleCellClick = (e) => {
+  const classList = e.target.classList;
+
+  if (!gameIsLive || classList[1] === 'x' || classList[1] === 'o') {
+    return;
+  }
+
+  if (xIsNext) {
+    classList.add('x');
+    checkGameStatus();
+  } else {
+    classList.add('o');
+    checkGameStatus();
+  }
+};
+
+
+
+resetDiv.addEventListener('click', handleReset);
+
+for (const cellDiv of cellDivs) {
+  cellDiv.addEventListener('click', handleCellClick)
+}

Web Development/TictactoeGame/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="style.css">
+  <title>Tic Tac Toe</title>
+</head>
+<body>
+  <div class="container">
+    <h1 class="title">Tic <span>Tac</span> Toe</h1>
+    <div class="status-action">
+      <div class="status">× is next</div>
+      <div class="reset">New Game</div>
+    </div>
+    <div class="game-grid">
+      <div class="game-cell"></div>
+      <div class="game-cell"></div>
+      <div class="game-cell"></div>
+      <div class="game-cell"></div>
+      <div class="game-cell"></div>
+      <div class="game-cell"></div>
+      <div class="game-cell"></div>
+      <div class="game-cell"></div>
+      <div class="game-cell"></div>
+    </div>
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>

Web Development/TictactoeGame/style.css

@@ -0,0 +1,127 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    color:;
+    display: flex;
+    font-family: sans-serif;
+    justify-content: center;
+  }
+
+  .container {
+    background: blueviolet;
+    margin: 50px;
+    padding: 50px;
+    border-radius: 25px;
+  }
+
+  .title {
+    text-align: center;
+  }
+
+  .title span {
+    color: #F2EBD3;
+  }
+
+  .status-action {
+    display: flex;
+    margin-top: 25px;
+    font-size: 25px;
+    justify-content: space-around;
+    height: 30px;
+  }
+
+  .status span {
+    color: #F2EBD3;
+  }
+
+  .reset {
+    cursor: pointer;
+  }
+
+  .reset:hover {
+    color: #F2EBD3;
+  }
+
+  .game-grid {
+    background: #eef3f3;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-gap: 15px;
+    margin-top: 50px;
+  }
+
+  .game-cell {
+    background: blueviolet;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    height: 200px;
+    width: 200px;
+  }
+
+  .x,
+  .o {
+    cursor: default;
+  }
+
+  .x::after {
+    content: '×';
+    font-size: 200px;
+  }
+
+  .o::after {
+    content: '○';
+    color: #F2EBD3;
+    font-size: 225px;
+  }
+
+  .won::after {
+    color: #BD022F;
+  }
+
+  @media only screen and (max-width: 1024px) {
+    .game-grid {
+      margin-top: 25px;
+      grid-gap: 10px;
+    }
+
+    .game-cell {
+      height: 150px;
+      width: 150px;
+    }
+
+    .x::after {
+      font-size: 150px;
+    }
+
+    .o::after {
+      font-size: 175px;
+    }
+  }
+
+  @media only screen and (max-width: 540px) {
+    .container {
+      margin: 25px;
+      padding: 25px;
+    }
+
+    .game-cell {
+      height: 100px;
+      width: 100px;
+    }
+
+    .x::after {
+      font-size: 100px;
+    }
+
+    .o::after {
+      font-size: 125px;
+    }
+  }
+