app.js

//Selectors
const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');
const todoList = document.querySelector('.todo-list');


//Event Listeners
//document.addEventListener('DOMContentLoaded',getTodos);
window.addEventListener('load',getTodos);
todoButton.addEventListener('click',addTodo);
todoList.addEventListener('click',deletecheck);


//functions

function addTodo(event)
{
  event.preventDefault();
  //Div
  const todoDiv = document.createElement('div');
  todoDiv.classList.add("todo");
  //LI
  const newTodo = document.createElement('li');
  newTodo.innerText=todoInput.value;
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);
  //add to local storage
  saveLocalTodos(todoInput.value);
  //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
  todoList.appendChild(todoDiv);
  //clear input
  todoInput.value="";

}
function deletecheck(e){
  const item=e.target;
  if(item.classList[0]==='trash-btn')
  {
    const todo=item.parentElement;
    removeLocalTodos(todo);
    todo.remove();
  }
  if(item.classList[0]==='complete-btn'){
    const todo=item.parentElement;
    todo.classList.toggle("completed"); 
  }
}
function saveLocalTodos(todo){
  let todos;
  if(localStorage.getItem('todos')===null){
    todos=[];
  }else{
   todos=JSON.parse(localStorage.getItem('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(todo){
  //Div
  const todoDiv = document.createElement('div');
  todoDiv.classList.add("todo");
  //LI
  const newTodo = document.createElement('li');
  newTodo.innerText=todo;
  newTodo.classList.add('todo-item');
  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
  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)); 
}