Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Awesome Tasks</title>
    <link href="styles/app.css" rel="stylesheet">
    <script id="item-template" type="text/html">
      <li data-completed="_COMPLETED_" class="list-group-item">
        <span onclick="toggleStatus(event)">_TEXT_</span>
        <button onclick="removeItem(event)" class="close">×</button>
      </li>
    </script>
  </head>
  <body>
    <h2>Awesome Tasks</h2>
    <div class="panel panel-default">
      <div class="panel-heading">
        <input id="new-item" class="form-control" placeholder="Aggiungi task" autofocus="autofocus">
        <button onclick="createNew(event)" class="btn btn-primary"><b>AGGIUNGI</b></button>
      </div>
      <ul id="task-list" class="list-group"></ul>
      <div class="panel-footer text-center small">
        <span>Show:</span>
        <button onclick="filterItems()" class="filter filter-all">All</button>
        <button onclick="filterItems('active')" class="filter filter-active">Active</button>
        <button onclick="filterItems('completed')" class="filter filter-completed">Completed</button>
        <hr>
        <button onclick="clearCompleted()" class="btn btn-default btn-xs">Clear completed</button>
      </div>
    </div>
    <script>
      var loadList = function() {
        if (localStorage.listItems) return JSON.parse(localStorage.listItems);

        return [
          { text: 'Buy coffee',  completed: true  },
          { text: 'Buy milk',    completed: false },
          { text: 'Disco dance', completed: false }
        ];
      }

      var updateList = function(items, save) {
        var listElement = document.querySelector('#task-list');
        listElement.innerHTML = '';

        items.forEach(function(item) {
          listElement.innerHTML += renderItem(item);
        });

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

      var renderItem = function(item) {
        var template = document.querySelector('#item-template').innerHTML;

        return template
          .replace('_TEXT_', item.text)
          .replace('_COMPLETED_', item.completed);
      }

      var createNew = function(event) {
        var newItemElement = document.querySelector('#new-item');
        var newItemValue = newItemElement.value.trim();

        if (!newItemValue) return;

        listItems.push({ text: newItemValue, completed: false });
        newItemElement.value = '';

        updateList(listItems, true);
      }

      var removeItem = function(event) {
        var clickedItemText = event.target.previousElementSibling.innerHTML;

        listItems = listItems.filter(function(item) {
          return clickedItemText != item.text;
        });

        updateList(listItems, true);
      }

      var toggleStatus = function(event) {
        var clickedItemText = event.target.innerHTML;

        listItems.forEach(function(item) {
          if (clickedItemText == item.text) {
            item.completed = !item.completed;
          }
        });

        updateList(listItems, true);
      }

      var filterItems = function(status) {
        var itemsToShow = [];

        if (status == 'completed') {
          itemsToShow = listItems.filter(function(item) {
            return item.completed;
          });
        } else if (status == 'active') {
          itemsToShow = listItems.filter(function(item) {
            return !item.completed;
          });
        } else {
          itemsToShow = listItems;
        }

        updateList(itemsToShow);
      }

      var clearCompleted = function() {
        listItems = listItems.filter(function(item) {
          return !item.completed;
        });

        updateList(listItems, true);
      }

      var listItems = loadList();

      updateList(listItems);
    </script>
  </body>
</html>