# todolist

**Repository Path**: jasoncodes/todolist

## Basic Information

- **Project Name**: todolist
- **Description**: todolist app
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-30
- **Last Updated**: 2025-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Fashion Todo - Elegant Task Management

A beautiful, feature-rich todo list web application with modern design and advanced functionality.

## Features

### 🎨 Fashionable Design
- Modern gradient backgrounds and glassmorphism effects
- Smooth animations and transitions
- Responsive design for all devices
- Beautiful typography with Inter font
- Intuitive user interface with visual feedback

### 📋 Advanced Task Management
- **Categories**: Organize tasks by Work, Personal, Shopping, Health, Hobby
- **Priority Levels**: Low, Medium, High, Urgent (with visual indicators)
- **Due Dates**: Set deadlines with overdue warnings
- **Tags**: Add custom tags for better organization
- **Notes**: Attach additional details to tasks
- **Rich Editing**: Full-featured task editing modal

### 🔍 Powerful Filtering & Search
- **Real-time Search**: Search across titles, categories, tags, and notes
- **Smart Filtering**: Filter by status (All, Pending, Completed)
- **Category Filtering**: View tasks by specific categories
- **Multiple Sorting**: Sort by date, priority, category, or alphabetically

### ✨ Advanced Features
- **Drag & Drop**: Reorder tasks with intuitive drag and drop
- **Local Storage**: Automatic saving and persistence
- **Statistics**: Live counters for total and completed tasks
- **Export**: Download tasks as JSON for backup
- **Keyboard Shortcuts**: Ctrl/Cmd + Enter to focus task input
- **Auto-refresh**: Updates overdue status automatically

### 📱 User Experience
- **Responsive**: Works perfectly on desktop, tablet, and mobile
- **Accessibility**: Proper ARIA labels and keyboard navigation
- **Visual Feedback**: Hover effects, animations, and state changes
- **Empty States**: Helpful messages when no tasks are present
- **Confirmation Dialogs**: Prevent accidental deletions

## Getting Started

### Option 1: Direct Usage
1. Open `index.html` in your web browser
2. Start adding tasks and enjoy!

### Option 2: Development Server
1. Install dependencies:
   ```bash
   npm install
   ```

2. Start development server:
   ```bash
   npm run dev
   ```

3. Open http://localhost:3000 in your browser

### Option 3: Static Server
```bash
npm start
```

## Usage

### Adding Tasks
1. Enter your task in the main input field
2. Select category and priority
3. Optionally set due date and tags
4. Click "Add Task" or press Enter

### Managing Tasks
- **Complete**: Click the checkbox next to any task
- **Edit**: Click the edit icon to open the detailed editor
- **Delete**: Click the trash icon (with confirmation)
- **Reorder**: Drag and drop tasks to reorganize

### Filtering & Organization
- Use the search bar to find specific tasks
- Filter by status using All/Pending/Completed buttons
- Select specific categories from the dropdown
- Sort tasks by different criteria

### Advanced Actions
- **Clear Completed**: Remove all finished tasks at once
- **Export Data**: Download your tasks as a JSON file
- **Keyboard Shortcuts**: Use Ctrl+Enter to quickly add new tasks

## Technical Details

### Technologies Used
- **HTML5**: Semantic markup with accessibility features
- **CSS3**: Modern styling with CSS Grid, Flexbox, and animations
- **Vanilla JavaScript**: ES6+ features, classes, and modules
- **Local Storage**: Browser-based data persistence
- **Font Awesome**: Beautiful icons throughout the interface
- **Google Fonts**: Inter typography for excellent readability

### Browser Support
- Chrome/Chromium (recommended)
- Firefox
- Safari
- Edge

### Performance Features
- Efficient DOM rendering with minimal reflows
- Debounced search for smooth typing experience
- CSS transitions and transforms for smooth animations
- Local storage for instant app loading

## Customization

The app uses CSS custom properties (variables) for easy theming. You can modify colors, spacing, and other design tokens in the `:root` section of `styles.css`.

## Data Export/Import

Tasks are automatically saved to browser localStorage. Use the export button to download a backup of your data as JSON. The exported file includes:
- All tasks with complete metadata
- Export timestamp
- Task statistics

## Contributing

This is a standalone web application. Feel free to fork and customize for your needs!

## License

MIT License - feel free to use this project for personal or commercial purposes.