added a seperate bar to look all the completed and uncompleted one and added some css to it . Even added to store in local storage

Author: CodingWithError

app.js

@@ -2,10 +2,13 @@
 const todoInput = document.querySelector('.todo-input');
 const todoButton = document.querySelector('.todo-button');
 const todoList = document.querySelector('.todo-list');
+const filterOption = document.querySelector('.filter-todo');
 
 // Event Listeners
+document.addEventListener('DOMContentLoaded', getTodos);
 todoButton.addEventListener('click', addTodo);
 todoList.addEventListener('click', deleteCheck);
+filterOption.addEventListener('change', filterTodo); // Changed from 'click' to 'change'
 
 // Functions
 function addTodo(event) {
@@ -21,6 +24,9 @@ function addTodo(event) {
   newToDo.innerText = todoInput.value;
   todoDiv.appendChild(newToDo);
 
+  //add todo to local storage
+  saveLocalTodos(todoInput.value);
+  
   // Check Mark button
   const completedButton = document.createElement('button');
   completedButton.innerHTML = '<i class="fas fa-check"></i>';
@@ -49,7 +55,7 @@ function deleteCheck(e){
 
     //fallout animation
     todo.classList.add('fall');
-    
+    removeLocalTodos(todo);
     //wait for a brief moment before removing the todo
     setTimeout(function() {
       todo.remove();
@@ -62,3 +68,89 @@ function deleteCheck(e){
     todo.classList.toggle('completed');
   }
 }
+
+function filterTodo(e){
+  const todos = todoList.childNodes;
+  todos.forEach(function(todo){
+    switch(e.target.value){
+      case "all":
+        todo.style.display='flex';
+        break;
+      case "completed":
+        if(todo.classList.contains('completed')){
+          todo.style.display='flex';
+        }else{
+          todo.style.display='none';
+        }
+        break;
+      case "uncompleted":
+        if(!todo.classList.contains('completed')){
+          todo.style.display='flex';
+        }else{
+          todo.style.display='none';
+        }
+        break;
+    }
+  });
+}
+
+function saveLocalTodos(todo){
+  let todos;
+  if(localStorage.getItem('todos')===null){
+    todos=[];
+  }
+  else{
+    todos = JSON.parse(localStorage.getItem('todos')); // assign the parsed data back to todos
+  }
+  todos.push(todo);
+  localStorage.setItem('todos', JSON.stringify(todos));
+}
+
+function getTodos(){
+  let todos;
+  if(localStorage.getItem('todos')===null){
+    todos=[];
+  } 
+  else{
+    todos=JSON.parse(localStorage.getItem('todos'));
+  }
+  todos.forEach(function(todoItem){ // rename the parameter to todoItem
+    // Create a div in HTML
+    const todoDiv = document.createElement('div');
+    todoDiv.classList.add('todo');
+
+    // Now adding LI
+    const newToDo = document.createElement('li');
+    newToDo.classList.add('todo-item');
+    newToDo.innerText = todoItem; // use todoItem here
+    todoDiv.appendChild(newToDo);
+
+    // Check Mark button
+    const completedButton = document.createElement('button');
+    completedButton.innerHTML = '<i class="fas fa-check"></i>';
+    completedButton.classList.add('complete-btn');
+    todoDiv.appendChild(completedButton);
+
+    // Trash button
+    const trashButton = document.createElement('button');
+    trashButton.innerHTML = '<i class="fas fa-trash"></i>';
+    trashButton.classList.add('trash-btn');
+    todoDiv.appendChild(trashButton);
+
+    // Append to List
+    todoList.appendChild(todoDiv);
+  }); 
+}
+
+function removeLocalTodos(todo){
+  let todos;
+  if(localStorage.getItem('todos')===null){
+    todos=[];
+  } 
+  else{
+    todos=JSON.parse(localStorage.getItem('todos'));
+  }
+  const todoIndex=todo.children[0].innerText;
+  todos.splice(todos.indexOf(todoIndex),1);
+  localStorage.setItem('todos', JSON.stringify(todos));
+}

index.html

@@ -19,6 +19,13 @@ <h1>Your Todo-List</h1>
     <button class="todo-button" type="submit">
       <i class="fas fa-plus-square"></i>
     </button>
+    <div class="select">
+      <select name="todos" class="filter-todo">
+        <option value="all">All</option>
+        <option value="completed">Completed</option>
+        <option value="uncompleted">Uncompleted</option>
+      </select>
+    </div>
   </form>
   <div class="todo-container">
     <ul class="todo-list"></ul>

style.css

@@ -1,3 +1,5 @@
+
+
 *{
   margin: 0;
   padding: 0;
@@ -106,3 +108,44 @@ form button:hover {
   opacity: 0;
   transition: transform 0.7s ease, opacity 0.7s ease;
 }
+
+select{
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  border: none;
+  transition: background-color 0.10s ease;
+}
+
+.select{
+  margin: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+
+select{
+  color:black;
+  width: 10rem;
+  cursor: pointer;
+  padding: 1rem;
+}
+
+.select::after{
+  content: "\25BC";
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  pointer-events: none;
+  transition: background-color 0.7s ease;
+}
+
+.select:hover::after{
+  color: white;
+  background-color: black;
+}
+select:hover{
+  background-color: black;
+  color:white
+}