Uma lista de tarefas em JavaScript é uma aplicação prática e excelente para quem está começando no desenvolvimento web. Ela permite que você adicione e remova itens de forma dinâmica usando HTML, CSS e JavaScript. Neste tutorial, vamos guiar você passo a passo para criar sua própria lista de tarefas com funcionalidades essenciais. Ao final, você terá uma aplicação prática e fácil de usar, além de um ótimo projeto para adicionar ao seu portfólio.
O Que Vamos Construir?
Vamos criar uma lista de tarefas em JavaScript que permite:
- Adicionar novas tarefas
- Remover tarefas já adicionadas
Tecnologias Usadas
- HTML: Para estruturar o conteúdo da aplicação.
- CSS: Para estilizar e melhorar a aparência visual da lista de tarefas.
- JavaScript: Para adicionar interatividade, permitindo o gerenciamento de tarefas.
Veja uma demonstração do código funcionando no Codepen abaixo:
See the Pen Untitled by Código Fácil (@CodigoFacil) on CodePen.
1. Estrutura Básica em HTML
Começamos criando o arquivo HTML que dará a estrutura da lista de tarefas. Neste arquivo, vamos incluir um campo de entrada de texto para adicionar tarefas e um botão para acionar essa função.
Código HTML
Crie um arquivo chamado index.html e insira o seguinte código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Tarefas em JavaScript</title>
</head>
<body>
<!-- Container principal da lista de tarefas -->
<div class="container">
<h1>Lista de Tarefas</h1>
<div class="input-container">
<!-- Campo de entrada para nova tarefa -->
<input type="text" id="taskInput" placeholder="Digite uma nova tarefa...">
<!-- Botão para adicionar tarefa -->
<button onclick="addTask()">Adicionar</button>
</div>
<!-- Lista onde as tarefas serão exibidas -->
<ul id="taskList"></ul>
</div>
</body>
</html>Explicação do HTML
- Container Principal: A
divcom a classecontaineragrupa todos os elementos da lista de tarefas, como o título, o campo de entrada e a lista de tarefas. - Campo de Entrada e Botão: O
inputé onde o usuário digita uma nova tarefa, e o botão de “Adicionar” chama a funçãoaddTask()para adicionar a tarefa ao clicar. - Lista de Tarefas: O elemento
<ul>é a lista onde as tarefas serão exibidas após serem adicionadas pelo usuário.
2. Estilos com CSS
Com a estrutura pronta, vamos criar um arquivo CSS para estilizar a lista de tarefas. Isso deixa a aplicação mais atraente e melhora a experiência do usuário.
Código CSS
Crie um arquivo chamado style.css e adicione o código a seguir:
/* Estilos básicos */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f9;
}
/* Container principal */
.container {
width: 100%;
max-width: 400px;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* Estilo do título */
h1 {
margin-bottom: 20px;
}
/* Estilo do campo de entrada e botão */
.input-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
button {
padding: 10px;
border: none;
background-color: #3498db;
color: #ffffff;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
/* Estilos dos itens da lista */
ul {
list-style: none;
}
li {
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
li .remove-btn {
color: #e74c3c;
cursor: pointer;
font-weight: bold;
}Explicação do CSS
- Estilo Básico: Centraliza o conteúdo da página com
flexboxe aplica uma cor de fundo leve. - Container: Adiciona uma sombra ao container principal e define largura e bordas arredondadas.
- Input e Botão: Estilos para o campo de entrada e o botão, incluindo um efeito
hoverno botão. - Itens de Lista: Remove o estilo de lista e define uma aparência padronizada para as tarefas. O botão de remoção é estilizado em vermelho para se destacar.
3. Interatividade com JavaScript
Agora, vamos adicionar a funcionalidade da lista de tarefas em JavaScript. Essa parte cria funções para adicionar e remover tarefas na lista de forma dinâmica.
Código JavaScript
Crie um arquivo chamado script.js e adicione o código abaixo:
// Seleciona os elementos HTML para interagir com o JavaScript
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
// Função para adicionar uma nova tarefa à lista
function addTask() {
// Obtém o texto digitado no campo de entrada e remove espaços extras
const taskText = taskInput.value.trim();
// Verifica se o campo de entrada não está vazio
if (taskText !== "") {
// Cria um novo item de lista (<li>) com o texto da tarefa e um botão de remoção
const listItem = document.createElement("li");
listItem.innerHTML = `${taskText} <span class="remove-btn" onclick="removeTask(this)">X</span>`;
// Adiciona o item de tarefa à lista (<ul>)
taskList.appendChild(listItem);
// Limpa o campo de entrada após adicionar a tarefa
taskInput.value = "";
} else {
// Exibe um alerta se o campo de entrada estiver vazio
alert("Digite uma tarefa para adicionar à lista!");
}
}
// Função para remover uma tarefa da lista
function removeTask(taskElement) {
// Remove o item <li> ao qual o botão pertence
taskElement.parentElement.remove();
}Explicação do JavaScript
- Selecionar Elementos:
taskInputetaskListsão selecionados para permitir a manipulação direta do campo de entrada e da lista de tarefas. - Função
addTask:
- Captura o texto digitado no campo de entrada.
- Verifica se o campo de entrada está preenchido. Se estiver vazio, mostra um alerta.
- Cria um novo elemento de lista (
<li>) para a tarefa com um botão “X” que chama a função de remoção. - Limpa o campo de entrada após a tarefa ser adicionada.
- Função
removeTask:
- A função
removeTaskrecebe o elemento do botão como parâmetro e remove o item de lista correspondente.
Conclusão
Parabéns! Agora você tem uma lista de tarefas em JavaScript totalmente funcional. Este projeto é um ótimo exemplo para praticar HTML, CSS e JavaScript, pois permite aprender como manipular o DOM, adicionar e remover elementos, e criar interações dinâmicas.
Caso tenha interesse, conheça outros projetos práticos em HTML, CSS e JavaScript do nosso blog.
