Unit 4 Project: Creating a ToDo List App

Please read the instructions carefully and submit your project files to in the directory Unit4/Unit4-Project.

Be creative when completing this project and add your own style. However, remember to stay focused on the main bullet points.

Create an html, css, and js file linking them together.
Add an input field for users to add a todo item.
Create an empty list element in the <body>.
Create an event listener on the input field. On ENTER, it should append an item to the list with the user's text.
For each item created in the list:
1. Add a checkbox to mark the item as complete. If checked, apply the ~~strikethrough~~ style to the item's text.
2. Add a button that will delete the item from the list.
Create an empty state view for the list if there are no items in the list.
1. Just an element with some text saying something like "Add your first todo" is fine. Here is an example:
Make sure everything works. Add, delete, and check an item.

We are going to use a local mock server to save and persist your data.

NOTE: To clear the database of items, reset the db.json file to look like this:

{ "item": [] }

First lets design the data structure for our ToDo items. This will be an object that will hold properties to describe each item.
1. When we are ready to create these items, they will populate the array property item as described above.
```
{
  "id": 1,
  "text": "Finish the Unit 4 Project",
  "completed": false
}
```
Lets run our mock server:
1. Open terminal
2. Navigate to the project folder: cd Unit4/Unit4-Project
3. Start the mock server script: ./start_mock_server.sh
4. The server will run at the endpoint: http://localhost:3000
5. Navigate to http://localhost:3000/item in your browser to see the empty list of our ToDo items.
Update your js file to fetch all the items from the API once the document is ready.
1. Fetch the data using a GET request to /item
2. Read the response from the request and render the todo items with the corresponding id so that we can uniquely reference this item later on.
When adding an item, submit a POST request to /item with text={user input} and completed=false
1. Be sure to read the response data and grab the item id
When clicking the checkbox, submit a PATCH request to /item/{item id} with completed={value of the checkbox}
When deleting an item, submit a DELETE request to /item/{item id}
Make sure the data is correctly persisted when you reload the page.
When finished, be sure to stop the server script.
As usual, create a new branch and then new Pull Request and assign it to your coach for review.

Provide feedback