> For the complete documentation index, see [llms.txt](https://bootcamp.shetechitaly.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bootcamp.shetechitaly.org/day1/01-05.md).

# 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*

```markup
<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*

```javascript
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*

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

Our final result will be:

*5.4 — Updated `updateList()` function*

```javascript
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.