Nemwel-Boniface · Nemwel-Boniface · Feb 18, 2022 · Feb 16, 2022 · Feb 16, 2022 · Feb 17, 2022
diff --git a/dist/index.html b/dist/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!--font aweome icons links-->
+    <!--font awesome icons links-->
 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -14,18 +14,19 @@
 <body>
     <section class="todolist">
         <div class="todoHeader">
-            <h2>Today's To Do</h2>
+            <h3>Today's To Do</h3>
             <a href="#"><i class="fa fa fa-refresh"></i></a>
         </div>
         <div class="todoForm">
             <form id="form">
-                <input type="text">
-                <button type="submit"><i class="fa-solid fa-arrow-turn-down-left"></i></button>
+                <input type="text" placeholder=" Add your list...">
+                <button type="submit"><i class="fa fa fa-plus"></i></button>
             </form>
         </div>
         <div class="activities">
 
         </div>
+        <button class="btn">Clear all completed</button>
     </section>
 </body>
 </html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,7 @@
 
     <!--font awesome icons links-->
 
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
@@ -19,8 +20,9 @@ <h3>Today's To Do</h3>
         </div>
         <div class="todoForm">
             <form id="form">
-                <input type="text" placeholder=" Add your list...">
-                <button type="submit"><i class="fa fa fa-times"></i></button>
+                <input class="newTask" type="text" placeholder=" Add your list...">
+                <button class="submit" type="submit">&crarr;</button>
+                <!-- <button type="submit"><i class="fa fa fa-plus"></i></button> -->
             </form>
         </div>
         <div class="activities">

diff --git a/src/index.js b/src/index.js
@@ -1,37 +1,87 @@
 import _ from 'lodash'; //eslint-disable-line
 import './style.css';
 
-const tasks = [
-  {
-    description: 'Buy groceries',
-    completed: false,
-    index: 0,
-  },
-  {
-    description: 'Clean the House',
-    completed: true,
-    index: 1,
-  },
-  {
-    description: 'Water the Flowers',
-    completed: true,
-    index: 1,
-  },
-];
-
+let tasks = [];
 const taskWrapper = document.querySelector('.activities');
-function displayTasks() {
-  taskWrapper.innerHTML = '';
-  for (let i = 0; i < tasks.length; i += 1) {
-    taskWrapper.innerHTML += `
-    <form class="atask">
-      <input type="checkbox" id="${tasks[i].index}" name="task" value="task">
-      <label for="${tasks[i].index}">${tasks[i].description}</label>
-      <i class="fa fa fa-times"></i><br>
-    </form>
-    `;
+const newTask = document.querySelector('.newTask');
+const addNewTask = document.querySelector('.submit');
+
+const addToLocalStorage = () => {
+  localStorage.setItem('myTasks', JSON.stringify(tasks));
+};
+
+const getFromLocalStorage = () => {
+  if (localStorage.getItem('myTasks')) {
+    tasks = JSON.parse(localStorage.getItem('myTasks'));
   }
-}
-window.addEventListener('load', () => {
+  return tasks;
+};
+
+const rmvTask = (index) => {
+  const mylocal = getFromLocalStorage();
+  mylocal.splice(index, 1);
+  for (let i = index; i < mylocal.length; i += 1) {
+    mylocal[i].index = mylocal[i].index -= 1; //eslint-disable-line
+  }
+  addToLocalStorage();
+  displayTasks(); //eslint-disable-line
+};
+
+const editTask = (desc, index) => {
+  tasks[index].description = desc;
+  addToLocalStorage();
+};
+
+const displayTasks = () => {
+  taskWrapper.innerHTML = '';
+  const mylocal = getFromLocalStorage();
+
+  mylocal.forEach((tsk) => {
+    const li = document.createElement('li');
+    const checkbox = document.createElement('input');
+    checkbox.setAttribute('type', 'checkbox');
+    if (tasks.checked) {
+      checkbox.setAttribute('checked', 'checked');
+    }
+    checkbox.addEventListener('change', () => onchange(tasks));
+
+    const taskDesc = document.createElement('input');
+    taskDesc.classList.add('todotask');
+    taskDesc.value = tsk.description;
+
+    const deleteTask = document.createElement('i');
+    taskDesc.addEventListener('change', (e) => {
+      e.preventDefault();
+      editTask(e.target.value, tsk.index);
+    });
+    deleteTask.classList.add('fas', 'fa-ellipsis-v');
+    deleteTask.addEventListener('click', () => {
+      rmvTask(tsk.index);
+    });
+
+    li.append(checkbox, taskDesc, deleteTask);
+    taskWrapper.appendChild(li);
+  });
+};
+
+const addToTasks = () => {
+  const lengt = tasks.length;
+  tasks.push({
+    checked: false,
+    description: newTask.value,
+    index: lengt,
+  });
+  newTask.value = '';
+  addToLocalStorage();
+  displayTasks();
+};
+
+addNewTask.addEventListener('click', (e) => {
+  e.preventDefault();
+  addToTasks();
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  getFromLocalStorage();
   displayTasks();
-});
+});
diff --git a/src/style.css b/src/style.css
@@ -48,32 +48,40 @@ body {
   justify-content: space-between;
 }
 
-#form button {
+.submit {
   outline: none;
   border: none;
   margin: auto 6%;
   cursor: pointer;
+  font-size: 25px;
 }
 
-.atask input {
-  margin-right: 15px;
+.activities li {
+  list-style-type: none;
+  padding: 10px 0 10px 20px;
+  position: relative;
+  margin-bottom: 25px;
+  border-bottom: 1px solid #000;
+}
+
+.activities li input {
+  margin-right: 20px;
+  cursor: pointer;
 }
 
-.todoForm form input {
+.activities li .todotask {
   outline: none;
   border: none;
-  padding: 10px;
 }
 
-.atask {
+.activities li .todotask:focus {
+  outline: none;
   border-bottom: 1px solid #000;
-  padding: 20px;
-  display: flex;
 }
 
-.atask i {
+.activities li i {
   position: absolute;
-  right: 11%;
+  right: 9%;
   cursor: pointer;
 }