GeekyHacks · GeekyHacks · Jul 21, 2023 · Jul 20, 2023 · Jul 20, 2023 · Jul 21, 2023
diff --git a/dist/bundle55df76a2dc1d3425b0a3.js.map b/dist/bundle55df76a2dc1d3425b0a3.js.map
diff --git a/dist/bundle55df76a2dc1d3425b0a3.js → dist/bundlea93a76c53fd4b8a66377.js b/dist/bundle55df76a2dc1d3425b0a3.js → dist/bundlea93a76c53fd4b8a66377.js
diff --git a/dist/bundlea93a76c53fd4b8a66377.js.map b/dist/bundlea93a76c53fd4b8a66377.js.map
diff --git a/dist/index.html b/dist/index.html
@@ -7,7 +7,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
 
     <title>%= htmlWebpackPlugin.options.title %</title>
-  <script defer src="bundle55df76a2dc1d3425b0a3.js"></script></head>
+  <script defer src="bundlea93a76c53fd4b8a66377.js"></script></head>
   <body>
     <main class="container">
       <div>

diff --git a/src/index.js b/src/index.js
@@ -6,16 +6,19 @@ import { addTask, taskarr } from './modules/addTask.js';
 import renderList from './modules/displayList.js';
 import './assets/three-dots.png';
 import removeItems from './modules/removeItems.js';
+import TaskStatus from './modules/updateStatus.js';
+import { saveData } from './modules/userInput.js';
 
 const userInput = document.querySelector('#userInput');
 const addBtn = document.querySelector('#addBtn');
-const clearAllBtn = document.querySelector('#clearAllBtn');
 
-// to reload the page this should fix the double rendering issue
+renderList(taskarr);
 const reloading = () => {
   setInterval(document.location.reload());
 };
 
+TaskStatus.updateStatus();
+TaskStatus.clearCompleted();
 // add tasks
 addBtn.addEventListener('click', (event) => {
   const description = userInput.value;
@@ -38,35 +41,29 @@ userInput.addEventListener('keypress', (event) => {
     addTask(description, index);
     reloading();
     event.preventDefault();
-    localStorage.setItem('taskarr', JSON.stringify(taskarr));
+    saveData(taskarr);
+
     return taskarr;
   }
   return taskarr;
 });
-renderList(taskarr);
 
 // remove tasks
 document.addEventListener('click', (event) => {
-  const dotsTrash = document.querySelectorAll('.dotsImg');
+  const dotsTrash = document.querySelectorAll('.trash');
+
   dotsTrash.forEach((icon, index) => {
     if (event.target === icon) {
       removeItems(taskarr, index);
-      localStorage.setItem('taskarr', JSON.stringify(taskarr));
+      saveData(taskarr);
 
       // this will sort out the index when removing Items
       const sortedArr = [...taskarr];
-      index = taskarr.length;
+      index = taskarr.length + 1;
       sortedArr.sort((a, b) => a.index - b.index);
 
-      reloading(sortedArr);
-      localStorage.setItem('taskarr', JSON.stringify(sortedArr));
+      reloading(taskarr);
+      saveData(sortedArr);
     }
   });
-  // return event.preventDefault();
-});
-
-// // this will clear all localstorage elements too, just temproary
-clearAllBtn.addEventListener('click', () => {
-  window.localStorage.clear();
-  reloading();
 });
diff --git a/src/modules/addTask.js b/src/modules/addTask.js
@@ -1,16 +1,15 @@
-import TaskObject from './userInput.js';
-// import { renderList } from './displayList.js';
+import { TaskObject, saveData } from './userInput.js';
 
 export const taskarr = JSON.parse(localStorage.getItem('taskarr')) || [];
 
 export const addTask = (description, index) => {
   index = taskarr.length;
   const newTask = new TaskObject(description, index);
   taskarr.push(newTask);
-  // this will sort out the  user input index
+  // // this will sort out the  user input index
   const sortedArr = [...taskarr];
   sortedArr.sort((a, b) => a.index - b.index);
 
-  localStorage.setItem('taskarr', JSON.stringify(sortedArr));
+  saveData(taskarr);
   return taskarr;
 };
diff --git a/src/modules/displayList.js b/src/modules/displayList.js
@@ -1,8 +1,6 @@
 import { taskarr } from './addTask.js';
-// import update from './update.js';
-// export const dots = '../assets/three-dots.png';
 import '../assets/trash-can.png';
-// const trashCan = './assets/trash-can.png';
+import { saveData } from './userInput.js';
 
 export const tasksList = document.querySelector('#tasksList');
 
@@ -13,10 +11,10 @@ export default (task) => {
 
     if (taskarr[i].description !== '') {
       task.innerHTML = `
-        <input type="checkbox" id="checkB" ${taskarr[i].completed} />
+        <input type="checkbox" class="checkB" ${taskarr[i].completed} />
         <input class="newTasks" type="text" id="addItem" value="${taskarr[i].description}" />
         <img class="trash" id="trash"  src='./assets/trash-can.png' alt="" />
-
+        <img class="dotsImg" id="dotsImg"  src='./assets/three-dots.png' alt="" />
         `;
     }
     if (taskarr[i].description === '') {
@@ -26,7 +24,13 @@ export default (task) => {
     tasksList.appendChild(task);
   }
 
+  // const lis = document.querySelectorAll('.newTask');
   const taskDescription = document.querySelectorAll('#addItem');
+  const dots = document.querySelectorAll('.dotsImg');
+
+  dots.forEach((dot) => {
+    dot.classList.add('hide');
+  });
 
   taskDescription.forEach((task, index) => {
     task.addEventListener('click', (event) => {
@@ -43,7 +47,7 @@ export default (task) => {
     // the trick is with input
     task.addEventListener('input', () => {
       taskarr[index].description = task.value;
-      localStorage.setItem('taskarr', JSON.stringify(taskarr));
+      saveData(taskarr);
     });
   });
 };
diff --git a/src/modules/sortingFunction.js b/src/modules/sortingFunction.js
@@ -0,0 +1,6 @@
+const sortArray = (array) => {
+  // this will sort out the index when removing Items
+  const sortedArr = [...array];
+  sortedArr.sort((a, b) => a.index - b.index);
+};
+export default { sortArray };
diff --git a/src/modules/updateStatus.js b/src/modules/updateStatus.js
@@ -0,0 +1,34 @@
+import { taskarr } from './addTask.js';
+import { saveData } from './userInput.js';
+
+export default class TaskStatus {
+  static updateStatus = () => {
+    const checkB = document.querySelectorAll('.checkB');
+
+    checkB.forEach((checkbox, i) => {
+      checkbox.addEventListener('change', () => {
+        if (!taskarr[i].completed) {
+          taskarr[i].completed = true;
+          saveData(taskarr);
+          checkbox.nextElementSibling.classList.add('completed');
+        } else {
+          taskarr[i].completed = false;
+          saveData(taskarr);
+          checkbox.nextElementSibling.classList.remove('completed');
+        }
+      });
+    });
+  };
+
+  static clearCompleted = () => {
+    const clearAllBtn = document.querySelector('#clearAllBtn');
+    clearAllBtn.addEventListener('click', () => {
+      const notCompleted = taskarr.filter((task) => task.completed !== true);
+      notCompleted.forEach((e, i) => {
+        e.index = i + 1;
+      });
+      saveData(notCompleted);
+      window.location.reload();
+    });
+  };
+}
diff --git a/src/modules/userInput.js b/src/modules/userInput.js
@@ -1,7 +1,11 @@
-export default class TaskObject {
+export class TaskObject {
   constructor(description, index) {
     this.description = description;
     this.completed = false;
     this.index = index;
   }
 }
+
+export const saveData = (data) => {
+  localStorage.setItem('taskarr', JSON.stringify(data));
+};
diff --git a/src/styles/sass/global.sass b/src/styles/sass/global.sass
@@ -21,14 +21,14 @@ $box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1)
     border-radius: 2px
     font-family: $InterFont
     font-weight: 500
-    font-size: 1rem
+    font-size: .8rem
     letter-spacing: 0.001em
     word-spacing: normal
     background-color: $primary-color
     color: $secondary-color
     border: 0
     box-shadow: $box-shadow
-    padding: 10px
+    padding: 5px
     cursor: pointer
     text-align: center
 
@@ -55,12 +55,12 @@ $box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1)
     letter-spacing: -0.0225rem
 @mixin smlInterH3
     color: black
-    font-size: 1.2rem
+    font-size: .8rem
     font-family: $InterFont
     font-weight: 600
     letter-spacing: 0.0025rem
 @mixin smlInterP
     color: black
-    font-size: .9rem
+    font-size: .6rem
     font-family: $InterFont
     letter-spacing: 0.0125rem