Cześć.
Mam problem z dokończeniem programiku - to do app.
Dodawanie i usuwanie zadań mi działa. Wyszukiwanie mi działa do momentu gdy wpisuje coś w input z klasą search. Jeśli zaczynam kasować coś z inputa lista pasujących tasków nie pojawia się na nowo. Muszę coś chyba zmienić w funkcji searchTask by przy kasowaniu znaków z inputa odświeżała się lista zadań ale nie wiem co. Poniżej przedstawiam kod. Ktoś pomoże?
const toDoList = [];
const form = document.querySelector(‘form’);
const ul = document.querySelector(‘ul’);
const taskNumber = document.querySelector(‘h1 span’);
const listItems = document.getElementsByClassName(‘task’);
const input = document.querySelector(‘input’);
const inputSearch = document.querySelector(‘input.search’);
// const inputSearch = document.getElementsByClassName(‘search’);
const removeTask = (e) => {
e.target.parentNode.remove();
const index = e.target.parentNode.dataset.key;
toDoList.splice(index, 1)
console.log(toDoList);
taskNumber.textContent = listItems.length;
renderList();
}
const addTask = (e) => {
e.preventDefault()
const titleTask = input.value;
if (titleTask === “”) return;
const task = document.createElement(‘li’);
task.className = ‘task’;
task.innerHTML = titleTask + " Usuń";
toDoList.push(task)
renderList()
ul.appendChild(task);
input.value = “”;
const liItems = document.querySelectorAll(‘li.task’).length;
taskNumber.textContent = listItems.length;
task.querySelector(‘button’).addEventListener(‘click’, removeTask);
}
const renderList = () => {
ul.textContent = “”;
toDoList.forEach((toDoElement, key) => {
toDoElement.dataset.key = key;
ul.appendChild(toDoElement);
})
}
const searchTask = (e) => {
const searchText = e.target.value.toLowerCase()
let tasks = […listItems];
console.log(tasks);
tasks = tasks.filter(li => li.textContent.toLowerCase().includes(searchText))
console.log(tasks);
ul.textContent = “”;
tasks.forEach(li => ul.appendChild(li));
}
form.addEventListener(‘submit’, addTask);
inputSearch.addEventListener(‘input’, searchTask)