git clone https://github.com/markcrispo/CSFS1010-Lab-1
cd CSFS1010-Lab-1
npm i
npm run dev

You've been hired to code a To Do list app! We'll build it step-by-step.

Create a component called ToDoItem that renders a checkbox and a text field. The component should track its state with the useState hook. This is an example of a common pattern - a controlled component!

The goal is to drive the inputs with state variables.

const [title, setTitle] = useState('');
const [isChecked, setIsChecked] = useState(false);

Hints:

• You can use <input type="checkbox" /> and <input type="text" /> for the checkbox and textfield
• Use the onChange prop to capture change events and call setTitle and setIsChecked

Add a "Save" button beside the text field.

When the user clicks Save...

• replace the text field with regular non-editable text
• replace the Save button with an Edit button

When the user clicks Edit...

• the Save button should reappear
• the text should be editable again.
• the Save button should be disabled when the text field is empty

A designer has taken a look at your progress so far, and they have some feedback:

When the text has been saved, the "Edit" button should only show up when the user is hovering over the task.

Hints:

• You can use the onMouseEnter and onMouseLeave props to capture mouseenter and mouseleave events

Underneath the To-Do list, add an "Add" button and a "Remove" button to add and remove tasks from the bottom of the To-do list.

Hints:

• Add a useState to track the number of todos. Add and Remove should increment/decrement the count respectively.

Next, we'll want to be able to remove specific tasks from the To-Do list. To accomplish this, we'll want to lift state

In ToDoItem:

• Add a "Remove" button, and a handleRemove prop
• convert the useState hooks for the checkbox and text field to props

In App.jsx:

• Add const [todos, setTodos] = useState([{ title: 'Get groceries', isChecked: false }])
• Map the todos state to the <ToDoItem /> component
• Implement functions setIsChecked and setTitle for a to-do item at a particular index

Once we're done with that refactor, we can implement the remove button:

In ToDoItem:

• Add a "Remove" button, and a handleRemove prop

In App.jsx:

• Implement handleRemove for a to-do item at a particular index