🧠 Tic Tac Toe – A Classic Game Reimagined in JavaScript

📌 Live Demo: Play Now

🗂️ Source Code: GitHub Repo

🎓 Part of My Learning Journey: Learning Curve Showcase

---

🎯 Project Overview

The Tic Tac Toe Game is one of the foundational JavaScript projects I built as part of my frontend learning journey. It combines DOM manipulation, game logic, and conditional rendering to deliver a fun and interactive browser-based game.

It supports both:

• 👥 Two-player mode
• 🤖 Play against the bot (single-player mode)

This project is part of my learning-curve initiative where I build real projects to reinforce key frontend concepts.

---

🧩 Features

• ✅ 3×3 interactive grid
• 🔄 Turn-based play with automatic switching
• 🤖 Single-player mode with a basic bot
• 🧠 Win and draw detection
• 🔁 "New Game" button to reset
• 🖥️ Responsive layout for different screen sizes
• 💡 Status indicator (shows turn, win, or draw)

---

🛠️ Tech Stack

• HTML – structure of the board and UI
• CSS – styling, layout, and responsiveness
• JavaScript – logic, state handling, interactivity

---

🧠 Key Learnings

Here’s what I learned and practiced through this project:

1. DOM Manipulation
   
   Handling element selection, updating content, and applying styles dynamically using JavaScript.

2. Game State Management
   
   Tracking game status (win/draw/turns) using arrays, conditions, and functions.

3. Event Handling
   
   Using addEventListener for cell clicks, and updating UI based on logic.

4. Separation of Concerns
   
   Writing modular code — separating game logic, UI updates, and event handlers.

5. Implementing a Basic Bot
   
   I added a simple bot that selects a random empty cell after the player's move. This introduced me to conditional AI logic.

---

🧪 How It Works

• The board is a 3×3 grid of clickable cells.
• Two modes are supported: Player vs Player or Player vs Bot.
• On each turn:
  • The player's symbol (X or O) is added to the clicked cell.
  • The game checks for a win using predefined winning patterns.
  • If no win and the board is full, it's a draw.
• In bot mode, the computer auto-selects a random empty cell.
• Clicking "New Game" resets the board and status.

---

🚀 Live Project

You can play it right now on GitHub Pages:

🎮 Play Tic Tac Toe

---

📂 Explore the Code

The full source code is available in my GitHub repo. Feel free to explore, fork, or suggest improvements:

🔗 Tic Tac Toe – GitHub Repository

---

🔮 Future Enhancements

Some possible upgrades I plan to work on:

• 🔊 Add sound effects for clicks and wins
• 🌗 Dark/light mode toggle
• 🧠 Improve bot using Minimax algorithm (make it unbeatable)
• 📊 Track X/O scores across rounds
• 🎨 Add animations or themes for visual enhancement

---

🛤️ Part of My Learning Curve Journey

This project is part of my learning-curve series — a self-designed roadmap where I learn development by building real-world projects. You can explore other projects here:

🔗 https://mohit-sharma-dadhich.github.io/learning-curve/#about

---

🙌 Final Thoughts

Recreating this simple yet iconic game helped me gain confidence in:

• Structuring logic
• Handling user interactions
• Thinking about UI/UX
• Working with browser events

It’s a small step, but every step adds up.

If you're learning JavaScript — build something. Even Tic Tac Toe can teach you a lot.

---

Thanks for reading! Feel free to leave feedback or fork the repo if you want to expand this game with your own ideas!