Módulo concluído com código diferente mas com o mesmo resultado

Fiz um pouco diferente, porém o resultado foi satisfatório. Apenas incluí um botão de check quando um item for concluído e um botão de lixeira se o usuário quiser remover o item da lista. Para ambos, utilizei a biblioteca de ícones que o Font Awesome disponibiliza.

const form = document.querySelector('.form');
const input = document.querySelector('.form-input');
const button = document.querySelector('.form-button');
const list = document.querySelector('.list');


// adicionar item na lista

const gerarTemplate = item => {
  const html = `
  <li class="task">
    <p class="content">
      ${item}
    </p>
    <i class="fas fa-check check"></i>
    <i class="far fa-trash-alt delete"></i>
  </li>
  `
list.innerHTML += html;
};

button.addEventListener('click', e => {
  e.preventDefault();
  const novoItem = input.value.trim();
  if (novoItem.length) {
    gerarTemplate(novoItem);
    form.reset();
  }
});

// deletar item

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

// concluir item

list.addEventListener('click', e => {
  if (e.target.classList.contains('check')){
    e.target.parentElement.style.backgroundColor = 'green';
    e.target.remove();
  }
})