accesibleprogramacion · icalexm · May 14, 2024 · May 14, 2024 · May 15, 2024 · May 15, 2024
diff --git a/README.md b/README.md
@@ -1,5 +1,11 @@
-# to-do
-Lista de tareas en JavaScript
-Creado en este tutorial: https://youtu.be/URk526D9mls
+# lista-compra
 
-<img width="422" alt="Screen Shot 2021-09-11 at 15 04 40" src="https://user-images.githubusercontent.com/26985597/132961606-c021fb6d-6fa2-4d44-bf61-deb2ac2ac9f0.png">
+Lista de la compra en JavaScript
+
+Permite entrar los productos.
+
+Con `+` y `-` permite incrementar o decrementar la cantidad.
+
+Si la cantidad llega a `-1`, pregunta si queres borrar el producto, si dices que si lo elimina.
+
+La lista de la compra queda en la memoria local del terminal que uses
diff --git a/index.html b/index.html
@@ -1,32 +1,48 @@
 <!DOCTYPE html>
-<html lang="en">
-<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">
+<html lang="es">
+  <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>Lista de tareas</title>
-    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;400;900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="styles.css">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:wght@100;400;900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
     <script src="script.js" type="text/javascript" defer></script>
-</head>
-<body>
+  </head>
+  <body>
     <div class="list roundBorder">
-        <div class="date">
-            <div class="dateRight">
-                <div id="dateNumber"></div>
-                <div>
-                    <div id="dateMonth"></div>
-                    <div id="dateYear"></div>
-                </div>
-            </div>
-            <div id="dateText"></div>
+      <div class="date">
+        <div class="dateRight">
+          <div id="dateNumber"></div>
+          <div>
+            <div id="dateMonth"></div>
+            <div id="dateYear"></div>
+          </div>
         </div>
-        <form onsubmit="addNewTask(event)" >
-            <input type="text" name="taskText" autocomplete="off" placeholder="Nueva tarea" class="roundBorder">
-            <button type="submit" class="addTaskButton">+</button>
-            <button type="button" class="orderButton roundBorder" onclick="renderOrderedTasks()">Ordenar</button>
-        </form>
-        <div id="tasksContainer"></div>
+        <div id="dateText"></div>
+      </div>
+      <form onsubmit="addNewTask(event)">
+        <input
+          type="text"
+          name="taskText"
+          autocomplete="off"
+          placeholder="Nuevo producto"
+          class="roundBorder"
+          id="nomProd"
+        />
+        <button type="submit" class="addTaskButton">+</button>
+        <button
+          type="button"
+          class="orderButton roundBorder"
+          onclick="renderOrderedTasks()"
+        >
+          Ordenar
+        </button>
+      </form>
+      <div id="tasksContainer"></div>
     </div>
-</body>
-</html>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -1,47 +1,252 @@
+// Lineas compra
+const lis_id = 0,
+  lis_cant = 1,
+  lis_desc = 2,
+  lis_off = 3;
+let lista = localStorage.getItem("listaComra") || "",
+  ultId = parseInt(localStorage.getItem("ultimoId")) || 0;
 // Info date
-const dateNumber = document.getElementById('dateNumber');
-const dateText = document.getElementById('dateText');
-const dateMonth = document.getElementById('dateMonth');
-const dateYear = document.getElementById('dateYear');
+const dateNumber = document.getElementById("dateNumber");
+const dateText = document.getElementById("dateText");
+const dateMonth = document.getElementById("dateMonth");
+const dateYear = document.getElementById("dateYear");
 
 // Tasks Container
-const tasksContainer = document.getElementById('tasksContainer');
+const tasksContainer = document.getElementById("tasksContainer");
 
 const setDate = () => {
-    const date = new Date();
-    dateNumber.textContent = date.toLocaleString('es', { day: 'numeric' });
-    dateText.textContent = date.toLocaleString('es', { weekday: 'long' });
-    dateMonth.textContent = date.toLocaleString('es', { month: 'short' });
-    dateYear.textContent = date.toLocaleString('es', { year: 'numeric' });
+  const date = new Date();
+  dateNumber.textContent = date.toLocaleString("es", { day: "numeric" });
+  dateText.textContent = date.toLocaleString("es", { weekday: "long" });
+  dateMonth.textContent = date.toLocaleString("es", { month: "short" });
+  dateYear.textContent = date.toLocaleString("es", { year: "numeric" });
 };
 
-const addNewTask = event => {
-    event.preventDefault();
-    const { value } = event.target.taskText;
-    if(!value) return;
-    const task = document.createElement('div');
-    task.classList.add('task', 'roundBorder');
-    task.addEventListener('click', changeTaskState)
-    task.textContent = value;
-    tasksContainer.prepend(task);
-    event.target.reset();
+const addNewTask = (event) => {
+  event.preventDefault();
+
+  const { value } = event.target.taskText;
+  if (!value) return;
+
+  ultId += 1;
+
+  const str = lista;
+  lista = `id_${ultId},1,${value},0`;
+  if (str.length > 0) {
+    lista += "|" + str;
+  }
+
+  //lista = [{ cant: 1, desc: value }];
+  // localStorage.setItem("listaComra", lista);
+  guardarLista();
+  creaLinea(ultId, value, 1, 0);
+  event.target.reset();
+};
+function creaLinea(id, value, cant, anulado) {
+  let strId = "Id_" + id;
+  const task = document.createElement("article");
+  task.classList.add("task", "roundBorder");
+  task.setAttribute("data-id", strId);
+  if (anulado === "1") task.classList.add("doneTask");
+  //task.addEventListener("click", changeTaskState);
+  // task.textContent = value;
+  // tasksContainer.prepend(task);
+
+  const task1 = document.createElement("div");
+  task1.classList.add("taskComent", "roundBorder");
+  task1.setAttribute("data-id", strId);
+  if (anulado === "1") task1.classList.add("done");
+
+  //task1.addEventListener("click", changeTaskState);
+  task1.textContent = value;
+  task.prepend(task1);
+
+  const task2 = document.createElement("div");
+  task2.classList.add("taskNum", "roundBorder");
+  if (anulado === "1") task2.classList.add("done");
+  task2.textContent = cant;
+  task.prepend(task2);
+
+  const taskModNum = document.createElement("article");
+  taskModNum.classList.add("taskModNum", "roundBorder");
+  task.prepend(taskModNum);
+
+  const taskSum = document.createElement("div");
+  taskSum.classList.add("taskSum", "roundBorder");
+  if (anulado === "1") taskSum.classList.add("done");
+  //taskSum.addEventListener("click", sumaNum);
+  taskSum.textContent = "+";
+  taskModNum.prepend(taskSum);
+
+  const taskRes = document.createElement("div");
+  taskRes.classList.add("taskRes", "roundBorder");
+  if (anulado === "1") taskRes.classList.add("done");
+  //taskRes.addEventListener("click", restaNum);
+  taskRes.textContent = "-";
+  taskModNum.prepend(taskRes);
+
+  tasksContainer.prepend(task);
+}
+
+const changeTaskState = (event) => {
+  event.target.classList.toggle("done");
+  const $task = event.target.closest(".task");
+  $task.querySelector(".taskNum").classList.toggle("done");
+  $task.querySelector(".taskRes").classList.toggle("done");
+  $task.querySelector(".taskSum").classList.toggle("done");
+  $task.classList.toggle("doneTask");
+  let lis = lista.split("|");
+  let i = obternerLinea($task, lis);
+  let lmod = lis[i].split(",");
+  lmod[lis_off] = $task.classList.contains("doneTask") ? 1 : 0;
+
+  lis[i] = lmod.toString();
+  lista = lis.join("|");
+  // localStorage.setItem("listaComra", lista);
+  guardarLista();
 };
 
-const changeTaskState = event => {
-    event.target.classList.toggle('done');
+const sumaNum = (event) => {
+  ModificaNum(event, 1);
+};
+const restaNum = (event) => {
+  ModificaNum(event, -1);
 };
+function obternerLinea(task, lis) {
+  let id = task.dataset.id.toLowerCase();
 
-const order = () => {
-    const done = [];
-    const toDo = [];
-    tasksContainer.childNodes.forEach( el => {
-        el.classList.contains('done') ? done.push(el) : toDo.push(el)
-    })
-    return [...toDo, ...done];
+  return lis.indexOf(
+    lis.find(
+      (elemento) =>
+        elemento.toLowerCase().indexOf(
+          id + ","
+          // `,${task.querySelector(".taskComent").innerText.toLowerCase()},`
+        ) !== -1
+    )
+  );
+}
+function ModificaNum(event, valor) {
+  const $task = event.target.closest(".task"),
+    $num = $task.querySelector(".taskNum");
+  if ($task.classList.contains("doneTask")) {
+    return;
+  }
+  let cant = parseInt($num.innerText) + valor;
+
+  let lis = lista.split("|");
+  let i = obternerLinea($task, lis);
+
+  if (cant < 0) {
+    if (window.confirm("¿Confirma borrar definitvament el producto?")) {
+      // console.log("Posicion", i);
+      if (i > -1) {
+        lis.splice(i, 1);
+        lista = lis.join("|");
+        // localStorage.setItem("listaComra", lista);
+        guardarLista();
+        $task.remove();
+        return;
+      }
+    } else {
+      cant = 0;
+      return;
+    }
+  }
+  $num.innerHTML = cant;
+  let lmod = lis[i].split(",");
+  lmod[lis_cant] = cant;
+
+  lis[i] = lmod.toString();
+  lista = lis.join("|");
+
+  // localStorage.setItem("listaComra", lista);
+  guardarLista();
 }
 
+const order = () => {
+  const done = [];
+  const toDo = [];
+  // tasksContainer.childNodes.forEach((el) => {
+  //   el.classList.contains("doneTask") ? done.push(el) : toDo.push(el);
+  // });
+  let lis = lista.split("|").sort();
+  lis.forEach((el) => {
+    el.split(",")[lis_off] === "0" ? done.push(el) : toDo.push(el);
+  });
+  console.log(done, toDo);
+  return [...toDo, ...done];
+};
+
 const renderOrderedTasks = () => {
-    order().forEach(el => tasksContainer.appendChild(el))
+  // order().forEach((el) => {
+  //   // console.log(el);
+  //   tasksContainer.appendChild(el);
+  // });
+  nomProd.value = "";
+  lista = order().join("|");
+  guardarLista();
+  tasksContainer.innerHTML = "";
+  pintaLista();
+};
+
+function pintaLista() {
+  if (lista.length === 0) return;
+  lista.split("|").forEach((el) => {
+    // console.log(el);
+    const item = el.split(",");
+    creaLinea(
+      item[lis_id].split("_")[1],
+      item[lis_desc],
+      item[lis_cant],
+      item[lis_off]
+    );
+  });
 }
 
-setDate();
+function guardarLista() {
+  localStorage.setItem("listaComra", lista);
+  localStorage.setItem("ultimoId", ultId);
+}
+
+setDate();
+pintaLista();
+
+document.addEventListener("click", (e) => {
+  // console.log("clicK:", "e.target:", e.target, "this:", this);
+  if (e.target.classList.contains("taskComent")) changeTaskState(e);
+  else if (e.target.classList.contains("taskSum")) sumaNum(e);
+  else if (e.target.classList.contains("taskRes")) restaNum(e);
+});
+
+nomProd.oninput = function (ev) {
+  console.log(nomProd.value, ev.target, this);
+  const tasks = document.querySelectorAll("article.task");
+  const searchTerm = nomProd.value.toLowerCase();
+
+  console.log(tasks);
+
+  resetTask(tasks, true);
+  searchTerm.split(" ").forEach((search) => {
+    if (search.length > 0) {
+      tasks.forEach((task) => {
+        const comen = task
+          .querySelector(".taskComent")
+          .textContent.toLowerCase();
+        console.log(comen, search, comen.includes(search));
+        if (comen.includes(search)) {
+          task.classList.remove("none");
+        }
+      });
+    }
+  });
+};
+
+function resetTask(tasks, esNone) {
+  tasks.forEach((task) => {
+    if (esNone) {
+      task.classList.add("none");
+    } else {
+      task.classList.remove("none");
+    }
+  });
+}