diff --git a/tic-tac-toe/index.html b/tic-tac-toe/index.html
new file mode 100644
index 0000000..85b9480
--- /dev/null
+++ b/tic-tac-toe/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Document
+
+
+
+
+ Tic Tac Toe Game
+ Turn: Player X
+
+
+
+
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+
+
+
+
\ No newline at end of file
diff --git a/tic-tac-toe/script.js b/tic-tac-toe/script.js
new file mode 100644
index 0000000..01821e1
--- /dev/null
+++ b/tic-tac-toe/script.js
@@ -0,0 +1,94 @@
+const STARTED = 0;
+const ENDED = 1;
+const playerSpan = document.getElementById("player");
+const gameTable = document.getElementById("game");
+const game = {
+ state: STARTED,
+ turn: "X",
+ move: 0,
+};
+function endGame(winner) {
+ if (winner) {
+ alert("Game Over | Winner = " + winner);
+ } else {
+ alert("Game Over | Draw");
+ }
+ game.state = ENDED;
+}
+function restartGame() {
+ if (Math.random() > 0.5) game.turn = "O";
+ else game.turn = "X";
+ document.getElementById("player").innerText = game.turn;
+ game.state = STARTED;
+ game.move = 0;
+
+ Array.from(document.getElementsByTagName("td")).forEach((cell) => {
+ cell.textContent = "";
+ });
+}
+function nextTurn() {
+ if (game.state === ENDED) return;
+
+ game.move++;
+ if (game.turn === "X") game.turn = "O";
+ else game.turn = "X";
+
+ if (game.move == 9) {
+ endGame();
+ }
+
+ playerSpan.textContent = game.turn;
+}
+function isSeqCaptured(arrayOf3Cells) {
+ let winnningCombo = game.turn + game.turn + game.turn;
+ if (arrayOf3Cells.map((i) => i.textContent).join("") === winnningCombo) {
+ endGame(game.turn);
+ }
+}
+function isRowCaptured(row) {
+ let tableRow = Array.from(gameTable.children[0].children[row - 1].children);
+ isSeqCaptured(tableRow);
+}
+function isColCaptured(col) {
+ let tableCol = [
+ gameTable.children[0].children[0].children[col - 1],
+ gameTable.children[0].children[1].children[col - 1],
+ gameTable.children[0].children[2].children[col - 1],
+ ];
+ isSeqCaptured(tableCol);
+}
+function isDiagCaptured(row, col) {
+ if (row !== col && row + col !== 4) return;
+ let diag1 = [
+ gameTable.children[0].children[0].children[0],
+ gameTable.children[0].children[1].children[1],
+ gameTable.children[0].children[2].children[2],
+ ];
+ let diag2 = [
+ gameTable.children[0].children[0].children[2],
+ gameTable.children[0].children[1].children[1],
+ gameTable.children[0].children[2].children[0],
+ ];
+ isSeqCaptured(diag1);
+ isSeqCaptured(diag2);
+}
+
+function boxClicked(row, col) {
+ if (game.state === ENDED) {
+ alert("Game Ended | Restart to Play Again");
+ return;
+ }
+ console.log("box clicked = ", row, col);
+ let clickedBox = gameTable.children[0].children[row - 1].children[col - 1];
+ if (clickedBox.textContent) {
+ alert("Please select other box");
+ return;
+ }
+ clickedBox.textContent = game.turn;
+ setTimeout(() => {
+ isRowCaptured(row);
+ isColCaptured(col);
+ isDiagCaptured(row, col);
+ nextTurn();
+ });
+}
diff --git a/tic-tac-toe/style.css b/tic-tac-toe/style.css
new file mode 100644
index 0000000..897803f
--- /dev/null
+++ b/tic-tac-toe/style.css
@@ -0,0 +1,20 @@
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+table#game td {
+ background-color: rgb(245, 8, 8);
+ height: 200px;
+ width: 200px;
+ border: solid rgb(80, 240, 6) 5px;
+ border-radius: 10px;
+ text-align: center;
+ font-weight: bold;
+ font-size: 60pt;
+}
+button#restart {
+ padding: 8px;
+ background-color: rgb(12, 130, 240);
+ font-size: 20pt;
+ color: white;
+ border-radius: 15px;
+}
\ No newline at end of file