Intro:
Building the timeless game Tic Tac Toe with HTML scripts.

UX Component:
The below code defines the layout and styling for the Tic Tac Toe board and its cells using CSS. It creates a 3x3 grid layout for the board, with each cell being a square of 150x150 pixels. The cells have borders, and the content (X or O) is centered both vertically and horizontally. The content is displayed with a font size of 2em, and the cursor changes to a pointer when hovering over a cell, indicating that it is clickable.

    <style>
        .board {
            display: grid;
            grid-template-columns: repeat(3, 150px);
            grid-template-rows: repeat(3, 150px);
        }

        .cell {
            width: 150px;
            height: 150px;
            border: 2px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            cursor: pointer;
        }
    </style>

Event Trigger Component:
The board is represented as a grid with nine cells. Each cell is a

    <div class="board" id="board">
        <div class="cell" onclick="makeMove(0)"></div>
        <div class="cell" onclick="makeMove(1)"></div>
        <div class="cell" onclick="makeMove(2)"></div>
        <div class="cell" onclick="makeMove(3)"></div>
        <div class="cell" onclick="makeMove(4)"></div>
        <div class="cell" onclick="makeMove(5)"></div>
        <div class="cell" onclick="makeMove(6)"></div>
        <div class="cell" onclick="makeMove(7)"></div>
        <div class="cell" onclick="makeMove(8)"></div>
    </div>

Rules Engine:
he JavaScript code enables the functionality of the Tic Tac Toe game by handling player moves, checking for a win or draw, and resetting the game when needed. The game's logic and flow are defined in this script, allowing users to play and enjoy the game on the HTML and CSS-designed board.

 <script>
        const board = document.getElementById('board');
        const cells = board.querySelectorAll('.cell');
        let currentPlayer = 'X';
        let moves = 0;
        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]
        ];

        function checkWinner(player) {
            return winningCombinations.some(combination => {
                return combination.every(cell => cells[cell].textContent === player);
            });
        }

        function makeMove(index) {
            if (cells[index].textContent === '') {
                cells[index].textContent = currentPlayer;
                moves++;

                if (checkWinner(currentPlayer)) {
                    alert(currentPlayer + ' wins!');
                    resetGame();
                } else if (moves === 9) {
                    alert('It\'s a draw!');
                    resetGame();
                } else {
                    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                }
            }
        }

        function resetGame() {
            cells.forEach(cell => cell.textContent = '');
            currentPlayer = 'X';
            moves = 0;
        }
    </script>

Demo:

Power Apps Tic Tac Toe