A modern, intelligent task management application that combines traditional to-do functionality with AI-powered task planning capabilities.
- Add Main Tasks - Create primary tasks with a simple, intuitive interface
- Subtask Support - Break down main tasks into smaller, manageable subtasks
- Inline Editing - Edit task and subtask titles directly by clicking on them
- Completion Tracking - Mark tasks and subtasks as complete with checkboxes
- Smart Completion Logic - Automatically handle parent-child task completion relationships
- Task Deletion - Remove unwanted tasks and subtasks with confirmation dialogs
- Persistent Storage - All data is automatically saved and survives browser restarts
- "Plan for Me" - AI-generated subtasks for any main task
- Azure AI Integration - Powered by Azure AI Foundry models
- Intelligent Task Breakdown - Converts high-level tasks into actionable steps
- Smart Suggestions - AI provides 3-8 relevant subtasks per main task
- Settings Panel - Easy-to-use configuration interface
- API Key Management - Secure storage of Azure AI credentials
- Connection Testing - Verify AI setup before use
- Customizable Model Selection - Choose your preferred AI model
- Modern Design - Clean, gradient-based UI with smooth animations
- Responsive Layout - Works perfectly on desktop and mobile devices
- Intuitive Controls - Clear visual hierarchy and user-friendly interactions
- Real-time Updates - Instant feedback and state management
- Accessibility - Keyboard navigation and screen reader support
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Azure AI Foundry account (for AI features)
- API key and endpoint from Azure AI Foundry
-
Clone the repository
git clone https://github.com/raz08/todo.git cd todo -
Open the application
# Simply open index.html in your web browser # Or serve it using a local server: python -m http.server 8000 # Then visit: http://localhost:8000
-
Configure AI Features (Optional)
- Click the "⚙️ Settings" button in the top-right corner
- Enter your Azure AI endpoint URL
- Add your API key
- Specify your model name (e.g., "gpt-4")
- Test the connection and save
-
Adding Tasks
- Type your task in the input field at the top
- Press Enter or click "Add Task"
-
Managing Subtasks
- Click the "+ Sub" button next to any main task
- Enter subtask details and press Enter or click "Add"
-
Editing Tasks
- Click on any task or subtask text to edit it inline
- Press Enter to save changes
-
Completing Tasks
- Check the box next to any task to mark it complete
- Completing a main task marks all subtasks as complete
- Completing all subtasks automatically marks the main task as complete
-
Setup (First Time)
- Configure your Azure AI settings in the Settings panel
- Test the connection to ensure everything works
-
Using "Plan for Me"
- Click the purple "🪄 PlanForMe" button next to any main task
- Wait for AI to generate relevant subtasks
- Review and edit the generated subtasks as needed
todo/
├── index.html # Main HTML structure
├── style.css # Styling and responsive design
├── script.js # JavaScript functionality
└── README.md # Project documentation
- Semantic HTML5 structure
- Settings modal for AI configuration
- Accessible form elements and controls
- Modern gradient-based design
- Flexbox and Grid layouts for responsiveness
- Smooth animations and transitions
- Mobile-first responsive design
- ES6+ class-based architecture
- Local storage for data persistence
- Azure AI API integration
- Event-driven user interactions
- Local Storage: Tasks, settings, and user preferences
- Secure Credential Storage: API keys stored locally with basic security measures
- Auto-save: All changes are immediately persisted
-
Get Azure AI Credentials
- Sign up for Azure AI Foundry
- Create a new deployment
- Note your endpoint URL and API key
-
Configure the App
Endpoint: https://your-endpoint.cognitiveservices.azure.com API Key: your-api-key-here Model: gpt-4 (or your preferred model) -
Test Connection
- Use the built-in connection test feature
- Verify successful API communication
The app integrates with Azure AI Foundry using the OpenAI-compatible REST API:
// Example API call structure
POST /openai/deployments/{model}/chat/completions
Headers:
- Content-Type: application/json
- api-key: {your-api-key}
Body:
- messages: [{"role": "user", "content": "task description"}]
- max_tokens: 500
- temperature: 0.7- API Key Protection: Credentials stored in browser's local storage
- Input Sanitization: All user inputs are properly escaped
- Error Handling: Graceful handling of API failures
- No Server Storage: All data remains on the user's device
- Parent-child task completion logic
- Automatic status updates based on subtask completion
- Intelligent task dependency management
- Context-aware subtask generation
- Natural language processing for task breakdown
- Fallback parsing for various AI response formats
- Loading states and progress indicators
- Confirmation dialogs for destructive actions
- Keyboard shortcuts and accessibility features
# No build process required - pure HTML/CSS/JS
# Simply edit files and refresh the browser
# For local server (recommended):
python -m http.server 8000
# or
npx serve .
# or
php -S localhost:8000- ES6+ JavaScript with modern syntax
- Semantic HTML5 elements
- CSS custom properties for theming
- Mobile-first responsive design
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
raz08
- GitHub: @raz08
- Email: [email protected]
- Azure AI Foundry for AI capabilities
- Modern web standards for clean, accessible design
- The open-source community for inspiration and best practices
Made with ❤️ and 🤖 by raz08
Transform your productivity with AI-powered task planning!