New function : toDoList

scripts/toDoList.js

@@ -0,0 +1,79 @@
+/* Variables séléction DOM */
+const addTaskForm = document.getElementById('addTask');
+const clear = document.querySelector(".clear");
+const list = document.getElementById("list");
+const input = document.getElementById("input");
+const btnAddTask = document.getElementById('btnAddTask');
+
+/* Variables */
+const tasksListArray = JSON.parse(localStorage.getItem('tasks')) || [];
+let id = tasksListArray.length;
+// Classes CSS
+const check = "fa-check-circle";
+const unCheck = "fa-circle";
+const lineThrough = "lineThrough";
+
+/* Créer la tâche dans le DOM */
+function addTask(task, id, done, trash) { 
+    if(trash) { 
+        return; 
+    }
+    const item = `<li class="item" id=${id}>
+                    <i class="fa ${(done) ? check : unCheck} co" id="complete"></i>
+                    <p class="text ${(done) ? lineThrough : ""}">${task}</p>
+                    <i class="fas fa-trash-alt de" id="removeTask"></i>
+                  </li>
+                `;
+    list.insertAdjacentHTML("beforeend", item);
+}
+
+/* Ajoute un élément à la liste */
+function addTaskElement(event) {
+    event.preventDefault();
+    const taskValue = document.getElementById('taskToAdd').value;
+    addTask(taskValue, id, false, false);
+    tasksListArray.push({
+        name : taskValue,
+        id : id,
+        done : false,
+        trash : false   
+    });
+    localStorage.setItem('tasks', JSON.stringify(tasksListArray));
+    id++;
+    addTaskForm.reset();
+}
+addTaskForm.addEventListener('submit', (event) => {addTaskElement(event)});
+btnAddTask.addEventListener('click', (event) => {addTaskElement(event)});
+
+/* Ajoute un élément à la liste */
+list.addEventListener('click', (event) => {
+    const element = event.target; 
+    const elementJob = element.getAttribute('id');
+    const elementId = element.parentNode.getAttribute('id');
+
+    /* Tâche compléter */
+    if(elementJob == "complete") {
+        element.classList.toggle(check);
+        element.classList.toggle(unCheck);
+        element.parentNode.querySelector(".text").classList.toggle(lineThrough);
+        tasksListArray[elementId].done = tasksListArray[elementId].done ? false : true;
+    }
+
+    /* Supprime une tâche */
+    else if(elementJob == "removeTask") {
+        element.parentNode.parentNode.removeChild(element.parentNode);
+        tasksListArray[elementId].trash = true;
+    }
+    localStorage.setItem("tasks", JSON.stringify(tasksListArray));
+});
+
+/* Affiche les tâches enregistrées */
+tasksListArray.forEach((item) => {
+    addTask(item.name, item.id, item.done, item.trash);
+});
+
+/* Supprime le localStorage */ 
+clear.addEventListener("click", function(){
+    localStorage.clear();
+    location.reload();
+});