"editMode" How does it actually work?

Hi Ethan,

The editMode class doesn't need to be already present but it could be.

Whether you can edit an item or not is determined by the presence of the editMode class and the css.

/* Edit Task */
ul li input[type=text] {
  display:none;
}

ul li.editMode input[type=text] {
  display:block;
}

ul li.editMode label {
  display:none;
}

That css insures that the text input is showing and the label is hidden if the editMode class is present and the opposite if the editMode class is not present. Only one of those elements shows at any given moment.

If you take a look at the html for the list

<ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        <li class="editMode"><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Edit</button><button class="delete">Delete</button></li>

      </ul>

we can see that when the page first loads, the "Pay Bills" item is not in edit mode but the "Go Shopping" item is in edit mode. You should see the text input for that one and the label for the "Pay Bills" item. The js code doesn't make any assumptions about how these list items start out.

The responsibility of the js code (editTask function in particular), is to transfer the text between the input and label elements and to switch the edit mode by toggling the editMode class.

So if we think about the initial state of the page, clicking on the "Pay Bills" edit button means we're going into edit mode. This means the editTask function needs to get the text from the label and put that into the text input value and toggle the editMode class. The css kicks in at that point to allow the editing by showing the text input and hiding the label.

Clicking on the "Go Shopping" edit button means we're leaving edit mode. The editTask function needs to take the value in the text input and set the label text and then toggle the editMode class. The css then hides the text input and shows the label so that you can no longer edit.