📝 Modular Task Manager

A clean, modular task management application built with vanilla JavaScript, featuring localStorage persistence and a beautiful UI.

🌟 Features

• ✅ Add, edit, delete, and toggle tasks
• 🔍 Filter tasks (All, Active, Completed)
• 💾 Automatic persistence to localStorage
• ✏️ Double-click to edit tasks
• 📱 Responsive design
• 🎨 Modern, gradient UI
• 🔒 XSS protection with HTML escaping

📁 Project Structure

task-manager/
├── index.html          # Main HTML file
├── styles.css          # Application styles
├── src/
│   ├── app.js         # Main application controller
│   ├── Task.js        # Task entity class
│   ├── store.js       # LocalStorage persistence
│   ├── view.js        # Rendering logic
│   └── utils.js       # Utility functions
├── Dockerfile         # Docker configuration
├── docker-compose.yml # Docker Compose setup
└── .dockerignore      # Docker ignore file

🚀 Getting Started

Option 1: Run Locally (No Server Needed)

Simply open index.html in a modern browser. The app uses ES6 modules but doesn't require a build step.

Option 2: Run with Docker

Prerequisites

• Docker installed
• Docker Compose installed (comes with Docker Desktop)

Build and Run

1. Clone or download the project

   cd task-manager

2. Build the Docker image

   docker build -t task-manager .

3. Run the container

   docker run -d -p 8080:80 --name task-manager-app task-manager

4. Open in browser

   http://localhost:8080
   

Using Docker Compose (Recommended)

1. Start the application

   docker-compose up -d

2. View logs

   docker-compose logs -f

3. Stop the application

   docker-compose down

4. Rebuild after changes

   docker-compose up -d --build

🐳 Docker Commands Cheat Sheet

Basic Commands

# List running containers
docker ps

# List all containers
docker ps -a

# Stop container
docker stop task-manager-app

# Start container
docker start task-manager-app

# Remove container
docker rm task-manager-app

# View logs
docker logs task-manager-app

# Execute command in container
docker exec -it task-manager-app sh

Image Management

# List images
docker images

# Remove image
docker rmi task-manager

# Build with no cache
docker build --no-cache -t task-manager .

Docker Compose Commands

# Start services
docker-compose up -d

# Stop services
docker-compose down

# View logs
docker-compose logs

# Rebuild and start
docker-compose up -d --build

# Scale services (if needed)
docker-compose up -d --scale task-manager=3

📤 Deploying to GitHub

1. Initialize Git repository

   git init

2. Add all files

   git add .

3. Create .gitignore (optional)

   # OS files
   .DS_Store
   Thumbs.db
   
   # IDE
   .vscode/
   .idea/
   

4. Commit changes

   git commit -m "Initial commit: Modular task manager"

5. Create repository on GitHub

   • Go to https://github.com/new
   • Name it task-manager
   • Don't initialize with README

6. Push to GitHub

   git remote add origin https://github.com/npm-DevPatel/task-manager.git
   git branch -M main
   git push -u origin main

🔧 How It Works

Architecture

The application follows a modular architecture with clear separation of concerns:

1. Task.js - Entity layer

   • Defines Task class with validation
   • Enforces invariants (non-empty title)
   • Provides serialization methods

2. store.js - Persistence layer

   • Handles localStorage read/write
   • Converts between Task objects and JSON

3. view.js - Presentation layer

   • Renders HTML safely (XSS protection)
   • Updates UI counts and filters
   • No direct state manipulation

4. app.js - Controller layer

   • Coordinates between modules
   • Handles user events
   • Manages application state

5. utils.js - Utility layer

   • Provides helper functions
   • HTML escaping for security
   • Unique ID generation

Data Flow

User Action → app.js → Task methods → store.js → view.js → DOM

✨ Extend Ideas

1. Add Task Editing

   • Already implemented! Double-click any task to edit

2. Add TimedTask

   class TimedTask extends Task {
     constructor(title, dueDate, id, done) {
       super(title, id, done);
       this.dueDate = new Date(dueDate);
     }
     
     isOverdue() {
       return this.dueDate < new Date() && !this.done;
     }
   }

3. Add Search Filter

   • Add search input in HTML
   • Filter tasks by title in view.js
   • Show match count

4. Add Categories/Tags

   • Extend Task class with tags array
   • Add tag filter UI
   • Color-code by category

🧪 Verification

1. Open the app in a browser
2. Add several tasks
3. Toggle completion status
4. Filter by Active/Completed
5. Double-click to edit a task
6. Delete some tasks
7. Clear completed tasks
8. Refresh the page - tasks should persist!