To do - Vanilla JS

script.js

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



const loadEventListeners = () => {
  form.addEventListener('submit', addTask);
  filter.addEventListener('keyup', filterTasks);
 document.addEventListener("DOMContentLoaded", getTasks);
};

const removeTasks = () => {taskList.innerHTML = '';
 localStorage.clear();                         };

const deleteTask = e => {e.parentElement.parentElement.remove()
 let tasks =  JSON.parse(localStorage.getItem("tasks"));
 let toFind = e.parentElement.parentElement.innerText.replace('delete','')
 let index = tasks.findIndex(el => el ==  toFind);                                 tasks.splice(index, 1);
  localStorage.setItem('tasks', JSON.stringify(tasks));
                        
                        }


const filterTasks = (e) => {
  let text = e.target.value.toLowerCase();
  document.querySelectorAll('.collection-item').forEach(e => {
    const item = e.firstChild.textContent;
    item.toLowerCase().indexOf(text) !== -1 ? e.style.display = 'block' : e.style.display = 'none';
  }) 
}

const storeTask = e => {
  
  
  let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
  tasks.push(e);
  localStorage.setItem('tasks', JSON.stringify(tasks));
  console.log(localStorage);
}

const getTasks = () => {
 
  let tasksins =[];
  let lstor = localStorage.getItem('tasks');
  let parsed = JSON.parse(lstor);
  
  parsed.forEach(e => {
   
  
  const li = document.createElement('li');
  li.className='collection-item';
  li.appendChild(document.createTextNode(e));
  
  
  const link = document.createElement('a');
  link.className = 'delete-item secondary-content';
  link.innerHTML = '<div onclick="deleteTask(this)"><i class="tiny material-icons">delete</i></div>';
  li.appendChild(link);
  
  taskList.appendChild(li);
  })
}

const addTask = e => {
  
  
  const li = document.createElement('li');
  li.className='collection-item';
  li.appendChild(document.createTextNode(taskInput.value));
  
  
  const link = document.createElement('a');
  link.className = 'delete-item secondary-content';
  link.innerHTML = '<div onclick="deleteTask(this)"><i class="tiny material-icons">delete</i></div>';
  li.appendChild(link);
  
  taskList.appendChild(li);
  
  storeTask(taskInput.value);
  
  taskInput.value = '';
  e.preventDefault();
}




loadEventListeners();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

To Do List.html

<div class='containter'>
  <div class='row'>
    <div class='col s12'>
      <div id='main' class='card'>
        <div class='card-content'>
          <span class='card-title'>Task List</span>
          <div class='row'>
            <form id='task-form'>
              <div classs='input-field col s12'>
                <input type='text' name='task' id='task'>
                <label for='task'>New Task</label>
              </div>
              <input type='submit' value='Add task' class='btn'>
            </form>
          </div>
        </div>
        <div class='card-action'>
          <h5 id='task-title'>Tasks</h5>
          <div classs='input-field col s12'>
                <input type='text' name='filter' id='filter'>
                <label for='filter'>Filter Tasks</label>
              </div>
          <ul class='collection'></ul>
          <a href='#' class='clear-tasks btn black' onclick='removeTasks()'>Clear Tasks</a>
        </div>
      </div>
    </div>
  </div>
</div>

to-do-vanilla-js.markdown

To do - Vanilla JS

A Pen by Vasilii V on CodePen.

License.