Todo App (React, Styled components, TypeScript)

🔗 Links

• Github URL: Click here
• Live Site URL: Click here

🛠️ Technologies Used

• React JS
• TypeScript
• Styled-Components
• HTML5, CSS
• Framer Motion

🗒️ Core Features

• Adding new to-do items
• Toggling completion status of existing to-dos
• Filtering to-dos
• Theme switching
• Drag and drop functionality
• Responsive web design

⚡ Additional Features

• When deleting a to-do, a toast is displayed with an "undo" option
  • If multiple items are deleted simultaneously with "Clear Complete," undoing will restore multiple items simultaneously
  • Undo is possible for previously deleted items while the toast timer is active
• Variable textarea style
  • Expands dynamically up to 4 lines, then becomes fixed at 4 lines and includes a custom scrollbar
• Keyboard considerations
  • Pressing Esc while editing a to-do exits the editing mode
  • Pressing Enter when adding a to-do immediately submits it
  • Pressing Shift + Enter when adding a to-do creates a line break
  • All elements can be accessed via the tab key
• Smooth theme switching
  • Transition of the background with a gradient does not work, so opacity transition of pseudo-elements is used to resolve it
  • The header image is handled in the same way

🚧 To-Do Features to Improve

• Issue with touch drag-and-drop not working on mobile devices.