// 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');
}
});