🎮 JS Basic Projects

A hands-on collection of interactive JavaScript mini-projects built with pure Vanilla JS.

---

📂 Projects

#	Project	Description	Concepts Practiced
1	🎨 Color the Boxes	Interactive grid where clicking randomizes box colors	DOM manipulation, Event delegation, Math.random()
2	🃏 Card Maker	Dynamic card generator with custom content	Template rendering, Form handling, Dynamic DOM creation
3	✊ Rock Paper Scissors	Classic RPS game against the computer	Game logic, Conditional rendering, Score tracking
4	❌ Tic Tac Toe	Two-player Tic Tac Toe with win detection	2D game state, Win condition algorithms, Turn management
5	❌ Tic Tac Toe v2	Enhanced version with improved UI and features	Refactoring, UX improvements, Animation
6	📝 To Do List	Full CRUD task manager with local persistence	localStorage, CRUD operations, List rendering

---

🚀 Getting Started

No build tools, no dependencies — just open and play:

# Clone the repository
git clone https://github.com/Deep-0208/js-basic-projects.git

# Navigate to any project folder
cd JS-BASIC-PROJECTS/ROCK\ PAPER\ SCISSORS

# Open in browser
open index.html
# or simply double-click the index.html file

---

🏗️ Project Structure

JS-BASIC-PROJECTS/
├── COLOR THE BOXES/        # Color randomizer grid
│   ├── index.html
│   ├── style.css
│   └── app.js
├── Card-Maker/             # Dynamic card generator
├── ROCK PAPER SCISSORS/    # Classic RPS game
├── TIC TAC TOI/            # Tic Tac Toe v1
├── TIC TAC TOI VERSION 2/  # Tic Tac Toe v2 (enhanced)
└── TO DO LIST/             # Task manager with localStorage

Each project is self-contained — its own index.html, style.css, and app.js. No shared dependencies.

---

🧠 What I Learned

• DOM Manipulation — querySelector, createElement, event listeners, and dynamic rendering
• Game State Management — Turn tracking, win detection algorithms, and score persistence
• Browser APIs — localStorage for data persistence, Math.random() for randomization
• CSS Fundamentals — Flexbox/Grid layouts, transitions, and responsive design
• Clean Code Patterns — Separation of concerns, modular functions, and DRY principles

---

📄 License

Open source — feel free to fork and build on top of these projects.

---

Built by Deep Panchal