A simple and intuitive checklist app made with React.
Click here to view the live site.
Tech used: HTML, CSS, JavaScript, React
- Using Styled Components: This is my first time trying out CSS-in-JS, and I used styled components for this app. I liked adding organized styles directly to a React component and being able to change styles based on state/props. For example, different styles were applied to a task based on its completion status (see Task.styled.js):
- Save tasks in local storage
- Prevent creation of empty tasks
- Put new tasks on the top of the list
- Make tasks editable
- Apply styles based on completion status (e.g. checkmark display, line-through text, lower opacity)
- Create media queries for responsiveness
- Display message if there are no tasks
- Implement light/dark mode