Step 5: adding new items

Adding new items

Time to ask input to the user and add other items to our list!

Before our <ul> element, let’s add this HTML code:

5.1 — The new item input

<form onsubmit="createNew(event)">
  <input id="new-item" placeholder="Add a new task...">
  <button>Add</button>
</form>

We just added a form with an input field and a button to our page. We want to create a new task with the text that the user writes in the input field, and we want this to happen when he submits the form by clicking on the “Add” button or pressing the Enter key; so let’s add a createNew() function (after updateList()) for capturing what the user just typed!

5.2 — The createNew function

const createNew = (event) => {
  event.preventDefault();

  const newItemElement = document.querySelector('#new-item');
  let newItemValue = newItemElement.value.trim();

  if (!newItemValue) return;

  listItems.push(newItemValue);
  newItemElement.value = '';

  updateList(listItems);
}

This function does three things:

• inserts what the user just wrote in the text field inside the listItems array using the push() method

• cleans up the text field

• calls the updateList() function for displaying the newly created item.

A thing to notice here is event.preventDefault(). The browser will try to reload the page when the user submits a form, but we don’t want this to happen: so we call this function to avoid the page reload.

Now our updateList() function needs to be updated, because if we will call it a second time we need to remove the previously rendered code.

This is easily done by adding this line before the forEach() call:

5.3 — Cleaning the previous output

while (listElement.firstChild) listElement.removeChild(listElement.firstChild);

Our final result will be:

5.4 — Updated updateList() function

const updateList = (items) => {
  let listElement = document.querySelector('#task-list');
  while (listElement.firstChild) listElement.removeChild(listElement.firstChild);

  items.forEach(function(item) {
      let element = document.createElement('li');
      element.innerHTML = item;
      listElement.appendChild(element);
    });
}

Great! Now we are able to add as many task as we want!

What we just did:

• We added a input field and a button for creating new tasks

• We created a createNew() function that adds a new task and updates our list.