Merge pull request #4 from Suzi216/interactive-list

TO-DO Iterative-list
Suzi216 · Aug 13, 2022 · 282d174 · 282d174
2 parents 5dd784a + 421328f
commit 282d174
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 13 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en" dir="ltr"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>To-do-list</title><script src="../dist/main.js" defer="defer"></script><script src="https://use.fontawesome.com/0b80aea469.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script defer="defer" src="main.js"></script></head><body><div class="d-flex p-3 w-50 border border-secondary justify-content-start flex-column align-content-start align-items-start flex-wrap"><h1>Today's To Do</h1><input id="fname" class="input w-75" name="fname" placeholder="Addd to your list..."><br><ul id="lists" class="d-flex flex-column w-75 p-0"></ul></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></body></html>
+<!doctype html><html lang="en" dir="ltr"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>To-do-list</title><script src="../dist/main.js" defer="defer"></script><script src="https://use.fontawesome.com/0b80aea469.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script defer="defer" src="main.js"></script></head><body><div class="d-flex p-3 w-50 border border-secondary justify-content-start flex-column align-content-start align-items-start flex-wrap"><h1>Today's To Do</h1><input id="fname" class="input w-75" name="fname" placeholder="Addd to your list..."><br><ul id="lists" class="d-flex flex-column w-75 p-0"></ul><p id="out" class="align-self-center"><u>Clear All the completed</u></p></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></body></html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/src/index.html b/src/index.html
@@ -15,6 +15,7 @@ <h1>Today's To Do </h1>
       <input type="text" id="fname" class="input w-75" name="fname" placeholder="Addd to your list..."><br>
       <ul id="lists" class="d-flex flex-column w-75 p-0 ">
       </ul>
+      <p id="out" class="align-self-center"> <u>Clear All the completed </u></p>
     </div>
 
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,9 @@
 import './style.css';
 import add from './modulus/addlist.js';
-import { input, list } from './modulus/getelements.js';
+import { input, list, out } from './modulus/getelements.js';
 import remove from './modulus/remove.js';
 import display from './modulus/display.js';
+import deleteAll from './modulus/deleteAll';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Add a TODO
@@ -22,5 +23,9 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  out.addEventListener('click', () => {
+    deleteAll();
+  });
+
   display();
 });
diff --git a/src/modulus/completechange.js b/src/modulus/completechange.js
@@ -0,0 +1,31 @@
+// Edit task discription
+
+const complete = (check, id, input) => {
+  let arr = [];
+
+  const listArrStr = localStorage.getItem('ls');
+  arr = JSON.parse(listArrStr);
+
+  if (check === true) {
+    input.style.textDecoration = 'line-through';
+    const updateTask = arr.filter((item) => {
+      if (item.index === id) {
+        item.complete = true;
+      }
+      return item;
+    });
+    localStorage.setItem('ls', JSON.stringify(updateTask));
+  } else {
+    input.style.textDecoration = 'none';
+    const updateTask = arr.filter((item) => {
+      if (item.index === id) {
+        item.complete = false;
+      }
+      return item;
+    });
+    localStorage.setItem('ls', JSON.stringify(updateTask));
+  }
+  // display();
+};
+
+export default complete;
diff --git a/src/modulus/deleteAll.js b/src/modulus/deleteAll.js
@@ -0,0 +1,27 @@
+import { list } from './getelements.js';
+import display from './display.js';
+
+const deleteAll = () => {
+  let listArr = [];
+  const listArrStr = localStorage.getItem('ls');
+  listArr = JSON.parse(listArrStr);
+
+  for (let length = listArr.length - 1; length >= 0; length -= 1) {
+    if (listArr[length].complete === true) {
+      listArr.splice(length, 1);
+    }
+  }
+  // Updated index
+  const updateData = listArr.filter((updatedIndex, index) => {
+    if (updatedIndex.index !== index) {
+      updatedIndex.index = index;
+    }
+    return updatedIndex;
+  });
+  localStorage.setItem('ls', JSON.stringify(updateData));
+  const str = '';
+  list.innerHTML = str;
+  display();
+};
+
+export default deleteAll;
diff --git a/src/modulus/display.js b/src/modulus/display.js
@@ -1,6 +1,7 @@
-/* eslint-disable */ 
+/* eslint-disable */
 import edit from "./editD.js";
 import { list } from "./getelements.js";
+import complete from './completechange.js';
 let arr = [];
 const display = () => {
   if (localStorage.getItem("ls") === null) {
@@ -33,6 +34,15 @@ const display = () => {
         edit(input.value, n.index);
       }
     });
+    checkbox.addEventListener("click", (e) => {
+        let check=checkbox.checked;
+        // console.log(indexOf(e.target));
+        console.log(check);
+
+        complete(check,n.index,input);
+    });
+
+
   });
 };
 

diff --git a/src/modulus/editD.js b/src/modulus/editD.js
@@ -1,13 +1,13 @@
-/* eslint-disable */ 
+/* eslint-disable */
 // Edit task discription
-import display from "./display.js";
-import { list } from "./getelements.js";
+import display from './display.js';
+import { list } from './getelements.js';
 
 const edit = (txtchange, id) => {
   let arr = [];
-  let str = "";
+  let str = '';
 
-  const listArrStr = localStorage.getItem("ls");
+  const listArrStr = localStorage.getItem('ls');
   arr = JSON.parse(listArrStr);
 
   const updateTask = arr.filter((item) => {
@@ -17,9 +17,9 @@ const edit = (txtchange, id) => {
     return item;
   });
 
-  localStorage.setItem("ls", JSON.stringify(updateTask));
+  localStorage.setItem('ls', JSON.stringify(updateTask));
 
-  str = "";
+  str = '';
   list.innerHTML = str;
   display();
 };

diff --git a/src/modulus/getelements.js b/src/modulus/getelements.js
@@ -1,4 +1,4 @@
 const list = document.getElementById('lists');
 const input = document.querySelector('.input');
-
-export { list, input };
+const out = document.getElementById('out');
+export { list, input, out };