Como construir um aplicativo básico de lista de tarefas pendentes usando JavaScript
O Document Object Model (DOM) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de uma página da web. Você pode acessar todos os elementos DOM no site e criar, ler, atualizar e excluir (CRUD) dinamicamente usando JavaScript.
Este artigo explicará como você pode executar operações CRUD em uma lista de tarefas usando JavaScript e manipulação de DOM. Esperamos que você conheça os fundamentos de HTML e JavaScript antes de ler este artigo.
Compreendendo a manipulação básica de DOM
Vejamos um exemplo simples:
<button id=”submit”>Submit</button>
<script>
const submitButton = document.getElementById(“submit”);
submitButton.addEventListener(“click”, ()=>{
alert(“The form has been submitted”);
});
</script>
A variável submitButton tem acesso ao botão HTML no código acima. Você deve adicionar o ouvinte de evento de clique no botão (obtendo o elemento por seu id de envio ). Ao clicar no botão, o evento é acionado e a janela exibe um pop-up com o texto: "O formulário foi enviado."
Agora que cobrimos a ideia básica da manipulação do DOM , vamos prosseguir e mergulhar na construção do aplicativo de tarefas.
Construindo o Layout Usando HTML e TailwindCSS
Vamos dar uma olhada no layout HTML deste projeto. Os elementos de entrada e os botões têm seus respectivos ids para obter acesso a esses elementos no arquivo JavaScript.
Para o design de front-end, este artigo usa TailwindCSS , uma estrutura CSS de utilitário. Você pode usar TailwindCSS em seu projeto importando o arquivo CSS do CDN.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
Código:
<div class="h-100 w-full flex items-center justify-center bg-teal-lightest font-sans mt-20">
<div class="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
<div class="mb-4">
<h1 class="text-3xl md:text-4xl text-indigo-600 font-medium mb-2">
To-Do List App
</h1>
<div class="flex mt-4">
<input class="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker" name="text" id="text" placeholder="Add Todo" />
<input type="hidden" id="saveIndex" />
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded text-white bg-indigo-600 transition-colors duration-300 mt-1 md:mt-0 md:ml-1" id="add-task-btn">Add</button>
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded bg-indigo-600 text-white transition-colors duration-300 mt-1 md:mt-0 md:ml-1" style="display: none" id="save-todo-btn">Edit Todo</button>
</div>
</div>
<div id="listBox"></div>
</div>
</div>
É assim que nosso aplicativo fica depois de projetar:
Adicionando funcionalidade com Javascript:
A primeira etapa é obter acesso aos elementos por seus ids usando o método getElementById () .
const text = document.getElementById("text");
const addTaskButton = document.getElementById("add-task-btn");
const saveTaskButton = document.getElementById("save-todo-btn");
const listBox = document.getElementById("listBox");
const saveInd = document.getElementById("saveIndex");
Precisamos de um array para armazenar todas as tarefas pendentes. Portanto, precisamos inicializar um.
let todoArray = [];
Adicionando itens à lista de tarefas pendentes
Para adicionar uma tarefa ao array, você precisa colocá-la no todoArray e exibi-la na página da web. Para que isso aconteça, um evento de clique deve ser acionado no botão adicionar.
addTaskButton.addEventListener("click", (e) => {
e.preventDefault();
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
todoArray.push(text.value);
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});
Você deve armazenar o todoArray no localStorage em cada alteração (ou seja, sempre que uma tarefa é adicionada, atualizada ou excluída).
No código acima, você deve buscar a matriz no localStorage ; se não houver nenhuma matriz, criamos uma em branco. Em seguida, enviamos a tarefa recém-adicionada ao todoArray e armazenamos todo o array novamente em localStorage .
Exibindo as alterações da lista de tarefas
Depois de anexar o valor ao todoArray , você precisa exibi-lo na página da web. Isso é feito usando o atributo .innerHTML .
Colocamos o HTML da lista de tarefas dentro de uma variável chamada htmlCode . Em seguida, percorremos todoArray e adicionamos cada item à variável htmlCode .
Quando terminar de percorrer todos os itens, você precisa atribuir todo o código HTML ao elemento listBox usando o atributo .innerHTML .
Então, depois de enviar o novo item da lista de tarefas para a matriz, chamamos a função displayTodo () que lida com tudo isso conforme descrito:
function displayTodo() {
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
let htmlCode = "";
todoArray.forEach((list, ind) => {
htmlCode += `<div class='flex mb-4 items-center'>
<p class='w-full text-grey-darkest'>${list}</p>
<button onclick='edit(${ind})' class='flex-no-shrink p-2 ml-4 mr-2 border-2 rounded text-white text-grey bg-green-600'>Edit</button>
<button onclick='deleteTodo(${ind})' class='flex-no-shrink p-2 ml-2 border-2 rounded text-white bg-red-500'>Delete</button>
</div>`;
});
listBox.innerHTML = htmlCode;
}
Você precisa adicionar dois botões – atualizar e excluir – para cada item enquanto anexa os itens de tarefas à variável htmlCode .
Excluindo itens da lista de tarefas pendentes
O botão delete tem um método de atributo onclick () que passa o índice de tarefas como parâmetro. Ao clicar no botão deletar, o método deleteTodo () será executado.
Neste método, você deve aplicar o método de array splice () no todoArray . O método splice () ajuda a excluir o item no índice especificado. Depois de excluir o item, você deve armazenar as alterações no localStorage e chamar a função displayTodo () para refletir as alterações na página da web.
function deleteTodo(ind) {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
todoArray.splice(ind, 1);
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
}
Atualizando itens na lista de tarefas pendentes
Cada item da lista de tarefas possui um botão de edição, assim como o botão de exclusão. O botão de edição tem um método de atributo onclick () . Ao clicar no botão, o método de edição é executado e passa o índice como parâmetro.
Existem dois elementos HTML cujas propriedades de exibição são definidas como nenhum:
- Elemento de entrada com id saveIndex
- Botão com o id save-task-btn
Assim que você clicar no botão editar, a entrada terá o valor do texto com o qual você deseja atualizar. O saveTaskButton será exibido em vez de addTaskButton .
O código HTML consiste em um elemento de entrada com id saveIndex . Você deve definir sua propriedade de estilo padrão de exibição como nenhum . Quando o método de edição é chamado, você define o atributo value deste elemento para o id, para que possa referenciá-lo posteriormente ao salvar a tarefa atualizada.
function edit(ind) {
saveInd.value = ind;
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
text.value = todoArray[ind];
addTaskButton.style.display = "none";
saveTaskButton.style.display = "block";
}
Assim que terminar de editar o texto, clique em saveTaskButton . Ao clicar no botão, você recupera o id do texto usando a entrada saveInd . Depois de recuperar o id, você pode atualizar o todoArray nesse índice e enviar as alterações para o localStorage . Por fim, chamamos a função displayTodo () para refletir as alterações na página da web.
saveTaskButton.addEventListener("click", () => {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
let id = saveInd.value;
todoArray[id] = text.value;
addTaskButton.style.display = "block";
saveTaskButton.style.display = "none";
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});
Marque um item da sua lista de tarefas
Agora que você concluiu o aplicativo básico de lista de tarefas, é hora de começar a construir projetos mais interessantes sozinho!
Você pode criar um jogo ou um aplicativo da web que pode ser usado para seu uso pessoal. Construir projetos irá ajudá-lo a desenvolver suas habilidades e obter um bom domínio de JavaScript. Continue aprendendo e construindo projetos incríveis o máximo que puder.
Quer construir outro projeto JavaScript? Aqui está um aplicativo da web de calculadora simples que você pode construir com HTML, CSS e JavaScript.
