app.js

//Selector 
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('click', filterTodo);

//Functions 
function addTodo (event) {
    //Prevent form from submiting
    event.preventDefault();
    //Todo div 
    const todoDiv = document.createElement('div');
    todoDiv.classList.add('todo');
    //Create LI
    const newTodo = document.createElement('li');
    newTodo.innerText = todoInput.value;
    newTodo.classList.add('todo-item');    
    todoDiv.appendChild(newTodo);
    //Add to do 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);
    //Check 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);
    //clear Todo Input value
    todoInput.value = '';
};

//Delete todo
function deleteCheck(e){
    const item = e.target;
    //Delete todo
    if (item.classList[0] === 'trash-btn') {
        const todo = item.parentElement;
        //Animation
        todo.classList.add('fall');
        removeLocalTodos(todo);
        todo.addEventListener('transitionend', function (){
            todo.remove();
        });
    };

    //Check mark
    if (item.classList[0] === 'complete-btn') {
        const todo = item.parentElement;
        todo.classList.toggle('completed');
    };
};


//Filter todos
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;        
        }
    });
};

//Save todos to local storage
function saveLocalTodos (todo){
    //Check if todos already exsist
    let todos;
    if (localStorage.getItem('todos') === null){
        todos = [];    
    } else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    todos.push(todo);
    localStorage.setItem('todos', JSON.stringify(todos));
};

//Get to dos from local storage
function getTodos () {
    //Check if todos already exsist
    let todos;
    if (localStorage.getItem('todos') === null){
        todos = [];    
    } else {
        todos = JSON.parse(localStorage.getItem('todos'));
    }
    todos.forEach(function(todo){
        //Todo div 
    const todoDiv = document.createElement('div');
    todoDiv.classList.add('todo');
    //Create 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);
    //Check 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){
     //Check if todos already exsist
     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));
};