Simple Todo App

A clean, functional todo application built with pure HTML, CSS, and JavaScript. No complex databases or frameworks - just simple, working code.

Features

✅ Core Functionality

• Add todos with priority levels (Low, Medium, High)
• Mark todos as complete/incomplete
• Edit existing todos
• Delete individual todos
• Filter todos (All, Active, Completed)

🎨 Clean Design

• Modern gradient background
• Responsive layout for all devices
• Visual priority indicators
• Smooth animations and transitions
• Intuitive user interface

💾 Data Management

• LocalStorage for data persistence
• No external dependencies
• Export/Import ready (via browser tools)
• Statistics tracking

📊 Statistics

• Total todos count
• Completed todos count
• Progress percentage
• Real-time updates

How to Use

1. Add a Todo

   • Type your todo in the input field
   • Select priority (Low, Medium, High)
   • Click "Add Todo" or press Enter

2. Manage Todos

   • Complete: Click the checkbox
   • Edit: Click the edit button (pencil icon)
   • Delete: Click the delete button (trash icon)
   • Filter: Use the filter buttons to view specific todos

3. Data Management

   • Clear Completed: Remove all completed todos
   • Clear All: Remove all todos (use with caution!)

Technical Details

File Structure

Permalist-Enhanced/
├── simple-index.html     # Main HTML file
├── simple-style.css     # Stylesheet
├── simple-app.js       # JavaScript logic
└── simple-README.md    # This file

Technology Stack

• HTML5: Semantic markup
• CSS3: Modern styling with gradients and animations
• JavaScript (ES6+): Class-based architecture
• LocalStorage: Client-side data persistence
• Font Awesome: Icons
• Google Fonts: Typography (Poppins)

Key Features

• No Dependencies: Pure vanilla JavaScript
• Responsive Design: Works on mobile, tablet, and desktop
• Accessible: Semantic HTML and keyboard navigation
• Performance: Fast and lightweight

Browser Compatibility

Works in all modern browsers:

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

Deployment

Option 1: Local Use

Simply open simple-index.html in your browser.

Option 2: GitHub Pages

1. Upload files to a GitHub repository
2. Go to Settings → Pages
3. Select "Deploy from a branch"
4. Choose main branch and save
5. Your app will be available at https://username.github.io/repo/simple-index.html

Learning Points

This project demonstrates:

1. DOM Manipulation: Creating, updating, and deleting elements
2. Event Handling: User interactions and form submissions
3. LocalStorage: Client-side data persistence
4. CSS Layout: Flexbox and responsive design
5. JavaScript Classes: Object-oriented programming

Customization

Feel free to modify:

• Colors in simple-style.css
• Add new features in simple-app.js
• Change layout in simple-index.html

License

Free to use for personal and educational purposes.

---

Simple, Clean, Functional - A Todo App That Just Works! ✅