Day 24 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 24 of my journey toward mastering the MERN stack! After wrapping up the DOM and Events lectures from Apna College, today was a dedicated Project Day.

Instead of just watching tutorials, I put my logical foundation to the test and built a fully functional, interactive Tic-Tac-Toe Game using vanilla JavaScript, HTML5, and CSS!

It is one thing to print statements in a console, but it is a whole different ball game to map out the winning logic for a user interface.

🛠️ How I Built the Game Mechanics

To complete this project, I had to combine almost everything Shradha Didi taught us over the last two weeks:

1. The Layout & DOM Structure (HTML/CSS)

I built a clean $3 \times 3$ grid using a container holding 9 button elements (boxes). I styled it with a minimalist modern layout, using sharp hover transitions so the player knows which box is active.

2. Tracking Game State (Arrays & Logic)

I used an array to map out all the possible Winning Patterns (the 8 horizontal, vertical, and diagonal combinations on a $3 \times 3$ grid):

javascript

const winPatterns = [

    [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows

    [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns

    [0, 4, 8], [2, 4, 6]             // Diagonals

];