GeekyHacks · GeekyHacks · Jul 21, 2023 · Jul 20, 2023 · Jul 20, 2023 · Jul 21, 2023
diff --git a/README.md b/README.md
@@ -14,7 +14,8 @@
 # 📗 Table of Contents
 
 - [📖 About the Project](#about-project)
- - [live Demo](#live-demo)
+  - [🚀 Live Demo](#live-demo)
+
 
   - [🛠 Built With](#built-with)
     - [Key Features](#key-features)
@@ -36,8 +37,12 @@
 **ToDo list<e**
 the project is about adding todo list that can be add, removed, marked, and edit. It will include mainly JS code and sass or styling.
 
+
+## 🚀 Live Demo <a name="live-demo"></a>
+
+- [Live Demo Link](https://geekyhacks.github.io/ToDoList/dist/.)
+
 # 📖 ToDo list< <a name="live-demo"></a>
-[Live Demo](https://geekyhacks.github.io/ToDoList/)
 
 ## 🛠 Built With <a name="built-with">HTML, CSS and JavaScript</a>
 

diff --git a/dist/bundle55df76a2dc1d3425b0a3.js → dist/bundle0a4d8217c7af776c267d.js b/dist/bundle55df76a2dc1d3425b0a3.js → dist/bundle0a4d8217c7af776c267d.js
diff --git a/dist/bundle0a4d8217c7af776c267d.js.map b/dist/bundle0a4d8217c7af776c267d.js.map
diff --git a/dist/bundle55df76a2dc1d3425b0a3.js.map b/dist/bundle55df76a2dc1d3425b0a3.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="bundle0a4d8217c7af776c267d.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, recallChecked } 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.recallChecked();
+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,27 @@
-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;
 };
+
+
+
+var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};
+var $checkboxes = $("#checkbox-container :checkbox");
+
+$checkboxes.on("change", function(){
+  $checkboxes.each(function(){
+    checkboxValues[this.id] = this.checked;
+  });
+  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
+});
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} autocomplete="off" />
         <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,70 @@
+import { taskarr } from './addTask.js';
+import { saveData } from './userInput.js';
+
+// const checkboxValues = localStorage.getItem('checkboxValues') || {};
+
+export class TaskStatus {
+  static updateStatus = () => {
+    const checkB = document.querySelectorAll('.checkB');
+
+    checkB.forEach((checkbox, i) => {
+      checkbox.addEventListener('change', () => {
+        if (!taskarr[i].completed) {
+          taskarr[i].completed = true;
+
+          // checkboxValues[checkbox.key] = checkbox.checked;
+          // localStorage.setItem('checkboxValues', JSON.stringify(checkboxValues));
+          saveData(taskarr);
+          // recallChecked();
+        } else {
+          taskarr[i].completed = false;
+          checkbox['checked'] = false;
+          saveData(taskarr);
+          // checkbox.nextElementSibling.classList.remove('completed');
+        }
+      });
+    });
+  };
+
+  // static recallChecked = () => {
+  //   [...checkboxValues.children].forEach((child) => {
+  //     console.log(child);
+  //     const checkbox = document.getElementById(key);
+  //     checkbox['checked'] = value;
+  //   });
+
+  //   Object.entries(checkboxValues).forEach(([key, value]) => {
+  //     const checkbox = document.getElementById(key);
+  //     checkbox['checked'] = value;
+  //     console.log(key + ' - ' + value);
+  //   });
+  // };
+
+  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();
+    });
+  };
+}
+
+// export const recallChecked = () => {
+//   Object.entries(checkboxValues).forEach((key, value) => {
+//     const checkbox = document.getElementById(key);
+//     checkbox['checked'] = value;
+//   });
+// };
+// const checkboxValues = localStorage.getItem("checkboxValues") || {};
+// const checkboxes = document.querySelectorAll(".checkbox");
+
+// checkboxes.forEach((checkbox) => {
+//   checkbox.addEventListener("change", () => {
+//     checkboxValues[checkbox.id] = checkbox.checked;
+//     localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
+//   });
+// });
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
diff --git a/src/styles/sass/main.sass b/src/styles/sass/main.sass
@@ -5,41 +5,48 @@
 body
     @include columnFlex
     justify-content: center
-    align-items: center
+    align-items: stretch
     background-color: $primary-color
     font-family: 'Roboto', sans-serif
     white-space: pre-wrap
     word-wrap: break-word
+    padding: 3rem
     // height: 100vh
 img
     transition: all 0.5s
 .container
     @include columnFlex
-    justify-items: center
+    justify-content: center
     align-items: stretch
     background-color: $secondary-color
     border-radius: 4px
     box-shadow: $box-shadow
-    margin-top: 1rem
-    padding: 15px 5px
+    padding: 10px
     text-align: left
-    width: 92%
+    // width: 92%
 #tasksList
     @include columnFlex
-    gap: .3rem
+    gap: .2rem
 div, li
     @include rowFlex
     justify-content: space-between
     align-items: center
     border-radius: 4px
+    // margin-top: .3rem
     border: 0
-    padding: .3rem
-    gap: .2rem
+    padding: .1rem
+    gap: .1rem
+    margin-bottom: .25rem
+li
+    justify-content: space-evenly
+    margin-bottom: 0
+    padding: .5rem
+
 #newTask
     &::focus
         background: $inputColor
 div
-    gap: .5rem
+    gap: .2rem
     h1
         @include smlInterH3
 
@@ -51,8 +58,9 @@ input
     border-radius: 4px
 
 #userInput
-    height: 2rem
+    height: 1.5rem
     width: 100%
+    // margin-bottom: .3rem
 
 #addItem
     flex: .9
@@ -66,13 +74,16 @@ input
     transition: all 0.5s
 
 #recyclImg, #addBtn,#dotsImg,#trash
-    height: 1.7rem
-    width: 1.5rem
+    height: 1rem
+    width: 1rem
     opacity: .5
     &:hover
         opacity: 1
+#trash
+    visibility: visible
 #clearAllBtn
     @include button
+    margin-top: .3rem
 
     &:active
         transform: scale(0.98)
@@ -82,4 +93,6 @@ input
 .edit
     background-color: $inputColor
 .hide
-    display: none
+    visibility: hidden
+.show
+    visibility: visible