A to-do list is one of the first projects many developers create. The basic components are a way to add items and a way to delete them. This article is for those who have already implemented these basics and want to add the extra feature of being able to edit items once they are added.

Below you can find a live demo that will help you to know how it works and if you’d like to inspect the code, you can find it on GitHub. Note: it is only optimized for laptops at this time.

How to edit items

I wanted to be able to double click an item on the list in order to change it. Maybe I misspelled it or something. In my HTML, I used list elements for items. The high level idea was to temporarily replace the list element with an input element, type in something new, then change it back to a list element. To achieve this, I first added an event listener to each item when it was created:

function createListItem() {
  let li = document.createElement('li');
  li.addEventListener('click', toggleDone);
  li.addEventListener('dblclick' editItem);
  li.textContent = input.value;

  addDivAndButton(li);

  input.value = '';
}

Next, I created the editItem function. The list item you want to change is replaced by an input element with the same value. Then you are able to edit that value. These are the inner workings:

function editItem(event) {
  /* Saves the initial value of the item. */
  let item = event.target.innerHTML;

  /* Creates an input to replace the item. */
  let itemInput = document.createElement('input');

  itemInput.type = 'text';

  /* Sets the value of the input to the initial value of the item. */
  itemInput.value = item;

  itemInput.classList.add('edit');
  itemInput.addEventListener('keypress', saveItem);
  itemInput.addEventListener('click', saveItem);

  /* Adds the input to the DOM. */
  event.target.parentNode.prepend(iteminput);

  /* Removes the initial item from the DOM. */
  event.target.remove();

  /* Selects the value when you double click, otherwise you have to click again to type. */
  itemInput.select();
}

The final step was to create the saveItem function in order to make my changes permanent. This basically reverses the steps above, replacing the input element and its new value with a new list element, though this time permanently (until you double click again, that is). Here’s what it looks like:

function saveItem(event) {
  /* Saves the initial value of the input element. */
  let inputValue = event.target.value;

  if( event.target.value.length > 0 && ( event.keyCode === 13 || event.type === 'click' ) ) {
    /* Creates a list element. */
    let li = document.createElement('li');

    li.addEventListener('click', toggleDone);
    li.addEventListener('dblclick', editItem);

    /* Sets value of list element to the initial input value. */
    li.textContent = event.target.value;

    /* Adds the list element to the DOM. */
    event.target.parentNode.prepend(li);

    /* Removes the input element from the DOM. */
    event.target.remove();
  }
}

That’s it! If you happen to inspect it on GitHub, you will see some extra lines of code in my editItem and saveItem functions that allow you to retain the original value of the item in case you completely delete the input value, but that is beyond the scope of this article so I left it out for simplicity. I hope this helps you make all your editable-to-do-list-dreams come true!

Source: dev.to – Author: Gabrielle Davidson