My To Do App

A beautiful, feature-rich to-do list application with AI-powered task planning, progress tracking, and celebration animations.

🎉 Features

• ✅ Add Tasks: Create main tasks with a simple text input
• ✅ Add Subtasks: Add smaller, related subtasks under any main task
• 🪄 AI Planning: Get AI-generated subtasks for any main task using Azure AI
• ✅ Edit Tasks: Click on any task or subtask title to edit it inline
• ✅ Mark Complete: Check/uncheck boxes to mark tasks and subtasks as complete
• 🎊 Confetti Celebration: Enjoy a burst of confetti when completing tasks!
• 📊 Progress Tracking: See completion percentage for tasks with subtasks
• ✅ Delete Tasks: Remove unwanted tasks and subtasks with the delete button (✕)
• ✅ Persistent Storage: All changes are automatically saved to localStorage
• 🌙 Dark/Light Theme: Toggle between beautiful light and dark themes
• 🎨 Beautiful Design: Aesthetic background with smooth animations
• ✅ Responsive Design: Works perfectly on desktop and mobile devices
• ⚙️ AI Settings: Secure configuration for Azure AI integration

🎨 New UI Enhancements

🎊 Confetti Animation

• Celebrates task completion with a beautiful 2-second confetti burst
• Triggers when marking any task or subtask as complete
• Colorful, random confetti pieces with smooth falling animation

📊 Progress Tracking

• Shows completion percentage for tasks that have subtasks
• Visual progress bar with smooth animations
• Real-time updates as you complete subtasks
• Format: "X/Y subtasks (Z%)"

🌙 Theme Toggle

• Beautiful dark and light theme options
• Smooth transitions between themes
• Persistent theme preference saved to localStorage
• Toggle button (🌙/☀️) positioned next to settings

🎨 Enhanced Background

• Aesthetic gradient background with subtle texture overlay
• Different backgrounds for light and dark themes
• Fixed background that doesn't scroll with content

🪄 AI-Powered "Plan for Me" Feature

The app includes an innovative AI feature that helps break down your main tasks into actionable subtasks:

1. Setup: Click the Settings (⚙️) button to configure your Azure AI credentials
2. Configure: Enter your Azure AI Foundry endpoint, API key, and model name
3. Test: Use the "Test Connection" button to verify your setup
4. Use: Click the purple "🪄 Plan for Me" button next to any main task
5. Enjoy: Watch as AI automatically generates relevant subtasks for you!

AI Settings Requirements

• Azure AI Endpoint: Your Azure AI Foundry endpoint URL
• API Key: Your Azure AI API key
• Model Name: The deployment name (e.g., "gpt-4")

The AI credentials are stored securely in your browser's localStorage with basic encryption.

🚀 How to Use

1. Open the App: Open index.html in your web browser
2. Choose Theme: Click the theme toggle (🌙/☀️) for your preferred appearance
3. Configure AI (optional): Click Settings to set up AI integration
4. Add a Task: Type in the text box and click "Add Task" or press Enter
5. Get AI Help: Click "🪄 Plan for Me" to generate subtasks automatically
6. Add Manual Subtasks: Click the "+ Subtask" button on any task
7. Track Progress: Watch the progress bar fill as you complete subtasks
8. Edit Tasks: Click on any task or subtask title to edit it
9. Mark Complete: Click checkboxes to mark items complete and enjoy confetti! 🎊
10. Delete Items: Click the red ✕ button to delete tasks or subtasks

File Structure

ToDo/
├── index.html      # Main HTML file
├── styles.css      # CSS styling
├── script.js       # JavaScript functionality
└── README.md       # This file

Technical Details

• Storage: Uses localStorage for persistent data storage
• Responsive: Mobile-friendly design with CSS media queries
• Accessible: Proper semantic HTML and keyboard navigation
• Modern: Clean, gradient-based design with smooth animations

Browser Compatibility

This app works in all modern browsers that support:

• localStorage
• ES6 JavaScript features
• CSS Flexbox and Grid

Getting Started

Simply open index.html in your web browser. No installation or server setup required!

Your tasks will be automatically saved and restored when you revisit the page.