ToDoListApp

ToDoListApp is a simple, user-friendly task management application designed to help you organize and prioritize your daily tasks. This project was developed as a practice exercise in JavaScript to enhance DOM manipulation skills. Users can create various to-do lists, add tasks, reorder them via drag-and-drop, and persist data using local storage, ensuring tasks are saved across sessions.

Key features include the ability to customize list names and colors, edit and delete tasks, and mark tasks as complete, all within an intuitive and clean interface. Whether you have essential tasks or just a few things you might do, ToDoListApp makes managing your tasks straightforward and efficient.

Features

• Persistent Data: Tasks and lists are saved in local storage for persistence across sessions.
• Create Multiple Lists: Users can create various to-do lists to categorize and manage tasks.
• Edit lists name and color: Customize list names and colors to better organize and differentiate between lists.
• Add and Edit Tasks: Easily add tasks to any list, edit task names, and reorder tasks via drag-and-drop.
• Task Management: Mark tasks as complete, delete tasks, and ensure tasks are saved across sessions using local storage.
• Drag and Drop: Reorder tasks within a list using drag and drop functionality.
• Responsive Design: The application is designed to be fully responsive, providing a seamless user experience on both desktop and mobile devices.

Getting Started

Prerequisites

To run this project locally, you need a web browser and an internet connection.

Installation

1. Clone the repository:

   git clone https://github.com/hend-essam/ToDoListApp.git

2. Navigate to the project directory:

   cd ToDoListApp

3. Open index.html in your web browser to view the application.

Usage

1. Set Date: Use the date picker to set the date for your tasks.
2. Add a new list: Click on the + button, enter a name, and select a color for the list.
3. Edit list name: Click the pencil icon next to the list name to edit it.
4. Edit list color: Click the palette icon to choose a new color for the list.
5. Delete a list: Click the trash icon to delete the list.
6. Add tasks: Click on the + button within a list to add tasks. Enter the task name and press the check icon to save.
7. Edit task name: Click on the task name to edit it. Press the check icon to save changes.
8. Delete a task: Click on the x icon next to a task to delete it.
9. Complete a task: Click on the checkbox next to a task to mark it as complete.
10. Drag and Drop: Reorder tasks within a list by dragging and dropping them to the desired position.

Technologies Used

• HTML
• CSS
• JavaScript

Acknowledgments

• Bootstrap Icons: Bootstrap Icons