JavaScript Tic-Tac-Toe Game — DOM Manipulation Project Tutorial 2026

Introduction

Tic-Tac-Toe is one of the best beginner-to-intermediate JavaScript projects because it combines DOM manipulation, event handling, state management, and algorithmic thinking into a single, focused application.

In this tutorial, you will build a fully functional two-player Tic-Tac-Toe game from scratch using vanilla JavaScript — no libraries, no frameworks. By the end, you'll understand how to:

• Manage game state with a simple array
• Detect wins using combination checking
• Handle user interactions with click events
• Dynamically update the DOM based on state changes
• Implement reset and draw detection logic

This project is perfect for anyone who has learned JavaScript basics and wants to apply that knowledge to a real interactive application. This tutorial is useful for all learners — concepts are explained in simple language.

Step 1 — HTML Structure

We need a container with 9 cells arranged in a 3×3 grid, a status display showing whose turn it is, and a reset button.

Each cell has a data-index attribute — this links the DOM element to a position in our state array.

Step 2 — CSS Styling

CSS Grid is perfect for a 3×3 board — grid-template-columns: repeat(3, 100px) creates three equal columns without needing complex layout calculations.

Step 3 — Game State Variables

Why an array for the board? The array board holds 9 positions (indices 0–8). Each position is either '' (empty), 'X', or 'O'. This flat array maps directly to the 3×3 grid — index 0 is top-left, index 8 is bottom-right.

Why define win conditions as an array of arrays? Rather than writing complex if-else logic, we store every possible winning line. To check for a win, we simply loop through these 8 combinations and test if all three positions share the same mark.

Step 4 — Handling Cell Clicks

Notice the separation of concerns: we first update the board array (state), then update the DOM (view). The guard clause pattern prevents invalid moves — if a cell already has a mark or the game has ended, we return early.

Step 5 — Win Detection Algorithm

How the algorithm works:

1. We use destructuring const [a, b, c] = winConditions[i] to get the three indices of each winning line.
2. If any position in a combo is empty, we skip it with continue.
3. If all three positions share the same value, that player wins.
4. If no winner is found and no empty cells remain (!board.includes('')), it's a draw.
5. Otherwise, we toggle currentPlayer using the ternary operator.

Step 6 — Highlighting the Winning Line

This function adds a CSS class to the three winning cells, triggering the pulse animation defined in our stylesheet. The forEach loop iterates over the winning indices and applies the class to each corresponding DOM element.

Step 7 — Reset Functionality

Reset must synchronize both state and DOM. We clear every position in the board array, reset the current player to X, re-enable the game, update the status message, and remove all classes and text content from every cell.

Step 8 — Attaching Event Listeners

We use forEach to attach event listeners to all 9 cells. Each cell triggers the same handleCellClick function — the function identifies which cell was clicked via event.target and the data-index attribute.

Complete JavaScript Code

Key Concepts Reinforced

Enhancement Ideas

Once you have the base game working, try adding these features:

1. Score tracking — maintain a wins counter for each player using an object { X: 0, O: 0, draws: 0 }
2. AI opponent — implement a simple computer player that picks a random empty cell, or use the minimax algorithm for an unbeatable AI
3. Keyboard support — let players use number keys 1–9 to place marks
4. Animations — add CSS transitions for placing marks and smooth resets
5. LocalStorage persistence — save the score across browser sessions

Common Mistakes to Avoid

1. Using the DOM as state — never read cell.textContent to determine game logic. Always read from the board array.
2. Forgetting to disable clicks after game ends — without the gameActive flag, players can keep clicking after a win.
3. Not resetting classes on reset — if you only clear textContent but leave classes, colors remain from the previous round.
4. Using == instead of === — always use strict equality to avoid unexpected type coercion.

Summary

This project teaches you how to think in terms of state → logic → render. The board array is the single source of truth, the check logic determines outcomes, and the DOM rendering simply reflects the current state. This same pattern scales to much larger applications — frameworks like React formalize this exact approach.

You practiced DOM selection (querySelectorAll, getElementById), event handling (addEventListener), array methods (forEach, includes, map, filter), destructuring, template literals, and conditional logic — all core JavaScript skills that appear in interviews and real-world codebases.