GloireIrenge · GloireIrenge · Aug 13, 2022 · Aug 12, 2022 · Aug 12, 2022 · Aug 12, 2022
diff --git a/src/Add_remove.js b/src/Add_remove.js
@@ -0,0 +1,36 @@
+const TodoLoad = (todos) => {
+  todos = JSON.parse(localStorage.getItem('todos')) || [];
+  for (let i = 0; i < todos.length; i += 1) {
+    todos[i].index = i + 1;
+  }
+  return todos;
+};
+
+class Todo {
+  constructor(description, index = 0, completed = false) {
+    this.index = index;
+    this.description = description;
+    this.completed = completed;
+  }
+
+  addTodo = (task, todos) => {
+    todos.push(task);
+    localStorage.setItem('todos', JSON.stringify(todos));
+    this.addTodo.id = todos;
+  }
+
+  updateIndex = (arr) => {
+    arr.forEach((elmt, index) => {
+      elmt.id = index + 1;
+    });
+  };
+
+  deleteTodo = (e, todos) => {
+    e.target.parentElement.remove();
+    todos.splice(e.target.parentElement.id, 1);
+    updateIndex(todos);
+    localStorage.setItem('todos', JSON.stringify(todos));
+  }
+}
+
+export { TodoLoad, Todo };
diff --git a/src/index.html b/src/index.html
@@ -2,23 +2,29 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TODO list</title></head>
+    <script src="https://kit.fontawesome.com/f0e9415ee2.js" crossorigin="anonymous"></script>
+    <title>To Do list</title>
+  </head>
   <body class="flex-column">
-    <section class="all  main-container">
-      <div class="container">
+    <section class="all main-container">
+      <div class="box-body container">
         <div class="container-header">
           <h3 class="container-heading">Today's To Do</h3>
+          <i class="fa-solid fa-rotate"></i>
         </div>
-        <div class="input">
-          <input type="text" placeholder="Add to your list..."  id="new-task" class="new-input" />
-          <svg width="16px" height="16px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon">
-            <path d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z" />
-          </svg>
+        <div class="my-input-group input">
+          <input type="text" placeholder="Add to your list..." id="new-task" class="new-input"/>
+          <button type="button" class="buitton-sec">
+              <i class="fa-solid fa-arrow-turn-down-left"></i>
+            <svg width="15px" height="15px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon addTaskBtn" id="addBtn">
+              <path d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z"/>
+            </svg>
+          </button>
         </div>
-        <ul class="TodoList"></ul>
-        <button type="button" class="btn btn-clear">
+        <ul class="tasks-list"></ul>
+        <button type="button" class="btn btn-clear" id="btnClear">
           Clear all completed
         </button>
       </div>

diff --git a/src/index.js b/src/index.js
@@ -1,34 +1,85 @@
 import './style.css';
+import { Todo, TodoLoad } from './Add_remove.js';
 
-const toDo = [
-  {
-    index: 0,
-    description: 'Learn Javascript classes',
-    completed: false,
-  },
-  {
-    index: 1,
-    description: 'make a small project',
-    completed: false,
-  },
-  {
-    index: 2,
-    description: 'Attend Microverse meeting',
-    completed: false,
-  },
-
-];
-
-const AllToDo = document.querySelector('.TodoList');
-const showTodo = (toDo) => {
-  for (let i = 0; i < toDo.length; i += 1) {
-    AllToDo.innerHTML += `<li class="todo" id=${toDo[i].index}>
-    <div class="TodoDesc">
-      <input type="checkbox" name="todo" class="toggle-check" />
-      <span class="description">${toDo[i].description}</span>
+let todos = [];
+
+const MyTodoList = document.querySelector('.tasks-list');
+
+const showTodo = (todos) => {
+  MyTodoList.innerHTML = '';
+  for (let i = 0; i < todos.length; i += 1) {
+    MyTodoList.innerHTML += `<li class="task" id=${i} data-id="${todos[i].index}">
+    <div class="task-desc">
+      <input type="checkbox" name="task" class="toggle-check" />
+      <input class="task-edit" value="${todos[i].description}" disabled autofocus/>
     </div>
+    <i class="fa-solid fa-ellipsis-vertical "></i>
+    <i class="fa-solid fa-trash-can hidden"></i>
   </li>`;
   }
 };
 
-window.addEventListener('DOMContentLoaded', showTodo(toDo));
+MyTodoList.addEventListener('click', (e) => {
+  const task = new Todo();
+  if (e.target.nodeName === 'INPUT') {
+    e.target.parentElement.parentElement.style.backgroundColor = '#ffffa7';
+    e.target.parentElement.parentElement.children[1].style.display = 'none';
+    e.target.parentElement.parentElement.children[2].style.display = 'inline';
+    setTimeout(() => {
+      e.target.parentElement.parentElement.style.backgroundColor = '#fff';
+      e.target.parentElement.parentElement.children[1].style.display = 'inline';
+      e.target.parentElement.parentElement.children[2].style.display = 'none';
+    }, 2000);
+  }
+  if (e.target.classList.contains('hidden')) {
+    task.deleteTodo(e, todos);
+  }
+});
+
+const initAll = (input) => {
+  input.value = '';
+};
+
+const TodoCreate = (input) => {
+  const desc = input.value;
+  const task = new Todo(desc);
+  task.addTodo(task, todos);
+};
+
+const description = document.querySelector('#new-task');
+
+document.querySelector('#addBtn').addEventListener('click', () => {
+  TodoCreate(description);
+  initAll(description);
+  showTodo(todos);
+});
+
+document.querySelector('.input').addEventListener('keypress', (e) => {
+  if (e.key === 'Enter' && (e.target.value)) {
+    TodoCreate(description);
+    initAll(description);
+    showTodo(todos);
+  }
+});
+
+const TodoEdit = (e) => {
+  const editing = e.parentElement.parentElement;
+  const i = editing.id;
+  editing.children[0].children[1].addEventListener('input', () => {
+    const newValue = editing.children[0].children[1].value;
+    editing.children[0].children[1].value = newValue;
+    todos[i].description = newValue;
+    localStorage.setItem('todos', JSON.stringify(todos));
+  });
+};
+
+MyTodoList.addEventListener('click', (e) => {
+  if (e.target.disabled === true) {
+    e.target.disabled = false;
+    e.target.setAttribute('autofocus', true);
+    TodoEdit(e.target);
+  }
+});
+
+todos = TodoLoad();
+showTodo(todos);
diff --git a/src/style.css b/src/style.css
@@ -1,11 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Roboto:wght@400;500;700&display=swap');
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .nav-top {
   background-color: black;
   height: 900px;
@@ -38,6 +32,7 @@ body {
 
 .main-container .container {
   width: 100%;
+  padding: 10px;
 }
 
 .main-container .container .container-header {
@@ -88,6 +83,10 @@ body {
   align-items: center;
 }
 
+input:disabled {
+  border: none;
+}
+
 .main-container .container .TodoList .todo .TodoDesc {
   display: flex;
   align-items: center;
@@ -109,3 +108,19 @@ body {
   border: none;
   padding: 0.5em;
 }
+
+li {
+  list-style: none;
+}
+
+.fa-solid,
+.fas {
+  font-weight: 900;
+  float: right;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}