> 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-11.md).

# Step 11: add counters

### Updating counters

The last thing we’re going to do is adding some counters next to our filters: we want to show how many task we have in total, how many of them are completed and how many are not.

To do this, we need a new function that needs to be called each time we call `updateList()`.

Let’s create it:

*11.1 – the new `updateCounters()` function*

```javascript
const updateCounters = () => {
  var completedCount = 0;

  listItems.forEach((item) => {
    if (item.completed) completedCount++;
  });

  document.querySelector('.filter-all').dataset.count = listItems.length;
  document.querySelector('.filter-active').dataset.count = listItems.length - completedCount;
  document.querySelector('.filter-completed').dataset.count = completedCount;
}
```

The first thing we do in this function is to create a `completedCount` variable that is initially set to `0`.

Then we loop through our `listItems` array using `forEach()`: we increment the `completedCount` counter each time we find a task that is completed. We do this by using the `++` operator: it will simply add `1` to the current value of `completedCount`.

Finally we will use the `dataset` property of our DOM element to store informations. When we use `dataset`, a new `data-count` attribute will automatically be created for us on the element. The data we save in this attribute will then be shown via a CSS pseudo element.

Last touch: we need to update our `updateList()` function by adding the `updateCounters()` function call at the end.

*11.2 – the updated `updateList()` function*

```javascript
const updateList = (items, save) => {
  var listElement = document.querySelector('#task-list');
  while (listElement.firstChild) listElement.removeChild(listElement.firstChild);

  items.forEach((item) => {
    listElement.appendChild(renderItem(item));
  });

  if (save) localStorage.listItems = JSON.stringify(items);

  updateCounters(); // new line added
}
```

Now, our counters will be updated each time we do something on our task list!

**What we just did:**

* we created a `updateCounters()` function that will show counters next to each filter
* we modified our `updateList()` function by making it call `updateCounters()`

## It’s not a bug, it’s a feature!

Writing code without bugs is very hard (if not impossible), and our little app contains (at least) one of them.

* We can add multiple items with the exact same text (not exactly a bug), but when we interact with one of those, our action is ran against all the duplicates!

How can we avoid this?


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://bootcamp.shetechitaly.org/day1/01-11.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.