ToDo-List 📝

The "React Todo List with Local Storage" project is a web-based task management application developed using React, designed to empower users to organize their tasks effectively while utilizing local storage for data persistence.

Live Demo

You can see the To-Do List App in action at To-Do List App.

Features ✨

• Add, filter, sort and remove tasks
• Mark tasks as complete
• Persist tasks using local storage
• User-friendly interface

Getting Started 🚀

To get a local copy up and running on your machine, follow these simple steps:

Prerequisites

Ensure you have the following installed on your computer:

• Git
• Node.js
• npm (usually comes with Node.js)

Installation ⚙️

1. Clone the repository:

git clone https://github.com/your-username/ToDo-List.git

cd ToDo-List

2. Install the necessary packages:

npm install

3. Start the development server:

npm start

The app should now be running on http://localhost:3000.

Testing Guidance 📝

1. Adding a Task: Type the task you want to add into the input field. Press Enter or click the "Add" button.

2. Sorting a Task: The following steps are:

   i). Ascending Sorting:

   • Add multiple tasks with different text or timestamps.
   • Click on the sorting button/icon to trigger ascending sorting.
   • Verify that tasks are sorted alphabetically or chronologically from oldest to newest.

   ii). Descending Sorting:

   • Add multiple tasks with different text or timestamps.
   • Click on the sorting button/icon to trigger descending sorting.
   • Verify that tasks are sorted alphabetically or chronologically from newest to oldest.

3. Filtering a Task:

   • Add a mix of completed and incomplete tasks.
   • Click on the filter button/icon to toggle filtering.
   • Verify that only completed or incomplete tasks are displayed based on the filter state.

4. Removing a Task: Completed tasks can be remove individually by clicking the remove button next to each task or all at once by clicking the "Clear All" button.

5. Marking a Task as Completed: Click on the checkbox icon next to a task to mark it as completed. The task will be visually struck through to indicate its completion.

6. Local Storage: Your tasks will be automatically saved to local storage. This means you can close and reopen the app at any time without losing your data.

Built With

• React - The web framework used to build the To-Do List App.
• Netlify - For hosting the application.

Contributing 🤝

Contributions are welcome! If you'd like to contribute to this project, 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 AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License 📜

Distribute, modify, or use this project under the terms of the MIT License.

Authors

• @charag678

---

Thank you for using the ToDo List App. We hope it helps you stay organized and productive!