<div class="container">
  <header class="text-center text-light my-4">
    <h1 class="mb-4">Awesome Todo List</h1>
    <form class="search">
      <input class="form-control m-auto" type="text" name="searh" placeholder="search todos" />
    </form>
  </header>
  <ul class="list-group todos mx-auto text-light">
    <li class="list-group-item d-flex justify-content-between align-items-center"
      <span>
        play mario kart
      </span>
      <i class="far fa-trash-alt delete"></i>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center"
      <span>
        defeat ganon in zelda
      </span>
      <i class="far fa-trash-alt delete"></i>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center"
      <span>
        make a veggie pie
      </span>
      <i class="far fa-trash-alt delete"></i>
    </li>
  </ul>
  
  <form class="add text-center my-4">
    <label class="text-light">
      Add a new todo...
    </label>
    <input class="form-control m-auto" type="text" name="add" />
  </form>
</div>

body {
  background: #352f5b
}

.container {
  max-width: 400px;
}
input[type=text],
input[type=text]:focus{
  color: #fff;
  border: none;
  background: rgba(0,0,0,0.2);
  max-width: 400px;
}
.todos li {
  background: #423a6f;
}
.delete{
  cursor: pointer;
}
.filtered{
  display: none !important;
}

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();
  const todo = addForm.add.value.trim();
  
  if(todo.length) {
    generateTemplate(todo);
    addForm.reset();
  }
});

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

const filterTodos = (term) => {
  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'));
};

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