Javascript Filter Not Working Correctly

1

The filter only starts working when I type the second character in.

You need to add a few tasks and try to filter

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <title>Task List</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
         <!-- Compiled and minified JavaScript -->
         <div class="container">
             <div class="row">
                 <div class="col s12">
                     <div id="id" class="card">
                         <div class="card-content">
                             <span class="card-title">
                                 Task List</span>
                                 <div class="ro">
                                     <form id="task-form">
                                         <div class="input-field col s12">
                                             <input type="text" name="task" id="task">
                                             <label for="task"> New Task</label>
                                         </div>
                                         <input type="submit" name="Add Task" class="btn">
                                     </form>
                                 </div>
                                 <div class="card-actiont">
                                    <h5 class="task-title">Tasks</h5>
                                    <div class="input-field col s12">
                                       <input type="text" name="filter" id="filter">
                                       <label for="filter"> filter Task</label>
                                   </div>
                                   <ul class="collection"></ul>
                                   <a href="#" class="clear-tasks btn black">Clear Tasks</a>
                                </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="app.js" async defer></script>
    </body>
</html>

JS

// Define Var

const form = document.querySelector('#task-form');
const tasklist = document.querySelector('.collection');
const clearBtn = document.querySelector('.clear-tasks');
const filter = document.querySelector('#filter');
const taskInput = document.querySelector('#task');

// Load All event Listers
loadAllEventListeners();

// Load All event Listers
function loadAllEventListeners(){
    form.addEventListener('submit', addTask);
    //remove task event
    tasklist.addEventListener('click', removeTask);
    //clear task
    clearBtn.addEventListener('click', clearTask);
    filter.addEventListener('keydown', filterTask);
}

// Add Task
function addTask(e){
    if(taskInput.value ===''){
        alert('Add a Task')
    }else{
        //Create li element
    const li = document.createElement('li');
    //add class
    li.className= 'collection-item';
    //create text node and append toli
    li.appendChild(document.createTextNode(taskInput.value));
    //create new link elemet
    const link = document.createElement('a');
    //add class
    link.className = 'delete-item secondary-content';
    // addicon html
    link.innerHTML='<i class= "fa fa-remove"></i>';
    //append the link to li
    li.appendChild(link);
    // append li to ul
    tasklist.appendChild(li);
   //clear input
   taskInput.value = '';
    e.preventDefault();
    }

    
}

//remove task
function removeTask(e){
    if(e.target.parentElement.classList.contains('delete-item')){
        if(confirm('Are you sure'))
        e.target.parentElement.parentElement.remove();
    }    
}

function clearTask(){
    tasklist.innerHTML = '';
}

function filterTask(e){
    const text = e.target.value.toLowerCase();

    document.querySelectorAll('.collection-item').forEach
    (function(task){
        const item = task.firstChild.textContent;
        if(item.toLowerCase().indexOf(text) != -1){
            task.style.display = 'block';
        } else{
            task.style.display='none';
        }

    });
}
2

Hey there,

would be awesome to see a minimal example in codepen, so that we can fiddle around with it.

3