My To Do App

A simple, elegant to-do list application built with HTML, CSS, and JavaScript that includes AI-powered task planning and persists data in the browser's local storage.

Features

✅ Add Main Tasks: Create primary tasks with a simple input field
✅ Subtasks Support: Add unlimited subtasks under each main task
✅ AI-Powered Planning: Use "PlanForMe" to automatically generate subtasks with AI
✅ Edit Tasks: Click on any task or subtask title to edit it inline
✅ Mark Complete: Check/uncheck boxes to mark tasks as complete
✅ Delete Tasks: Remove unwanted tasks and subtasks with the cross button
✅ Auto-Save: All changes are automatically saved to browser storage
✅ Persistent Data: Tasks remain intact even after browser refresh or restart
✅ Settings Panel: Configure AI integration with secure credential storage
✅ Responsive Design: Works perfectly on desktop and mobile devices

New AI Features

🪄 PlanForMe Button

• Purple "PlanForMe" button with magic wand icon appears next to each main task
• One-click AI planning: Automatically generates 3-7 relevant subtasks
• Smart suggestions: AI analyzes your main task and creates actionable steps
• Seamless integration: Generated subtasks appear instantly in your task list

⚙️ Settings Panel

• Secure configuration: Set up your Azure AI credentials safely
• API endpoint configuration: Enter your Azure OpenAI endpoint
• Model deployment: Specify your deployed model name
• Test connection: Verify your AI setup before using PlanForMe
• Encrypted storage: Credentials stored securely in browser storage

How to Use

Getting Started

1. Open index.html in your web browser
2. You'll see the heading "My To Do App" with a settings button and input field

Setting Up AI Integration

1. Click the "⚙️ Settings" button in the top right
2. Enter your Azure OpenAI endpoint (e.g., https://your-resource.openai.azure.com/)
3. Enter your API key from Azure
4. Enter your model deployment name (e.g., gpt-35-turbo or gpt-4)
5. Click "🔗 Test Connection" to verify your setup
6. Click "💾 Save Settings" to store your configuration

Using PlanForMe

1. Add a main task (e.g., "Plan a birthday party")
2. Click the "🪄 PlanForMe" button next to the task
3. Wait for the AI to analyze and generate subtasks
4. Review and edit the generated subtasks as needed
5. Mark subtasks complete as you work through them

Adding Tasks

1. Type your task in the input field at the top
2. Click "Add Task" button or press Enter
3. Your task will appear in the list below

Working with Subtasks

1. Click the "+ Subtask" button next to any main task
2. Type your subtask title and press Enter or click away to save
3. Subtasks appear indented under their parent task

Editing Tasks

1. Click on any task or subtask title
2. Edit the text directly
3. Press Enter or click away to save changes

Marking Tasks Complete

1. Click the checkbox next to any task or subtask
2. Completed items will have a strikethrough effect and reduced opacity
3. Click again to mark as incomplete

Deleting Tasks

1. Click the "×" button next to any task or subtask
2. Confirm the deletion when prompted
3. Main tasks will delete all their subtasks too

Data Persistence

• All changes are automatically saved to your browser's local storage
• Your tasks will persist even if you:
  • Refresh the page
  • Close and reopen the browser
  • Restart your computer

Files Structure

todoAI/
│
├── index.html      # Main HTML structure
├── styles.css      # Styling and responsive design
├── script.js       # JavaScript functionality and data management
└── README.md       # This file

Technical Details

• HTML5: Semantic markup for accessibility
• CSS3: Modern styling with gradients, animations, and responsive design
• Vanilla JavaScript: No external dependencies
• Local Storage: Browser-based data persistence
• Azure OpenAI Integration: AI-powered task planning
• Secure Credential Storage: API keys stored safely in browser
• Responsive: Mobile-friendly design that adapts to different screen sizes

Azure AI Setup Requirements

To use the PlanForMe feature, you'll need:

1. Azure OpenAI Service: An active Azure subscription with OpenAI service
2. Deployed Model: A deployed GPT-3.5-turbo or GPT-4 model
3. API Credentials: Your endpoint URL and API key
4. CORS Configuration: Ensure your Azure endpoint allows browser requests

Azure OpenAI Configuration Steps:

1. Create an Azure OpenAI resource in the Azure portal
2. Deploy a chat model (gpt-35-turbo recommended)
3. Note your endpoint URL and API key from the resource overview
4. Configure CORS to allow requests from your domain (or * for testing)

Security Notes

• API keys are stored locally in your browser's localStorage
• No server storage: Your credentials never leave your device
• HTTPS recommended: Use HTTPS in production for secure API calls
• Key rotation: Regularly rotate your Azure API keys for security

Browser Compatibility

This app works in all modern browsers that support:

• Local Storage API
• ES6 Classes
• CSS Grid and Flexbox

Customization

The app uses CSS custom properties and is easy to customize:

• Change colors in the CSS file
• Modify the gradient backgrounds
• Adjust spacing and typography
• Add new animations or transitions

Enjoy organizing your tasks! 🚀