Javascript Filter Not Working Correctly

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

You need to add a few tasks and try to filter


<!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]-->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="" 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="">
        <!--[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>
         <!-- 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>
                                         <input type="submit" name="Add Task" class="btn">
                                 <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>
                                   <ul class="collection"></ul>
                                   <a href="#" class="clear-tasks btn black">Clear Tasks</a>
    <script src="" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src=""></script>
    <script src="app.js" async defer></script>


// 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

// 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')
        //Create li element
    const li = document.createElement('li');
    //add class
    li.className= 'collection-item';
    //create text node and append toli
    //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
    // append li to ul
   //clear input
   taskInput.value = '';


//remove task
function removeTask(e){
        if(confirm('Are you sure'));

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

function filterTask(e){
    const text =;

        const item = task.firstChild.textContent;
        if(item.toLowerCase().indexOf(text) != -1){
   = 'block';
        } else{


Hey there,

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