Todo App is a web application that allows users to manage their tasks and todos. Users can add tasks, mark tasks as complete, delete tasks, and change the view mode of the task list.
- Clone the repository to your local machine.
- Install the required dependencies by running the command
npm install
. - Start the development server using the command
npm start
.
To use the Todo App:
- Open the application in your web browser.
- Register for a new account or log in with your existing credentials.
- Once logged in, you will be redirected to the task management dashboard.
- Add new tasks by filling in the task details and clicking the "Add Task" button.
- To mark a task as complete, click the checkbox next to the task.
- To delete a task, click the delete button associated with the task.
- Use the view mode toggle to switch between different task list display modes.
- Description: Allows users to add a new task to their task list.
- Usage: Fill in the task details (title, description, etc.) and click the "Add Task" button.
- Code: The
addTask
function inpath/to/taskSlice.js
handles adding a task. It updates the state by appending the new task to the existing list of tasks.
- Description: Enables users to mark a task as complete.
- Usage: Click the checkbox next to the task to mark it as complete.
- Code: The
completeTask
function inpath/to/taskSlice.js
is responsible for marking a task as complete. It updates thecompleted
property of the selected task totrue
, indicating that the task is completed.
- Description: Allows users to delete a task from their task list.
- Usage: Click the delete button associated with the task to remove it.
- Code: The
deleteTask
function inpath/to/taskSlice.js
handles the deletion of a task. It filters out the selected task from the list of tasks, effectively removing it from the state.
- Description: Enables users to switch between different task list display modes.
- Usage: Use the view mode toggle to select the desired view mode (e.g., list, grid, etc.).
- Code: The
changeViewMode
function inpath/to/taskSlice.js
updates theviewMode
property in the state, allowing the user interface to switch between different task list display modes.
- React
- React Bootstrap
- Redux
- Redux Toolkit
- React Router
- Redux Persist
Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request.
This project is licensed under the MIT License.