Javascript - To Do List - Developer MapoDesign

Con la collaborazione di SheTech, tramite il loro BootCamp gratuito per le iscritte, ho realizzato una ToDoList. Questa piccola applicazione lavora attraverso JSON per il salvataggio dei dati inseriti in locale nel dispositivo.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>ToDo List</title>
    <link href="styles/app.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div>
      <h1>Questa è la mia lista</h1>
      <h2>Inserisci un task</h2>
    </div>
    <div class="panel panel-default">
      <form onsubmit="createNew(event)" class="panel-heading">
        <input id="new-item" class="form-control" placeholder="Add a new task..." autofocus="autofocus">
        <button class="btn btn-primary">Add</button>
      </form>
      <ul id="task-list" class="list-group"></ul>
    </div>

    <template id="item-template">
      <li class="list-group-item">
        <span></span>
        <button onclick="removeItem(event)" class="close">×</button>
      </li>
    </template>

    <script src="script.js"></script>


  </body>
</html>

Spiego alcuni elementi nel codice dell’HTML

L’applicazione è semplice, c’è un form di inserimento dati con un bottone. Quando clicco il bottone attiva l’azione definita dal JavaScript.

Ho poi una lista non ordinata <ul></ul> vuota, che viene popolata attraverso la struttura <template></template> inserita in fondo all’HTML, non visibile, che viene pescata dal JavaScript e popolata attraverso un loop forEach dell’Array listItems

// Creo una lista predefinita di elementi
var listItems = ['Fare meditazione', 'Colazione', 'Passeggiata'];

// Definisco dove andranno gli elementi della lista
var listElement = document.querySelector('#task-list');

// Trasformo la mia lista in una stringa (testo)
var listItemsAsString = JSON.stringify(listItems);

// se la chiave esiste in localstorage, la carico nel mio array, altrimenti creo la chiave
if (localStorage.listItems) {
        // recupero la lista da local storage e con JSON.parse converto la stringa salvata in array
        var listItems = JSON.parse(localStorage.listItems);
} else {
        // inserisco in localstorage una chiave chiamata listItems e la valorizzo con la mia stringa
        localStorage.listItems = listItemsAsString;
      }

var renderItem = function(itemText) {
    // recupero il template inserito con id ...
    var template = document.querySelector('#item-template');
    // in memoria duplico il contenuto del tag template (che contiene li..)
    var clone = template.content.cloneNode(true);
    // inserisco il testo itemText nello span relativo al clone
    clone.querySelector("span").innerText = itemText;

    return clone;
  }
  
  // Vengono inseriti dinamicamente i task da listItems

var updateList = function(items) {
    var listElement = document.querySelector('#task-list');
    while (listElement.firstChild) listElement.removeChild(listElement.firstChild);
  
     items.forEach(function(item) {
        var element = renderItem(item);
        listElement.appendChild(element);
      });

    localStorage.listItems = JSON.stringify(items); // New line added
  }

var createNew = function(event) {
    event.preventDefault();
  
    var newItemElement = document.querySelector('#new-item');
    var newItemValue = newItemElement.value.trim();
  
    if (!newItemValue) return;
  
    listItems.push(newItemValue);
    newItemElement.value = '';
  
    updateList(listItems);
}

var removeItem = function(event) {
    var clickedItemText = event.target.previousElementSibling.innerHTML;
  
    listItems = listItems.filter(function(itemText) {
      return clickedItemText != itemText;
    });
  
    updateList(listItems);
}

updateList(listItems);

Javascript – To Do List

Lascia un commento Annulla risposta