Skip to content

Commit 3abdca0

Browse files
authored
docs: add README for project
what: - updated project title - added detailed project description, features, and instructions
1 parent 267d4c5 commit 3abdca0

1 file changed

Lines changed: 111 additions & 1 deletion

File tree

README.md

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,111 @@
1-
# templates-solo-default
1+
# fullstackjs-tic-tac-toe
2+
3+
A browser-based **Tic Tac Toe** game built with vanilla JavaScript as part of
4+
**The Odin Project – JavaScript Course (Full Stack JavaScript Path)**.
5+
6+
This project focuses on organizing JavaScript code using **factory functions** and the **module pattern (IIFE)** while maintaining a clean separation between game logic and DOM manipulation.
7+
8+
---
9+
10+
## 🚀 Live Demo
11+
12+
👉 https://top-submissions.github.io/fullstackjs-tic-tac-toe/
13+
14+
---
15+
16+
## 🧠 About the Project
17+
18+
This is a two-player Tic Tac Toe game playable in the browser.
19+
Players can enter custom names, play multiple rounds, track wins and ties, restart games, and reset scores.
20+
21+
The project was built to practice:
22+
- Modular JavaScript architecture
23+
- Avoiding global variables
24+
- Managing application state
25+
- DOM interaction without frameworks
26+
27+
---
28+
29+
## ✨ Features
30+
31+
- Two-player Tic Tac Toe (X vs O)
32+
- Custom player name input
33+
- Win detection (rows, columns, diagonals)
34+
- Tie detection
35+
- Scoreboard tracking wins and ties
36+
- Restart game without resetting scores
37+
- Reset scores button
38+
- Winning combination highlighting
39+
- Responsive and modern UI
40+
- GitHub Pages deployment
41+
42+
---
43+
44+
## 🛠 Built With
45+
46+
- HTML5
47+
- CSS3
48+
- JavaScript (ES6)
49+
- Factory Functions
50+
- Module Pattern (IIFE)
51+
- DOM Manipulation
52+
- GitHub Pages
53+
54+
---
55+
56+
## 🎮 How to Play
57+
58+
1. Enter player names (optional).
59+
2. Click **Start Game**.
60+
3. Players take turns clicking empty cells.
61+
4. First player to align three markers wins.
62+
5. A tie is declared if the board fills with no winner.
63+
6. Use **Restart Game** to play again.
64+
7. Use **Reset Scores** to clear the scoreboard.
65+
66+
---
67+
68+
## 🧩 JavaScript Architecture
69+
70+
The game is organized into clear modules:
71+
72+
* **GameBoard Module**
73+
Manages the board state and win/tie detection.
74+
75+
* **Player Factory**
76+
Creates player objects with name, marker, and score.
77+
78+
* **GameController Module**
79+
Controls game flow, turn switching, scoring, and win logic.
80+
81+
* **DisplayController Module**
82+
Handles DOM rendering, UI updates, and user interaction.
83+
84+
This structure follows best practices taught in **The Odin Project**.
85+
86+
---
87+
88+
## 📚 What I Learned
89+
90+
* Structuring JavaScript projects using modules
91+
* Separating logic from presentation
92+
* Managing state without frameworks
93+
* Writing maintainable, readable code
94+
* Using GitHub Actions and GitHub Pages
95+
96+
---
97+
98+
## 🔮 Possible Improvements
99+
100+
* Single-player mode with AI
101+
* Difficulty selection
102+
* Persistent scores using `localStorage`
103+
* Sound effects and animations
104+
* Mobile-first UI refinements
105+
106+
---
107+
108+
## 👤 Author
109+
110+
**MatimotTheTimoters**
111+
GitHub: [https://github.com/Chonky_Seal](https://github.com/Chonky_Seal)

0 commit comments

Comments
 (0)