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 re…


This content originally appeared on DEV Community and was authored by Web.Developer.io

I have made 2 React App

1) Todo List
2) Color Box Maker

To Do List

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.


This content originally appeared on DEV Community and was authored by Web.Developer.io


Print Share Comment Cite Upload Translate Updates
APA

Web.Developer.io | Sciencx (2022-01-18T19:45:25+00:00) Todo List App and a Color Box Maker | Day 13 & 14. Retrieved from https://www.scien.cx/2022/01/18/todo-list-app-and-a-color-box-maker-day-13-14/

MLA
" » Todo List App and a Color Box Maker | Day 13 & 14." Web.Developer.io | Sciencx - Tuesday January 18, 2022, https://www.scien.cx/2022/01/18/todo-list-app-and-a-color-box-maker-day-13-14/
HARVARD
Web.Developer.io | Sciencx Tuesday January 18, 2022 » Todo List App and a Color Box Maker | Day 13 & 14., viewed ,<https://www.scien.cx/2022/01/18/todo-list-app-and-a-color-box-maker-day-13-14/>
VANCOUVER
Web.Developer.io | Sciencx - » Todo List App and a Color Box Maker | Day 13 & 14. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/18/todo-list-app-and-a-color-box-maker-day-13-14/
CHICAGO
" » Todo List App and a Color Box Maker | Day 13 & 14." Web.Developer.io | Sciencx - Accessed . https://www.scien.cx/2022/01/18/todo-list-app-and-a-color-box-maker-day-13-14/
IEEE
" » Todo List App and a Color Box Maker | Day 13 & 14." Web.Developer.io | Sciencx [Online]. Available: https://www.scien.cx/2022/01/18/todo-list-app-and-a-color-box-maker-day-13-14/. [Accessed: ]
rf:citation
» Todo List App and a Color Box Maker | Day 13 & 14 | Web.Developer.io | Sciencx | https://www.scien.cx/2022/01/18/todo-list-app-and-a-color-box-maker-day-13-14/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.