Using custom code in your application

Create a model for the tasks with a name & checkbox property

Create an endpoint with the path `/tasks`

Create a render web template action on your endpoint

Create an endpoint template on render web template

Create an `h1` with a fitting text like ‘Todo list’

Create an input field with a data attribute of `task-create-title`

Create a button with a data attribute of `task-create-button`

Create a checkbox with a data attribute of `task-toggle-button`

Create a `ul` with a data attribute of `task-list`

Create a `li` in `data-task-list` with a data attribute of `task-item` and `task-item-id=””`

In `data-task-item`, add a checkbox with a data attribute of `task-item-checkbox`

In `data-task-item`, add a title with a data attribute of `task-item-title`

In `data-task-item`, add an edit button with a data attribute of `task-item-edit-button`

In `data-task-item`, add a delete button with a data attribute of `task-item-delete-button`

Create a second `li` element in `data-task-list` with the same content and data attributes, but this time add the `checked` attribute to the `data-task-item-checkbox`

Give the `data-task-create-button` a plus icon and the `data-task-item-delete-button` a trash can icon

Create a new stylesheet template

Include the stylesheet template in your layout with the generated liquid tag

Include Google Fonts link tag: https://fonts.googleapis.com/css?family=Merriweather|Ubuntu&display=swap

Create a class named `title-font` with the font family `Merriweather`

Create a class named `default-font` with the font family `Ubuntu`

Create a class named `betty-colour` with a hex color of #e9244b

Create a class named `bold` with a font weight of 700

Apply the class `default-font` to the `body` element

Apply the class `betty-colour` to the `h1` element

Apply the class `bold` to the `h1` element

Style the checkbox so it really looks like a toggle button

Create an endpoint with the path `/tasks.json`, the content-type set to JSON, and the Authentication profile to Internal Betty Blocks account

Create an endpoint template directly on the endpoint `/tasks.json`

Create a collection on the endpoint `/tasks.json` and name it `tasks`

Add a filter to the collection `tasks` where `User is equal to current_user`

Add the JSON template from the description to your endpoint template

Use liquid to loop through the `tasks` collection to create the JSON objects

Use liquid to get the `id`, `title` and `is_finished` of the task for each iteration

Use liquid to place a comma between each object except after the last one

Create a new javascript template

Include the javascript template in your layout with the generated liquid tag

Write a function that disables the ‘Add’ button when the input field is empty

Write a function that hides the finished tasks when the toggle button is toggled

Create a new javascript template and include it in the layout page

Create an endpoint with the path `/tasks/new` and the required input variables

Create an endpoint with the path `/tasks/:task_id` and the required input variables

Create an endpoint with the path `/tasks/:task_id/destroy` and the required input variables

Create a create action on the endpoint `/tasks/new` that creates a new task

Create an edit action on the endpoint `/tasks/:task_id` that updates the `is_finished` property

Create a delete action on the endpoint `/tasks/:task_id/destroy` that deletes the task object

Write an AJAX request that retrieves the JSON data from `/tasks` and appends every object as a list item in the `data-task-list`

Write an AJAX request that posts the `title` to the `/tasks/new` endpoint when the `data-task-create-button` is clicked

Write an AJAX request that posts the task id and the checkbox value when the `data-task-item-checkbox` is clicked

Write an AJAX request that posts the task id when the `data-task-item-delete-button` is clicked

Add a spinner while the AJAX call is running and remove the spinner when the call is done