Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Problema com a lista de tarefas

Meu código parece estar com alguns problemas na area da lista de tarefas, mas não estou conseguindo descobrir o que é

const btnAddTarefa = document.querySelector('.app__button--add-task')
const formAddTarefa = document.querySelector('.app__form-add-task')
const textarea = document.querySelector('.app__form-textarea')
const ulTarefas = document.querySelector('.app__section-task-list')

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

function criarElementoTarefa(tarefa) {
    const li = document.createElement('li')
    li.classList.add('app__section-task-icon-status')

    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.textContent = tarefa.descrição
    paragrafo.classList.add('app__section-task-list-item-description')

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

    const imgBotao = document.createElement('img')

    imgBotao.setAttribute('src', './imagens/edit.png')
    botao.append(imgBotao)

    li.append(svg)
    li.append(paragrafo)
    li.append(botao)

    return li
}

btnAddTarefa.addEventListener('click', () => {
    formAddTarefa.classList.toggle('hidden')
})

formAddTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descrição: textarea.value
    }
    tarefas.push(tarefa)
    ulTarefas.append(elementoTarefa)
    const elementoTarefa = criarElementoTarefa(tarefa)
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
    textarea.value = ''
    formAddTarefa.classList.add('hidden')
})

tarefas.forEach(tarefa => {
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
})

Segue o drive com o arquivo do projeto: https://drive.google.com/drive/folders/1ucNC1AiO1Q0CLrmfADZedbgsmkvQy4j_?usp=sharing

2 respostas
solução!

Bom dia Ana Luiza, espero que esteja tudo certo!!

Olhei o código e percebi 2 errinhos, o primeiro que adiciona o mesmo nome de class do SVG (app__section-task-list-item) na li e outro que usa a const elementoTarefa antes de declará-la, deixei o código corrigido e comentado.

// encontrar tarefa

const btnAddTarefa = document.querySelector('.app__button--add-task')
const formAddTarefa = document.querySelector('.app__form-add-task')
const textarea = document.querySelector('.app__form-textarea')
const ulTarefas = document.querySelector('.app__section-task-list')

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

function criarElementoTarefa(tarefa) {
    const li = document.createElement('li')
    li.classList.add('app__section-task-list-item') // O Nome estava o mesmo do SVG 

    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.textContent = tarefa.descrição
    paragrafo.classList.add('app__section-task-list-item-description')

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

    const imgBotao = document.createElement('img')

    imgBotao.setAttribute('src', './imagens/edit.png')
    botao.append(imgBotao)

    li.append(svg)
    li.append(paragrafo)
    li.append(botao)

    return li
}

btnAddTarefa.addEventListener('click', () => {
    formAddTarefa.classList.toggle('hidden')
})
formAddTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descrição: textarea.value
    }
    tarefas.push(tarefa)
    const elementoTarefa = criarElementoTarefa(tarefa) // A const elementoTarefa estava sendo chamado antes de ser declarada
    ulTarefas.append(elementoTarefa)
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
    textarea.value = ''
    formAddTarefa.classList.add('hidden')
})

tarefas.forEach(tarefa => {
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
})

Muito obrigada, Matheus, agr ficou certinho