# 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()`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bootcamp.shetechitaly.org/day1/01-04.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.