An clean todo list app built for my own pomodoro sessions. Meant for use as short todo lists for each work cycle, with tasks populated through local storage. Users can add tasks, mark them as completed, and delete them. They can also filter their list by active, completed, or all tasks, as well as delete all completed tasks. There is a counter at the bottom to indicate how many active tasks remain.
Link to project: https://extraordinary-daffodil-23a0f7.netlify.app/
Tech Used: React, Material UI, Vite, JavaScript, HTML, CSS, localStorage
I chose to deconstruct it into a few more components that may have been strictly necessary as a way to practice passing through props and state in React.
- FilterBtn: Button template for the task filtering feature.
- FilterGrp: Button group with props passed in to map necessary buttons.
- TodoForm: Form allowing users to add tasks.
- TodoItem: Individual tasks to be displayed in the list.
- TodoList: List displaying all the user's tasks and filter buttons. Includes state, logic, and some styling for the app features.