Todo List App and a Color Box Maker | Day 13 & 14

I have made 2 React App

1) Todo List
2) Color Box Maker

To Do List

Components

• App - this component should render the TodoList component

• TodoList - this component should render the NewTodoForm component and should render the list of Todo components. Place your state that contains all of the todos in this component.

• NewTodoForm - this component should render a form with one text input for the task to be created. When this form is submitted, a new Todo component should be created.

• Todo- this component should display a div with the task of the todo.

For each Todo component, there should also be a button with the text “X” that when clicked, removes the todo.

Each Todo component should also display a button with the text “edit” that when clicked, displays a form with the task of the todo as an input and a button to submit the form. When the form is submitted, the task of the text should be updated and the form should be hidden.

https://github.com/Developer-io-web/Todo-list

Color-Box Maker

https://github.com/Developer-io-web/Color-Box-Maker

Components

• App - this component should render the BoxList component.
• BoxList - Place your state that contains all of the boxes here. This component should render all of the Box components along with the NewBoxForm component
• Box- this component should display a div with a background color, width and height based on the props passed to it. NewBoxForm - this component should render a form that when submitted, creates a new Box. You should be able to specify the Box’s width, height, and background color. When the form is submitted, clear the input values.

When each Box component is displayed, add a button with the text of of “X” next to each Box. When this button is clicked, remove that specific box. This will require you to pass a function down as props - the button should not be a seperate component, it should be included in the Box component.