1
resposta

Algum erro nas imagens

Boa tarde Pessoal! Finalizei todo o curso, com todos os pontos do codigo funcionando, menos 1, as imagens e efeitos do css nao estao aparecendo, por causa disso nao consigo testar algumas coisas. fiz acompanhando as aulas e os codigo esta igual ao do professor, porem nao esta dando o mesmo resultado.

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 cancelar = document.querySelector('.app__form-footer__button--cancel')
const paragrafodescricaoTarefa = document.querySelector('.app__section-active-task-description')
const btnRemoverConcluidas = document.querySelector('#btn-remover-concluidas')
const btnRemoverTodas = document.querySelector('#btn-remover-todas')
let tarefas = JSON.parse(localStorage.getItem('tarefas')) || [] 
let tarefaSelecionada = null /
let liTarefaSelecionada = null 

function atualizarTarefa () {
    localStorage.setItem('tarefas', JSON.stringify(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.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.descricao
    paragrafo.classList.add('app__section-task-list-item-description')
    const botao = document.createElement('button')
    botao.classList.add('app_button-edit')
    botao.onclick = () => { 
        const novaDescricao = prompt("Qual é o novo nome da tarefa?")
        if(novaDescricao){
            paragrafo.textContent = novaDescricao 
            tarefa.descricao = novaDescricao
            atualizarTarefa() 
        }
    }
    const imagemBotao = document.createElement('img')
    imagemBotao.setAttribute('src', '/imagens/edit.png') 
    botao.append(imagemBotao)

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

    if (tarefa.completa){ 
        li.classList.add('app__section-task-list-item-complete') 
        botao.setAttribute('disabled', 'disabled') 
    } else { 
        li.onclick = () => { 
            document.querySelectorAll('.app__section-task-list-item-active') 
                .forEach(elemento => { 
                    elemento.classList.remove('app__section-task-list-item-active')
                })
            if (tarefaSelecionada == tarefa) { 
                paragrafodescricaoTarefa.textContent = '' 
                tarefaSelecionada = null 
                return
            } 
            tarefaSelecionada = tarefa 
            paragrafodescricaoTarefa.textContent = tarefa.descricao
            li.classList.add('app__section-task-list-item-active')
        }
    }
    return li
}
btnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden')
});
const cancelarTarefa = () => {
    textarea.value = ''
    formAdicionarTarefa.classList.add('hidden')
}
cancelar.addEventListener('click', cancelarTarefa)
formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault()
    const tarefa = {
        descricao: textarea.value 
    }
    tarefas.push(tarefa) 
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
    atualizarTarefa()
    textarea.value = ''
    formAdicionarTarefa.classList.add('hidden')
})
tarefas.forEach(tarefa => { 
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
});
document.addEventListener('FocoFinalizado', () => { 
    if (tarefaSelecionada && liTarefaSelecionada) { 
        liTarefaSelecionada.classList.remove('app__section-task-list-item-active') 
        liTarefaSelecionada.classList.add('app__section-task-list-item-complete') 
        liTarefaSelecionada.querySelector('button').setAttribute('disabled', 'disabled') 
        tarefaSelecionada.completa = true 
        atualizarTarefa() 
    }
})
const removerTarefas = (somenteCompletas) => { 
    const seletor = somenteCompletas ? ".app__section-task-list-item-complete" : ".app__section-task-list-item" 
    document.querySelectorAll(seletor).forEach(elemento => { 
        elemento.remove() /
    })
tarefas = somenteCompletas ? tarefas.filter(tarefa => !tarefa.completa) : [] 
atualizarTarefa() 
}
btnAdicionarTarefa.onclick = () => removerTarefas(true)
btnRemoverTodas.onclick = () => removerTarefas(false)
1 resposta

Olá, Cláudia.

Tudo bem?

Tem alguns erros que precisam ser corrigidos. No seu código, no final da linha onde você está declarando a variável let tarefaSelecionada = null tem uma barra (/) a mais causando erro, e na linha onde você chama o método remove(), lá perto do final do código dentro da função removerTarefas() tem essa barra (/) de novo.

Agora para corrigir o CSS das tarefas, você precisa remover o ponto da classe dentro do li.classList.add('.app__section-task-list-item') na função criarElementoTarefa(), não precisa passar o ponto, somente o nome da classe, ficando assim:

function criarElementoTarefa(tarefa) {
    const li = document.createElement('li') 
    li.classList.add('app__section-task-list-item')  // correção nessa linha
    
    //RESTO DO CÓDIGO OMITIDO...

Ajustando isso, ele vai adicionar a classe no elemento de tarefa, quando criar uma nova tarefa corretamente.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.