2
respostas

[Bug] Não está alterando o status do botao apos finalizar a tarefa

// Seleção de elementos do DOM
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 paragrafoDescricaoTarefa = document.querySelector('.app__section-active-task-description');

// Recupera tarefas do localStorage ou inicializa um array vazio
const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];
let tarefaSelecionada = null;
let litarefaSelecionada = null;

// Função para atualizar tarefas no localStorage
function atualizarTarefas() {
    localStorage.setItem('tarefas', JSON.stringify(tarefas));
}

// Função para criar o elemento de tarefa (li)
function criarElementoTarefa(tarefa) {
    const li = document.createElement('li');
    li.classList.add('app__section-task-list-item');

    const svg = criarIconeStatus();
    const paragrafo = criarDescricaoTarefa(tarefa.descricao);
    const botao = criarBotaoEditar(paragrafo, tarefa);

    configurarEventosTarefa(li, paragrafo, tarefa);

    li.append(svg, paragrafo, botao);
    return li;
}

// Cria o ícone de status para a tarefa
function criarIconeStatus() {
    const svg = document.createElement('svg');
    svg.classList.add('app__section-task-icon-status');
    svg.setAttribute('width', '24');
    svg.setAttribute('height', '24');
    svg.setAttribute('viewBox', '0 0 24 24');
    svg.setAttribute('fill', 'none');
    svg.innerHTML = `
        <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>
    `;
    return svg;
}

// Cria a descrição da tarefa
function criarDescricaoTarefa(descricao) {
    const paragrafo = document.createElement('p');
    paragrafo.classList.add('app__section-task-list-item-description');
    paragrafo.textContent = descricao;
    return paragrafo;
}

// Cria o botão de editar tarefa
function criarBotaoEditar(paragrafo, tarefa) {
    const botao = document.createElement('button');
    botao.classList.add('app_button-edit');
    const imagemBotao = document.createElement('img');
    imagemBotao.setAttribute('src', '/imagens/edit.png');
    botao.append(imagemBotao);

    botao.addEventListener('click', () => {
        const novaDescricao = prompt("Qual é o novo nome da tarefa?");
        if (novaDescricao) {
            paragrafo.textContent = novaDescricao;
            tarefa.descricao = novaDescricao;
            atualizarTarefas();
        }
    });

    return botao;
}

// Configura os eventos para a tarefa
function configurarEventosTarefa(li, paragrafo, tarefa) {
    li.addEventListener('click', () => {
        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;
        } else {
            paragrafoDescricaoTarefa.textContent = tarefa.descricao;
            li.classList.add('app__section-task-list-item-active');
            tarefaSelecionada = tarefa;
            litarefaSelecionada = li;
        }
    });
}

// Mostra ou esconde o formulário ao clicar no botão de adicionar tarefa
btnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden');
});

// Adiciona nova tarefa ao array e ao DOM, e atualiza o localStorage
formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();

    const tarefa = { descricao: textarea.value };
    tarefas.push(tarefa);

    const elementoTarefa = criarElementoTarefa(tarefa);
    ulTarefas.append(elementoTarefa);
    atualizarTarefas();

    textarea.value = '';
    formAdicionarTarefa.classList.add('hidden');
});

// Adiciona ao DOM as tarefas salvas no localStorage
tarefas.forEach(tarefa => {
    const elementoTarefa = criarElementoTarefa(tarefa);
    ulTarefas.append(elementoTarefa);
});

// Evento personalizado para tratar quando o foco é finalizado
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', 'disable');
    }
});

2 respostas

Muito bom.

Oi Jardel!

Do que testei aqui funcionou normalmente,peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Fico no aguardo e à disposição