Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Tic-tac-toe
medium30 min
Build a two-player Tic-tac-toe game with alternating X and O turns, win and draw detection, and a reset control.
Requirements
Start with an empty 3 × 3 board and X to move. Every legal move alternates players.
Reject moves in an occupied cell and all moves after a win or draw. Disable occupied and terminal cells.
A row, column, or either diagonal of three identical marks wins. Highlight winning cells and show Winner: X or Winner: O.
When every cell is filled without a winner, show Draw. Otherwise the status is X to move or O to move.
Reset creates a fresh empty board with X to move. Update state immutably; keep logic in the separate game.js file.
Keep the supplied native button labels, status output, and selectors. The complete board markup and stylesheet are supplied; no AI opponent, score history, or online multiplayer is needed.
Examples
Example 1
Input: X plays the first row while O plays elsewhere.
Output: Winner: X; the board is locked until reset.
The visible behavior is identical across React, Vue, and Angular.