to do list in JavaScript

In questa lezione realizzeremo una semplice to do list in JavaScript. Si tratta di un esercizio classico che ci permetterà di mettere in pratica i concetti appresi finora e di sperimentare l’utilizzo di JavaScript per manipolare il DOM e gestire eventi.

Per realizzare questo progetto infatti utilizzeremo alcuni metodi per manipolare il DOM in JavaScript.

Intanto provate il progetto che andremo a realizzare assieme inserendo una voce e cliccando poi sul pulsante add della figura sotto:

Lista delle Attività

Modifica attività:

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

To do list in JavaScript – sviluppo del codice

Innanzitutto realizziamo il codice HTML del progetto.

Creiamo dunque una casella di input con un button e predisponiamo una lista dove appariranno tutti gli elementi che aggiungeremo a mano a mano.

<div id="flexContainer">
    <h1>Lista delle Attività</h1>
    <div id="inputContainer">
       <input type="text" id="taskInput" placeholder="Aggiungi una nuova attività">
       <button class="addBtn" id="addButton">Aggiungi</button>
    </div>
    <ul id="taskList"></ul>
</div>

Realizziamo poi del CSS a piacere per dare un tocco grafico, io ad esempio ho realizzato questo:

body {
      font-family: Arial, sans-serif;

      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
 }

#flexContainer {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 600px;
      padding: 20px;
      margin: 80px;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
    margin-bottom: 20px;
 }

#inputContainer {
     display: flex;
     margin-bottom: 20px;
 }

input[type="text"] {
     flex: 1;
     padding: 8px;
     font-size: 1em;
     margin-right: 10px;
}

button {
     padding: 10px 20px;
     font-size: 1em;
     cursor: pointer;
     border: none;
     border-radius: 4px;
     transition: background-color 0.3s;
 }

button.addBtn {
     background-color: #4CAF50;
     color: #fff;
 }

button.editBtn {
      background-color: #3498db;
            color: #fff;
}

button.deleteBtn {
    background-color: #e74c3c;
    color: #fff;
}

button:hover {
     background-color: #45a049;
 }

ul {
    list-style-type: none;
    padding: 0;
 }

 li {
    font-size: 1.2em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    width: 100%;
 }
        
.taskText {
     flex: 1;
  }

.buttonContainer {
      display: flex;
      margin-left: auto;
  }

 .buttonContainer button {
      margin-left: 10px;
}

/* Finestra modale */
#modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
 }

#modalContent {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#modalInput {
      margin-bottom: 10px;
}

 #modalButtons {
      display: flex;
      justify-content: flex-end;
}

#modalButtons button {
      margin-left: 10px;
}

Infine sviluppiamo il codice JavaScript necessario a far funzionare la nostra to do list:

const addButton = document.getElementById('addButton');
addButton.addEventListener('click', function () {
    let taskInput = document.getElementById('taskInput').value;
    const taskList = document.getElementById('taskList');

    if (taskInput.trim() !== '') {
         const newTask = document.createElement('li');

         newTask.innerHTML = `
          <span class="taskText">${taskInput}</span>
          <div class="buttonContainer">
              <button class="editBtn" onclick="openModal(this)">Modifica</button>
              <button class="deleteBtn" onclick="deleteTask(this)">Elimina</button>
           </div>  `;

           taskList.appendChild(newTask);
           taskInput = '';
            }
    });

    const modal = document.getElementById('modal');
    const modalInput = document.getElementById('modalInput');
    let editingTask = null;

    function deleteTask(button) {
        const taskItem = button.parentNode.parentNode;
        const confirmation = window.confirm("Sei sicuro di voler eliminare questa attività?");
    
    if (confirmation) {
        taskItem.parentNode.removeChild(taskItem);
    };

 }
        
function openModal(button) {
    const taskItem = button.parentNode.parentNode;
    const taskText = taskItem.querySelector('.taskText');
    modalInput.value = taskText.textContent;
    editingTask = taskItem;  // Memorizza l'attività che sta per essere modificata
    modal.style.display = 'flex';
 }

document.getElementById('confirmEdit').addEventListener('click', confirmEdit);
function confirmEdit() {
    const taskText = modalInput.value.trim();

    if (taskText !== '') {
       const span = editingTask.querySelector('.taskText');
       span.textContent = taskText;

       closeModal();
     }
 }

document.getElementById('closeModal').addEventListener('click', closeModal);
    function closeModal(confirmEdit) {
        modal.style.display = 'none';
        editingTask = null;  // Resetta l'attività in modifica
}

Descrizione dell’algoritmo per la to do list in JavaScript

In questo esempio ho creato alcune funzioni per la gestione della to-do list in JavaScript.

Innanzitutto ho creato la funzione aggiungi attività, e attraverso un listener l’ho collegata al button addButton. Dunque quando si clicca sul pulsante si avvia la funzione che consente di recuperare il valore dalla casella di input. Prima di inserirlo nella lista di cose da fare controlliamo che il campo di input non sia vuoto e se questa condizione è vera aggiunge l’attività attravesro al creazione di un nuovo elemento li. Per ogni attività ho creato anche due pulsanti per l’aggiunta e l’eliminazione della voce dell’elenco.

Dopo ho creato la funzione per eliminare l’attività che viene chiamata al click sul button “Elimina” all’interno dell’attività. In questa funzione ottengo il riferimento all’elemento <li> padre dell’attività e prima dell’eliminazione chiedo conferma attraverso una finestra di alert. Se l’utente conferma, rimuove l’elemento <li> dall’elenco.

Quindi ho sviluppato la funzione per la modifica dell’attività definendo una finestra openModal che viene chiamata quando viene cliccato il bottone “Modifica” all’interno di un’attività. Questa funzione Ottiene il riferimento all’elemento <li> padre dell’attività e al testo dell’attività. Dunque mostra una modal (una finestra modale) con un campo di input prepopolato con il testo dell’attività. Inoltre memorizza l’attività che sta per essere modifica.

Quando scriviamo nella casella di input le modifiche possiamo confermarle attraverso il pulsante “Modifica”. A questo pulsante ho infatti aggiunto un listener per gestire il click dell’utente. Quando viene cliccato il bottone di conferma, recupera il testo dall’input della modal. Se il testo non è vuoto, aggiorna il testo dell’attività nell’elemento <li> corrispondente e chiude la modal.

Altrimenti possiamo chiudere la finestra modale senza apportare nessuna modifica, cliccando sul pulsante Annulla. Quando si clicca su questo pulsante di chiusura, si chiude la modale nascondendola. Inoltre si resetta la variabile editingTask a null.

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Conclusione

In questa lezione abbiamo sviluppato una semplice to do list in JavaScript, provate anche voi a svilupparne una e scrivete nei commenti sotto. Nelle prossime lezioni svilupperemo tanti altri progetti creativi.

>> counter

galleria con filtri >>