campos20

Untitled

Nov 16th, 2020
98
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function adicionarTarefa(evt) {
  2.   // Evita que a pagina seja recarregada ao enviar o formulario
  3.   evt.preventDefault();
  4.  
  5.   // Obtem os valores dos inputs
  6.   let descricao = document.getElementById("descricao-input");
  7.  
  8.   let data = document.getElementById("data-input");
  9.  
  10.   let feito = document.getElementById("feito-input");
  11.  
  12.   // Cria a nova tarefa e adiciona a lista
  13.   let novaTarefa = {
  14.     descricao: descricao.value,
  15.     data: data.value,
  16.     feito: feito.checked,
  17.   };
  18.   tarefas.push(novaTarefa);
  19.  
  20.   popularTabela();
  21. }
  22.  
  23. function removeElemento(index) {
  24.   // Remove o elemento na posicao index
  25.   tarefas.splice(index, 1);
  26.  
  27.   // Apos a remocao, limpa a tabela e preenche novamente
  28.   popularTabela();
  29. }
  30.  
  31. function editarElemento(index) {
  32.   let item = tarefas[index];
  33.   console.log(item);
  34.  
  35.   // Pega o elemento de descricao da edicao
  36.   let descricaoInput = document.getElementById("descricao-input-edit");
  37.  
  38.   // Coloca o valor da descricao da tarefa atual no campo de descricao
  39.   descricaoInput.value = item.descricao;
  40.  
  41.   // O mesmo para data
  42.   let dataInput = document.getElementById("data-input-edit");
  43.   dataInput.value = item.data;
  44.  
  45.   // E para o feito
  46.   let feitoInput = document.getElementById("feito-input-edit");
  47.   feitoInput.checked = item.feito;
  48. }
  49.  
  50. function salvarEdicao(evt) {
  51.   // Evita atualizacao
  52.   evt.preventDefault();
  53.  
  54.   console.log("Parabéns, você editou!");
  55. }
  56.  
  57. function formataData(data) {
  58.   let dataSeparada = data.split("-");
  59.  
  60.   let ano = dataSeparada[0];
  61.   let mes = dataSeparada[1];
  62.   let dia = dataSeparada[2];
  63.  
  64.   let dataFormatada = dia + "/" + mes + "/" + ano;
  65.  
  66.   return dataFormatada;
  67. }
  68.  
  69. function popularTabela() {
  70.   // Referencia ao corpo da tabela
  71.   let conteudo = document.getElementById("conteudo");
  72.  
  73.   // Limpa a tabela antes de popular
  74.   conteudo.innerHTML = "";
  75.  
  76.   // Grava os elementos na memoria
  77.   localStorage.setItem("tarefas", JSON.stringify(tarefas));
  78.  
  79.   // Popula a tabela
  80.   for (let i = 0; i < tarefas.length; i++) {
  81.     let tarefa = tarefas[i];
  82.  
  83.     let linha = document.createElement("tr");
  84.     conteudo.appendChild(linha);
  85.  
  86.     let posicao = document.createElement("th");
  87.     linha.appendChild(posicao);
  88.     posicao.innerText = i + 1;
  89.  
  90.     let descricao = document.createElement("td");
  91.     linha.appendChild(descricao);
  92.     descricao.innerText = tarefa.descricao;
  93.  
  94.     let data = document.createElement("td");
  95.     linha.appendChild(data);
  96.     data.innerText = formataData(tarefa.data);
  97.  
  98.     let feito = document.createElement("td");
  99.     linha.appendChild(feito);
  100.  
  101.     let input = document.createElement("input");
  102.     input.type = "checkbox";
  103.     input.checked = tarefa.feito;
  104.     feito.appendChild(input);
  105.  
  106.     let acoes = document.createElement("td");
  107.     linha.appendChild(acoes);
  108.  
  109.     let button = document.createElement("button");
  110.     button.className = "btn btn-danger";
  111.     button.innerHTML = '<i class="fas fa-trash-alt"></i>';
  112.     button.onclick = function () {
  113.       removeElemento(i);
  114.     };
  115.     acoes.appendChild(button);
  116.  
  117.     let botaoEdicao = document.createElement("button");
  118.     botaoEdicao.className = "btn btn-info";
  119.     botaoEdicao.innerHTML = '<i class="fas fa-edit"></i>';
  120.     botaoEdicao.onclick = function () {
  121.       editarElemento(i);
  122.     };
  123.     acoes.appendChild(botaoEdicao);
  124.   }
  125. }
  126.  
  127. // Adiciona a funcao criada ao formulario
  128. let formulario = document.getElementById("formulario");
  129. formulario.onsubmit = adicionarTarefa;
  130.  
  131. let formularioEdicao = document.getElementById("formulario-edit");
  132. formularioEdicao.onsubmit = salvarEdicao;
  133.  
  134. // Lista de tarefas a fazer recuperada da memoria do navegador
  135. let tabelaSalva = localStorage.getItem("tarefas");
  136.  
  137. // Quando utilizamos o ||, pegamos a primeira opcao, se existir, ou a segunda opcao
  138. let tarefas = JSON.parse(tabelaSalva) || [];
  139.  
  140. // Popula a tabela inicialmente
  141. popularTabela();
  142.  
Add Comment
Please, Sign In to add comment