A Todo App built with React and TypeScript, designed to help users organize their tasks effectively. The app provides a simple and intuitive interface for adding, editing, and deleting tasks. With features like task completion status and filtering, users can manage their todos efficiently.
- Add Todos: Easily add new tasks with a descriptive title.
- Edit Todos: Update task details as needed to keep your list accurate.
- Delete Todos: Remove unnecessary tasks to declutter your list.
- Complete Todos: Mark tasks as completed to track your progress.
- Filter Todos: View todos based on their completion status (All, Active, Completed).
- Data Persistence: Todo list data is saved locally, allowing users to access their todos across sessions.
- React: JavaScript library for building user interfaces.
- TypeScript: Adds static typing to JavaScript, enhancing code quality and developer productivity.
- CSS/SCSS: Styling the app for a visually appealing user experience.
- LocalStorage API: Storing todo data locally in the browser.
- React Context API: Managing global state and providing data to components.
- Hooks: Leveraging useState, useEffect, and custom hooks for state management and side effects.
- Add Todo: Enter a task in the input field and press Enter or click the "Add" button.
- Edit Todo: Double-click on a todo to edit its title inline.
- Complete Todo: Click on the checkbox next to a todo to mark it as completed.
- Delete Todo: Click on the delete icon (e.g., trash bin) to remove a todo from the list.
- Filter Todos: Use the filter options (All, Active, Completed) to view todos based on their completion status.
- Toggle Dark Mode: Click on the toggle switch to switch between light and dark themes.
https://vshepel.github.io/todo.
Start organizing your tasks efficiently with the Todo App! 📝