Fun ToDo - Simple Web-based Todo Application

A clean, responsive todo application built with vanilla HTML, CSS, and JavaScript.

🎯 Features

Core Functionality

• ✅ Add New Todos - Create tasks with title, description, and due date/time
• 📝 Manage Todos - View active tasks, mark as complete, edit, and delete
• 📁 Archive System - Completed tasks move to archived section
• 🔍 Search & Filter - Search through your active and archived todos
• 📱 Responsive Design - Works seamlessly on desktop and mobile

Advanced Features

• 🔔 Browser Notifications - Get notified when tasks are completed or due soon
• ⏰ Due Date Reminders - Automatic notifications 10 minutes before due time
• 💾 Local Storage - All data persists in your browser
• ⌨️ Keyboard Shortcuts - Ctrl+N to add new todo, Escape to close modal
• 🎨 Modern UI - Clean, minimalistic design with smooth animations

🚀 Getting Started

1. Clone or download this repository
2. Open index.html in your web browser
3. Start adding your todos!

📋 Usage

Adding a Todo

1. Click the "Add Todo" button
2. Fill in the title (required)
3. Optionally add a description
4. Set a due date and time
5. Click "Save Todo"

Managing Todos

• Complete: Check the checkbox next to any todo
• Edit: Click the edit icon on any active todo
• Delete: Click the trash icon to remove a todo
• Search: Use the search bar to find specific todos

Notifications

• Allow notifications when prompted for the best experience
• You'll receive alerts when:
  • A todo is marked as completed
  • A todo is due within 10 minutes

🛠️ Technical Details

Built With

• HTML5 - Semantic markup and modern form elements
• CSS3 - Flexbox, Grid, animations, and responsive design
• Vanilla JavaScript - ES6+ features, local storage, notification API
• Service Worker - For better notification support and offline capabilities

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

Key Features Implementation

• Data Persistence: Uses localStorage to save todos across browser sessions
• Responsive Design: Mobile-first approach with breakpoints for tablets and desktop
• Notifications: Uses the Web Notifications API with fallback for unsupported browsers
• Form Validation: Client-side validation with real-time error messages
• Accessibility: Semantic HTML, proper ARIA labels, and keyboard navigation support

📁 File Structure

funtodo2/
├── index.html          # Main HTML file
├── styles.css          # All styling and responsive design
├── script.js           # Main application logic
├── sw.js              # Service worker for notifications
└── README.md          # This file

🎨 Design Philosophy

The application follows a clean, minimalistic design approach:

• Glass-morphism effects with backdrop blur and transparency
• Smooth animations for better user experience
• Intuitive navigation with clear visual feedback
• Color-coded status indicators for overdue and due-soon tasks
• Mobile-first responsive design ensuring usability across all devices

🔧 Customization

You can easily customize the app by modifying:

• Colors: Update the CSS color variables in styles.css
• Fonts: Change the font-family in the CSS
• Notification timing: Modify the reminder time in script.js (currently 10 minutes)
• Storage: Replace localStorage with a backend API for multi-device sync

🚀 Future Enhancements

Potential features for future versions:

• User accounts and cloud sync
• Todo categories and tags
• Recurring todos
• Priority levels
• Team collaboration features
• Dark/light theme toggle
• Export/import functionality

📱 Mobile Experience

The app is optimized for mobile devices with:

• Touch-friendly buttons and inputs
• Responsive typography that scales with screen size
• Optimized modal dialogs for mobile screens
• Swipe gestures support (future enhancement)

🤝 Contributing

Feel free to fork this project and submit pull requests for any improvements!

📄 License

This project is open source and available under the MIT License.

---

Happy Todo-ing! 🎯