# Step 4: dynamic list of tasks

## All the tasks from JavaScript

Now we know how to use JavaScript to modify an element’s `innerHTML`. Let’s introduce a new concept: the `Array`. We will need it for grouping all our tasks and to make things dynamic.

Let’s remove all our static tasks from the page:

*4.1 — Let’s empty the `<ul>`*

```markup
<ul id="task-list"></ul>
```

Now let's put all our tasks into an `Array`, and use `forEach()` to update our `listElement`'s `innerHTML`:

*4.2 — All the tasks rendered from JavaScript*

```markup
<script>
  const listItems = ['Buy coffee', 'Buy milk', 'Disco dance'];
  let listElement = document.querySelector('#task-list');

  listItems.forEach(function(item) {
    let element = document.createElement('li');
    element.innerHTML = item;
    listElement.appendChild(element);
  });
</script>
```

Cool! We started with an empty `<ul>` element and then we populated it using an `Array` (containing strings) and its `forEach()` method.

It may look useless at the moment (the output is the same, after all 😒) but what we just did is to make our little app display *dynamic data*. Dynamic, because we will soon be able to add and remove tasks by modifying our `listItems` array.

## Key concepts: input, logic and output

Now comes an important concept:

> Our app does something (*logic*) that turns an *input* (an array of tasks) into an *output* (an HTML page that displays a list of tasks).

So what is input and what is logic in our app?

*4.3 — input and logic*

```markup
<script>
  // This is our input.
  let listItems = ['Buy coffee', 'Buy milk', 'Disco dance'];

  // this is our logic.
  let listElement = document.querySelector('#task-list');
  listItems.forEach(function(item) {
    let element = document.createElement('li');
    element.innerHTML = item;
    listElement.appendChild(element);
  });
</script>
```

And the output? Well, the output is the HTML that displays our tasks. Simple!

*4.4 — output*

```markup
<ul id="task-list">
  <li>Buy coffee</li>
  <li>Buy milk</li>
  <li>Disco dance</li>
</ul>
```

We could actually consider the entire page as the output, but for now let’s focus on the task list.

Our logic is doing just one thing: rendering a list of items. Let’s create a `function` for this; later we will be adding and removing items to our list (we will modify our data), so having a dedicated piece of code that takes care of updating our output will come in handy.

*4.5 — the `updateList()` function*

```markup
<script>
  let listItems = ['Buy coffee', 'Buy milk', 'Disco dance'];

  // Defining our `updateList()` function...
  const updateList = (items) => {
    let listElement = document.querySelector('#task-list');
    
    items.forEach((item) => {
      let element = document.createElement('li');
      element.innerHTML = item;
      listElement.appendChild(element);
    });
  }

  // Calling our `updateList()` function passing an array of tasks
  updateList(listItems);
</script>
```

## Function? Uh?

A function is just a piece of code that we can use multiple times. Functions are perfect for avoiding repetition in our code and to give structure to a JavaScript application.

Note that first we are **defining** a function (const `updateList = (…) => {…}`), and after we are **calling** it (`updateList(…)`). This is an important concept to understand: when we *define* a function, nothing visible happens. We are simply creating a “magic word” that we can use later in our code. To use it, we simply have to append `()` to the end of the “magic word”, including parameters between parenthesis where needed.

When we *call* a function, we can obtain two things:

* we can create a **new value** (using the `return` keyword)
* we can produce a **side effect** (for example, we can display something new on our page)

**What we just did:**

* We put all our tasks into an `Array`, and we used the `forEach()` method for displaying them
* We created our first function: `updateList()`