TODO List | Codegrind

Traccia

L’obiettivo di oggi è creare una semplice TODO list per la gestione delle cose da fare in una giornata. Inserendo un nuovo task si deve accodare agli altri già presenti e cliccandoci sopra deve essere rimosso in quanto considerato completato.

I task devono essere salvati nel localStorage del browser e ricaricati se presenti all’apertura della pagina.

Soluzione

Pagina HTML

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>TODO List</h1>
    <input id="new-task" type="text" placeholder="Cosa devi fare?" />
    <button id="new-task-btn">Aggiungi Task</button>
    <button id="clear-btn">Pulisci</button>
    <div id="todo"></div>
    <script src="script.js"></script>
  </body>
</html>

Pagina Script.js

Classe TODOList

class TODOList {
  constructor() {
    this.tasks = this.caricaTask();
    this.generaTask();
    console.log("tasks", this.tasks);
  }

  aggiungiTask(task) {
    this.tasks.push(task);
    this.generaNuovoTask(task);
    console.log("tasks", this.tasks);
    localStorage.setItem("tasks", JSON.stringify(this.tasks));
  }

  concludiTask(task) {
    const index = this.tasks.indexOf(task);
    this.tasks.splice(index, 1);
    console.log(this.tasks);
    localStorage.setItem("tasks", JSON.stringify(this.tasks));
  }

  caricaTask() {
    const tasks = JSON.parse(localStorage.getItem("tasks")) ?? [];
    return tasks;
  }

  generaNuovoTask(task) {
    const todo = document.getElementById("todo");
    const p = document.createElement("p");
    p.appendChild(document.createTextNode(task));
    todo.appendChild(p);
    p.addEventListener("click", (e) => {
      this.concludiTask(task);
      e.srcElement.remove();
    });
  }

  generaTask() {
    this.tasks.forEach((task) => {
      const todo = document.getElementById("todo");
      const p = document.createElement("p");
      p.appendChild(document.createTextNode(task));
      todo.appendChild(p);
      p.addEventListener("click", (e) => {
        this.concludiTask(task);
        e.srcElement.remove();
      });
    });
  }
}

Impostazione dei listener al caricamente e creazione TODOList

document.addEventListener("DOMContentLoaded", () => {
  const newTaskBtn = document.getElementById("new-task-btn");
  const clearBtn = document.getElementById("clear-btn");
  const input = document.getElementById("new-task");

  const todoList = new TODOList();

  newTaskBtn.addEventListener("click", () => {
    todoList.aggiungiTask(input.value);
  });
  clearBtn.addEventListener("click", () => {
    console.log("pulisci task");
  });
  input.addEventListener("keypress", (e) => {
    if (e.key === "Enter") {
      todoList.aggiungiTask(input.value);
      input.value = "";
    }
  });
});