Todo item list CRUD

There are a couple of features that we could improve. Let’s implement the CRUD (Create-Read-Update-Delete) for the item list.

C-reate

We are already can create item list from the console (2.3) and also from the UI (2.4.3). So, it’s done.

U-pdate

What if you make a mistake and want to change the text on some of your to-do list. Furthermore, you can notice that the checkboxes states are not persistent when you reload the pages. Let’s fix both problems.

1.- You want to respond to a double click event showing up a text box, where the user can change the text. First, let’s add the HTML in the item-template template below the label tag.

<input class="edit" value="<%- title %>">

2.- If you refresh, you will notice that there are both displaying at the same time. So, you can hide them properly with the following CSS.
CSSFull Code

1

2

3

4

5

6

7

8

9

10

11

#todo-listinput.edit {

display: none; /* Hides input box*/

}

#todo-list.editinglabel {

display: none; /* Hides label text when .editing*/

}

#todo-list.editinginput.edit {

display: inline; /* Shows input text box when .editing*/

}

3.- Then, we need to add the events to the TodoView class to respond to the changes.

What’s next?

Adrian Mejia is a full-stack web developer working at Cisco in Boston. Currently working at Cisco as a Software Engineer. Adrian enjoys writing books and posts about programming, technologies and nerdy stuff. Find our more here.