Web Front-End Development Lab 7 Journal

The to-do list should include the following functionality:

• let users add items to the list

• show the total number of items on the list

• the ability to delete items from the list

For this lab I need to do the following:

• Create a mock-up and break it into a component hierarchy.

• Build a static version of your app in React and publish it to the creative server.

• Document the minimal representation of state and in which component it will live.

Full Lab7 link: https://creative.colorado.edu/~mixu5922/FWD/Labs/Lab7/

The code is here: https://drive.google.com/file/d/1Yr0N8OfBHx_TI5lC_HN762V09KQ-d_QN/view?usp=sharing

1. Title (blue): Just showing the lab name and do for what.

2. AddTask (green): Receives the user's task input.

3. ToDoList(red): Showing all the tasks now holding.

4. DeleteButton(orange): Delete the task.

5. TotalCount(purple): Showing the total number of tasks.

I think there will be 3 components in this app. App.js will be the parent of ToDoList.js and ToDoItem.js. TodoList.js will receive the array from the parent App.js and render it to a <ul> list. TodoList.js will go through the array, send every props to TodoItem.js, and render it to a <li>. The state will live in the component App.js.