This Todo app allows users to manage their tasks efficiently. Users can add, complete, and delete todos, filter them based on status, toggle between light and dark modes, and more.
- View the optimal layout for the app depending on their device's screen size
- Hover states for all interactive elements on the page
- Add new todos to the list
- Mark todos as complete
- Delete todos from the list
- Filter by all/active/complete todos
- Clear all completed todos
- Toggle light and dark mode
- Bonus: Drag and drop to reorder items on the list
- Clone the repository:
git clone https://github.com/your-username/todo-app.git - Navigate to the project directory:
cd todo-app - Open
index.htmlin your preferred web browser.
- Add a new todo by typing it in the input field and pressing Enter.
- Mark a todo as complete by clicking on it.
- Delete a todo by clicking on the delete icon next to it.
- Use the filter options to view all/active/completed todos.
- Clear all completed todos by clicking on the "Clear Completed" button.
- Toggle between light and dark mode by clicking on the sun/moon icon.
- Bonus: Drag and drop todos to reorder them.
- React Js
- Reach Hook Form
- React Hot Toast
- uuid
- Visual Studio Code
- Tailwind Css
This project was inspired by [design source/name], and icons were provided by [icon source/name].
This project is licensed under the [License Name] License - see the LICENSE.md file for details.
Feel free to customize it based on your project's details and structure.