diff --git a/tictactoe1/index.html b/tictactoe1/index.html
new file mode 100644
index 0000000..003eb02
--- /dev/null
+++ b/tictactoe1/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+ Tic-Tac-Toe
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tictactoe1/index.js b/tictactoe1/index.js
new file mode 100644
index 0000000..7eadac1
--- /dev/null
+++ b/tictactoe1/index.js
@@ -0,0 +1,116 @@
+window.addEventListener('DOMContentLoaded', () => {
+ const tiles = Array.from(document.querySelectorAll('.tile'));
+ const playerDisplay = document.querySelector('.display-player');
+ const resetButton = document.querySelector('#reset');
+ const announcer = document.querySelector('.announcer');
+
+ let board = ['', '', '', '', '', '', '', '', ''];
+ let currentPlayer = 'X';
+ let isGameActive = true;
+
+ const PLAYERX_WON = 'PLAYERX_WON';
+ const PLAYERO_WON = 'PLAYERO_WON';
+ const TIE = 'TIE';
+
+ const winningConditions = [
+ [0, 1, 2],
+ [3, 4, 5],
+ [6, 7, 8],
+ [0, 3, 6],
+ [1, 4, 7],``
+ [2, 5, 8],
+ [0, 4, 8],
+ [2, 4, 6]
+ ];
+
+ function handleResultValidation() {
+ let roundWon = false;
+ for (let i = 0; i <= 7; i++) {
+ const winCondition = winningConditions[i];
+ const a = board[winCondition[0]];
+ const b = board[winCondition[1]];
+ const c = board[winCondition[2]];
+ if (a === '' || b === '' || c === '') {
+ continue;
+ }
+ if (a === b && b === c) {
+ roundWon = true;
+ break;
+ }
+ }
+
+ if (roundWon) {
+ announce(currentPlayer === 'X' ? PLAYERX_WON : PLAYERO_WON);
+ isGameActive = false;
+ return;
+ }
+
+ if (!board.includes(''))
+ announce(TIE);
+ }
+
+ const announce = (type) => {
+ switch(type){
+ case PLAYERO_WON:
+ announcer.innerHTML = 'Player O Won';
+ break;
+ case PLAYERX_WON:
+ announcer.innerHTML = 'Player X Won';
+ break;
+ case TIE:
+ announcer.innerText = 'Tie';
+ }
+ announcer.classList.remove('hide');
+ };
+
+ const isValidAction = (tile) => {
+ if (tile.innerText === 'X' || tile.innerText === 'O'){
+ return false;
+ }
+
+ return true;
+ };
+
+ const updateBoard = (index) => {
+ board[index] = currentPlayer;
+ }
+
+ const changePlayer = () => {
+ playerDisplay.classList.remove(`player${currentPlayer}`);
+ currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+ playerDisplay.innerText = currentPlayer;
+ playerDisplay.classList.add(`player${currentPlayer}`);
+ }
+
+ const userAction = (tile, index) => {
+ if(isValidAction(tile) && isGameActive) {
+ tile.innerText = currentPlayer;
+ tile.classList.add(`player${currentPlayer}`);
+ updateBoard(index);
+ handleResultValidation();
+ changePlayer();
+ }
+ }
+
+ const resetBoard = () => {
+ board = ['', '', '', '', '', '', '', '', ''];
+ isGameActive = true;
+ announcer.classList.add('hide');
+
+ if (currentPlayer === 'O') {
+ changePlayer();
+ }
+
+ tiles.forEach(tile => {
+ tile.innerText = '';
+ tile.classList.remove('playerX');
+ tile.classList.remove('playerO');
+ });
+ }
+
+ tiles.forEach( (tile, index) => {
+ tile.addEventListener('click', () => userAction(tile, index));
+ });
+
+ resetButton.addEventListener('click', resetBoard);
+});
\ No newline at end of file
diff --git a/tictactoe1/style.css b/tictactoe1/style.css
new file mode 100644
index 0000000..efe7aa4
--- /dev/null
+++ b/tictactoe1/style.css
@@ -0,0 +1,84 @@
+* {
+ padding: 0;
+ margin: 0;
+ font-family: 'Itim', cursive;
+}
+
+.background {
+ background-color: #12181B;
+ height: 100vh;
+ padding-top: 1px;
+}
+
+.title {
+ color: white;
+ text-align: center;
+ font-size: 40px;
+ margin-top: 10%;
+}
+
+.display {
+ color: white;
+ font-size: 25px;
+ text-align: center;
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+
+.hide {
+ display: none;
+}
+
+.container {
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 33% 33% 33%;
+ grid-template-rows: 33% 33% 33%;
+ max-width: 300px;
+
+}
+
+.tile {
+ border: 1px solid white;
+ min-width: 100px;
+ min-height: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 50px;
+ cursor: pointer;
+}
+
+.playerX {
+ color: #09C372;
+}
+
+.playerO {
+ color: #498AFB;
+}
+
+.controls {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ margin-top: 1em;
+}
+
+.controls button {
+ color: white;
+ padding: 8px;
+ border-radius: 8px;
+ border: none;
+ font-size: 20px;
+ margin-left: 1em;
+ cursor: pointer;
+}
+
+.restart {
+ background-color: #498AFB;
+}
+
+#reset {
+ background-color: #FF3860;
+}
\ No newline at end of file