Todo list /filter todos

Hey everyone. I have created a todo list and trying to filter my completed and uncompleted todos using html select, I’m actually starting my coding adventure and I’m stack at this point. Anyone able to help me please. this is what I did so far, all works except todoFilter:

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

//Event Listeners
todoButton.addEventListener('click', addTodo);
todoList.addEventListener('click', deleteCheck);
filterTodo.addEventListener('click', todoFilter);
//Functions
function addTodo (e){
    //Prevent form from submitting
    e.preventDefault()
    //Creating todoDiv
    const todoDiv = document.createElement('div');
    todoDiv.setAttribute('class','todo');
    todoList.append(todoDiv);
    //Creating newTodo li
    const newTodo=document.createElement('li');
    newTodo.innerText=todoInput.value;
    newTodo.classList.add('todo-item');
    todoDiv.appendChild(newTodo);
    //Check mark buttons
    const completedButton= document.createElement('button');
    completedButton.innerHTML= `<img class="btn-img" src="  https://pic.onlinewebfonts.com/svg/img_447789.png "  alt=""> `
    completedButton.classList.add('completedBtn');
    todoDiv.appendChild(completedButton);
    //Trash mark buttons
    const trashButton= document.createElement('button');
    trashButton.innerHTML= `<img class="btnTrash-img" src=" https://pic.onlinewebfonts.com/svg/img_411751.png"  alt=""> `
    trashButton.classList.add('trashBtn');
    todoDiv.appendChild(trashButton);
    //Clear todo input
     todoInput.value=""
}
function deleteCheck(e){
    const item=e.target 
    if(item.classList[0]==='trashBtn'){
        const todo=item.parentElement
        //Animation
        todo.classList.add('fall')
        //deleting element 
        todo.addEventListener('transitionend', () => {
            todo.remove()
          })
        
    }
    if(item.classList[0]==='completedBtn'){
        const todo=item.parentElement
        todo.classList.toggle('completed');
    }

}
    function todoFilter(e) {
        const todos=todoList.childNodes
        todos.forEach(function(todo){
            if(e.target.value==="all"){
                todo.style.display="flex"
            }else if(todo.classList.contains('completed')){
                todo.style.display= "flex"
            }else if(!todo.classList.contains('completed')){
                todo.style.display="none"
            }
        })
    }

 <header>
        <h1>Sandra's Todo List</h1>
    </header>
    <form>
        <input type="text" class="todo-input">
        <button class="todo-button">
            <img src="https://pics.freeicons.io/uploads/icons/png/6540698631554126213-512.png"  alt="">
        </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="container">
        <ul class="todo-list">


        </ul>
    </div>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.