[Sugestão] Criando uma função para anexar o Li na lista

Boa noite! Nessa aula percebemos que há repetição de código com objetivo de anexar o o item da lista na lista de tarefas.

const elementoTarefa = adicionarElementoTarefa(tarefa)
ulTarefas.append(elementoTarefa);

Como sabemos, repetição de código não é uma boa prática. Sendo assim, fica melhor criar uma função para chama-la sempre que quisermos adicionar um item da lista na lista.

Segue minha solução.

const btnAdicionarTarefa = document.querySelector('.app__button--add-task');
const formAdicionarTarefa = document.querySelector('.app__form-add-task');
const textarea = document.querySelector('textarea');
const ulTarefas = document.querySelector('.app__section-task-list');

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];
console.log(tarefas)

function adicionarElementoTarefa(tarefa) {
    const li = document.createElement('li'); 
    li.classList.add('app__section-task-list-item');

    const svg = document.createElement('svg');
    svg.innerHTML = `
        <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#01080E"></path>
        </svg>
    `
    
    const paragrafo = document.createElement('p');
    paragrafo.classList.add('app__section-task-list-item-description');
    paragrafo.innerText = tarefa.descricao;

    const botao = document.createElement('button');
    botao.classList.add('app_button-edit');

    const imagemTarefa = document.createElement('img');
    imagemTarefa.setAttribute('src', './imagens/edit.png');

    botao.append(imagemTarefa);
    li.append(svg, paragrafo, botao);

    return li;
}

function anexaTarefaNaLista (tarefa){
    const elementoTarefa = adicionarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa);
    return;
}

btnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden');
})

formAdicionarTarefa.addEventListener('submit', function(evento){
    evento.preventDefault();
    const tarefa = {
        descricao: textarea.value
    }
    tarefas.push(tarefa);
    anexaTarefaNaLista(tarefa);
    textarea.value = '';
    formAdicionarTarefa.classList.toggle('hidden');
    localStorage.setItem('tarefas', JSON.stringify(tarefas).trim());
})

tarefas.forEach(tarefa => {
    anexaTarefaNaLista(tarefa);
});