# 🚀 Todo App - Quick Start Guide

## Opening the App

1. Navigate to the `todo-app-simple` folder
2. Double-click `index.html` OR
3. Right-click `index.html` → Open with → Your browser

## First Steps

### Adding Your First Todo
1. Click in the "What needs to be done?" input box
2. Type your task (e.g., "Buy groceries")
3. Click "Add" or press Enter
4. Your todo appears in the list below!

### Adding Details
Before clicking "Add", you can also:
- **Description**: Add more details (optional)
- **Category**: Choose Personal 🏠, Work 💼, Shopping 🛒, or Health 💪
- **Priority**: Set Low 🟢, Medium 🟡, or High 🔴
- **Due Date**: Click the date picker to set a deadline

## Managing Todos

### Complete a Todo
- Click the checkbox (□) next to a todo
- It turns green with a ✓ and shows a strikethrough

### Select for Bulk Actions
- Click the circle icon (○) to select a todo
- Select multiple todos to perform actions on all of them
- A bar appears at the bottom with bulk options

### Delete a Todo
- Click the trash icon (🗙) to delete
- A confirmation dialog appears
- Click "Confirm" to delete permanently

## Filtering & Searching

### Filter by Status
- Click **All** to see everything
- Click **Active** to see incomplete tasks
- Click **Completed** to see finished tasks

### Search
- Type in the search box to find todos
- Searches through titles and descriptions
- Results update instantly as you type

### Sort
- **Sort by Date**: Newest first
- **Sort by Priority**: High → Medium → Low
- **Sort by Name**: Alphabetical order

## Statistics Dashboard

The top of the app shows:
- **Total**: How many todos you have
- **Active**: How many are incomplete
- **Completed**: How many are done
- **Rate**: Percentage completed

## Dark Mode

- Click the moon icon (🌙) in the top right
- Switches to dark theme (easier on eyes at night)
- Click the sun icon (☀️) to switch back to light mode
- Your preference is saved automatically

## Backup & Restore

### Export (Backup)
1. Click the download icon (📥) in the top right
2. A JSON file downloads to your computer
3. Keep this file safe as a backup

### Import (Restore)
1. Click the upload icon (📤) in the top right
2. Select your backup JSON file
3. Confirm to add todos to your list

## Keyboard Shortcuts

Press these keys to work faster:

| Key | What it Does |
|-----|--------------|
| `N` | Focus on the "Add todo" input |
| `/` | Focus on the search box |
| `Escape` | Close dialog / Clear selection |
| `?` | Show keyboard shortcuts hint |

## Tips & Tricks

### Speed Up Adding Todos
- Type and press Enter (no need to click "Add")
- Press `N` to focus the input from anywhere
- Leave description, category, etc. blank if not needed

### Organize with Categories
- Use different categories for different life areas
- Filter by category to focus on one area
- Color-coded badges make it easy to scan

### Use Priorities Wisely
- Set High priority for urgent tasks
- Set Low priority for "nice to have" tasks
- Sort by priority to tackle important stuff first

### Due Dates
- Set due dates for time-sensitive tasks
- Overdue tasks show in red with "(Overdue)"
- "Today" and "Tomorrow" shown as friendly text

### Bulk Operations
- Select multiple todos with the circle icon
- Use "Complete" to mark all as done
- Use "Delete" to remove all at once
- Press "Cancel" or Escape to clear selection

## Understanding the UI

### Todo Item Layout
```
[✓] [Title]                    [○] [🗙]
    [Description]
    [🏠 Personal] [🟡 MEDIUM] [📅 Today]
```

- **Left checkbox**: Mark complete/incomplete
- **Middle**: Title, description, badges
- **Right circle**: Select for bulk actions
- **Right trash**: Delete

### Color Meanings
- **Green (🟢)**: Low priority
- **Yellow (🟡)**: Medium priority
- **Red (🔴)**: High priority
- **Red date**: Overdue task

## Common Tasks

### Daily Workflow
1. Check "Active" filter to see what's pending
2. Sort by "Priority" to tackle important stuff first
3. Complete tasks as you finish them
4. Review "Completed" at end of day

### Weekly Review
1. Check "All" to see everything
2. Export your data as backup
3. Delete completed tasks you don't need
4. Add new tasks for the week ahead

### Project Planning
1. Create tasks for each project step
2. Set due dates for deadlines
3. Use categories to group by project
4. Set priorities to focus on critical path

## Troubleshooting

### Todos Not Saving
- Check if browser is in private/incognito mode
- Make sure you have storage space available
- Try exporting as backup immediately

### App Not Loading
- Make sure you opened `index.html`
- Try a different browser (Chrome, Firefox, Safari, Edge)
- Check JavaScript is enabled in browser settings

### Lost Data
- If you exported before, import your backup
- Check browser cache/storage settings
- Data is stored locally - clearing browser data deletes it

## Best Practices

### Keep It Organized
- Use categories consistently
- Set appropriate priorities
- Add due dates for time-sensitive tasks
- Clean up completed tasks regularly

### Regular Backups
- Export your todos weekly
- Keep multiple backup files
- Name backups with dates (e.g., `todos-2025-01-11.json`)

### Productivity Tips
- Start with high-priority tasks
- Break large tasks into smaller ones
- Set realistic due dates
- Review and update daily

## Getting Help

### Keyboard Shortcut Reminder
- Press `?` anytime to see shortcuts
- A toast notification appears at the top

### Error Messages
- Red toast: Error occurred
- Green toast: Success
- Yellow toast: Warning

### Storage Full Warning
- Export your data immediately
- Delete old completed tasks
- Clear browser data if needed

---

**Happy Todo-ing! 📝✨**

This app is designed to be simple, fast, and help you stay organized.
Focus on your tasks, not the app!