📜 Task List Application

A feature-rich, persistent task list application with local storage, character counting, and intuitive task management.

🔗 Demo

Live Demo

✨ Features ✨

• Task Management:

  • Add new tasks with validation
  • Mark tasks as complete
  • Delete tasks
  • Edit tasks by double-clicking
  • Duplicate task prevention

• Persistent Storage:

  • Automatically saves tasks to browser's localStorage
  • Retrieves saved tasks on page reload

• User Experience:

  • Real-time character counter (1200 max)
  • Visual feedback when approaching character limit
  • Clean, responsive interface
  • Empty state handling

• Accessibility:

  • Semantic HTML structure
  • Keyboard-friendly controls
  • Clear visual feedback

🛠️ Technologies Used

• HTML5
• CSS3 (Flexbox)
• JavaScript (ES6)
• Font Awesome Icons
• Web Storage API

🚀 Installation & Usage

1. Clone the repository:

   git clone https://github.com/paulmagadi/task-list.git

2. Open in browser:

• Navigate to the project directory

• Open index.html in your preferred browser

Using the application:

1. Type your task in the input field (max 1200 characters)

2. Press Enter or click "Add" to submit

3. Click the checkbox to mark as complete

4. Click the trash icon to delete

5. Double-click any task to edit

📂 Code Structure

todo-list/
├── index.html          # Main HTML file
├── styles.css          # CSS styles
├── script.js           # JavaScript functionality
└── README.md           # Documentation

🎨 Customization

You can easily customize the app by modifying:

• Colors in styles.css

• Character limit in script.js (line 118)

• Icons by changing Font Awesome classes

• Layout by adjusting the CSS flex properties

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the project

2. Create your feature branch (git checkout -b feature/AmazingFeature)

3. Commit your changes (git commit -m 'Add some amazing feature')

4. Push to the branch (git push origin feature/AmazingFeature)

5. Open a Pull Request

📸 Screenshot

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Font Awesome for the beautiful icons

• Modern CSS techniques for responsive design

• MDN Web Docs for JavaScript references

🙋‍♂️ Author

Paul Magadi | paulmagadi

A simple project to practice JavaScript DOM manipulation, localStorage, CRUD, and UI design. Feel free to contribute!