script.js

function adicionarTarefa(evt) {
  // Evita que a pagina seja recarregada ao enviar o formulario
  evt.preventDefault();

  // Obtem os valores dos inputs
  let descricao = document.getElementById("descricao-input");

  let data = document.getElementById("data-input");

  let feito = document.getElementById("feito-input");

  // Cria a nova tarefa e adiciona a lista
  let novaTarefa = {
    descricao: descricao.value,
    data: data.value,
    feito: feito.checked,
  };
  tarefas.push(novaTarefa);

  popularTabela();
}

function removeElemento(index) {
  // Remove o elemento na posicao index
  tarefas.splice(index, 1);

  // Apos a remocao, limpa a tabela e preenche novamente
  popularTabela();
}

function editarElemento(index) {
  // Exibe os campos de edicao
  // Remove o elemento invisivel da lista de classes do formulario
  formularioEdicao.classList.remove("invisivel");

  let item = tarefas[index];

  // Armazena o indice da edicao para fazer referencia mais tarde
  indiceDaEdicao = index;

  // Pega o elemento de descricao da edicao
  let descricaoInput = document.getElementById("descricao-input-edit");

  // Coloca o valor da descricao da tarefa atual no campo de descricao
  descricaoInput.value = item.descricao;

  // O mesmo para data
  let dataInput = document.getElementById("data-input-edit");
  dataInput.value = item.data;

  // E para o feito
  let feitoInput = document.getElementById("feito-input-edit");
  feitoInput.checked = item.feito;
}

function salvarEdicao(evt) {
  // Evita atualizacao
  evt.preventDefault();

  // Pega o elemento de descricao da edicao
  let descricaoInput = document.getElementById("descricao-input-edit");
  let dataInput = document.getElementById("data-input-edit");
  let feitoInput = document.getElementById("feito-input-edit");

  let novaDescricao = descricaoInput.value;
  let novaData = dataInput.value;
  let novoFeito = feitoInput.checked;

  let novaTarefa = {
    descricao: novaDescricao,
    data: novaData,
    feito: novoFeito,
  };

  // Troca o valor anterior pelo editado
  tarefas[indiceDaEdicao] = novaTarefa;

  // Renderiza a tabela apos a edicao
  popularTabela();

  // Apos edicao, esconde os campos de entrada novamente
  formularioEdicao.classList.add("invisivel");
}

function formataData(data) {
  let dataSeparada = data.split("-");

  let ano = dataSeparada[0];
  let mes = dataSeparada[1];
  let dia = dataSeparada[2];

  let dataFormatada = dia + "/" + mes + "/" + ano;

  return dataFormatada;
}

function popularTabela() {
  // Referencia ao corpo da tabela
  let conteudo = document.getElementById("conteudo");

  // Limpa a tabela antes de popular
  conteudo.innerHTML = "";

  // Grava os elementos na memoria
  localStorage.setItem("tarefas", JSON.stringify(tarefas));

  // Popula a tabela
  for (let i = 0; i < tarefas.length; i++) {
    let tarefa = tarefas[i];

    let linha = document.createElement("tr");
    conteudo.appendChild(linha);

    let posicao = document.createElement("th");
    linha.appendChild(posicao);
    posicao.innerText = i + 1;

    let descricao = document.createElement("td");
    linha.appendChild(descricao);
    descricao.innerText = tarefa.descricao;

    let data = document.createElement("td");
    linha.appendChild(data);
    data.innerText = formataData(tarefa.data);

    let feito = document.createElement("td");
    linha.appendChild(feito);

    let input = document.createElement("input");
    input.type = "checkbox";
    input.checked = tarefa.feito;
    feito.appendChild(input);

    let acoes = document.createElement("td");
    linha.appendChild(acoes);

    let button = document.createElement("button");
    button.className = "btn btn-danger";
    button.innerHTML = '<i class="fas fa-trash-alt"></i>';
    button.onclick = function () {
      removeElemento(i);
    };
    acoes.appendChild(button);

    let botaoEdicao = document.createElement("button");
    botaoEdicao.className = "btn btn-info";
    botaoEdicao.innerHTML = '<i class="fas fa-edit"></i>';
    botaoEdicao.onclick = function () {
      editarElemento(i);
    };
    acoes.appendChild(botaoEdicao);
  }
}

// Adiciona a funcao criada ao formulario
let formulario = document.getElementById("formulario");
formulario.onsubmit = adicionarTarefa;

let formularioEdicao = document.getElementById("formulario-edit");
formularioEdicao.onsubmit = salvarEdicao;
let indiceDaEdicao = null;

let botaoCancelarEdicao = document.getElementById("cancelar-edicao");
botaoCancelarEdicao.onclick = function () {
  formularioEdicao.classList.add("invisivel");
};

// Lista de tarefas a fazer recuperada da memoria do navegador
let tabelaSalva = localStorage.getItem("tarefas");

// Quando utilizamos o ||, pegamos a primeira opcao, se existir, ou a segunda opcao
let tarefas = JSON.parse(tabelaSalva) || [];

// Popula a tabela inicialmente
popularTabela();