Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Dúvida] Não aparece nada quando clico na "Lista de tarefas"

Eu clico diversas vezes no botão de Lista de tarefas, só que ele não abre, olhei diversas vezes, mas não consigo ver o erro.

const btnAdicionarTarefa = document.querySelector('.app__button--add-task')
const formAdicionarTarefa = 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')

    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.1710L19.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.descricao
    paragrafo.classList.add('app__section-task-list-item-description')

    const botao = document.createElement('button')
    const imagemBotao = document.createElement('img')
    imagemBotao.setAttribute('src', '/Fokus-projeto-base/imagens/edit.png')
    botao.append(imagemBotao)

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

    return li
}

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

formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descricao: textarea.value
    }

    tarefas.push(tarefa)
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
})

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

Olá, Karoll!!!

Pelo trecho enviado, não encontrei nenhum problema na lógica do evento que abre e fecha o formulário:

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

Se o botão "Lista de tarefas" não está exibindo nada, vale conferir alguns pontos:

  • Se os seletores .app__button--add-task e .app__form-add-task correspondem exatamente aos elementos do HTML.
  • Se existe algum erro aparecendo no console do navegador (F12 > Console).
  • Se a classe hidden está definida corretamente no CSS.
  • Se o JavaScript está sendo carregado após os elementos HTML ou utilizando defer.

Também notei alguns possíveis erros na criação do SVG, como class="=app__section-task-icon-status" e atributos com aspas fora do padrão ("width=24"), que podem gerar comportamentos inesperados.

Se possível, compartilhe também o trecho do HTML relacionado ao botão e ao formulário, além de uma captura do console do navegador. Assim ficará mais fácil identificar a causa do problema.