index.js

const addForm=document.querySelector('.add');
const list=document.querySelector('.todos');
const search=document.querySelector('.search input');

const generateTemplate= todo =>{
    const html= `
    <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>${todo}</span>
        <i class="far fa-trash-alt delete"></i>
    </li>
    `;
    list.innerHTML+=html;
}

addForm.addEventListener('submit', e =>{
    e.preventDefault(); //sayfa yenilenmez.

    const todo=addForm.add.value.trim(); //trim boşlukları kaldırır.
    // console.log(todo);
    if(todo.length > 0){
        generateTemplate(todo);
        addForm.reset(); //inputta girilen değeri sonrasında  sıfırlar.
    }
    
})

list.addEventListener('click', e=>{
    if(e.target.classList.contains('delete')){
       e.target.parentElement.remove();
    }
})

const filterTodos = term =>{
    // console.log(term);
    // consolo.log(Array.from(list.children));
    
    Array.from(list.children)
    .filter(todo => !todo.textContent.toLowerCase().includes(term))
    .forEach(todo => todo.classList.add('filtered'));

    Array.from(list.children)
    .filter(todo => !todo.textContent.toLowerCase().includes(term))
    .forEach(todo => todo.classList.remove('filtered'));
}

search.addEventListener('keyup',()=>{
    const term=search.value.trim().toLowerCase();
    filterTodos(term);
})