Criando uma lista de tarefas com Javascript, HTML/CSS
Uma lista de tarefas é uma aplicação simples e útil para aprender a criar interatividade em uma página da web. Neste artigo, vou mostrar como criar uma lista de tarefas usando HTML, CSS e JavaScript, explorando cada etapa em detalhes! Bora codar?
Passo 1: Configurando o HTML
Primeiro, vamos criar o esqueleto HTML para a nossa aplicação de lista de tarefas. Abaixo está o código HTML explicado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Lista de Tarefas</title>
</head>
<body>
<div class="lista-tarefas">
<h1>Minha Lista de Tarefas</h1>
<input id="tarefa" type="text" placeholder="Adicione uma tarefa">
<button id="adicionar">Adicionar</button>
<ul id="tarefas">
<!-- Tarefas serão adicionadas aqui -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
Explicando melhor o que temos até aqui:
<!DOCTYPE html>: Declaramos o tipo de documento como HTML5.
<head>: Aqui definimos metadados, como o conjunto de caracteres e a viewport para responsividade.
<link rel="stylesheet">: Vinculamos o arquivo CSS externo.
<title>: Define o título da nossa página.
<div class="lista-tarefas">: Um contêiner para todo o conteúdo da nossa aplicação.
<input id="tarefa">: Uma caixa de entrada de texto para inserir tarefas.
<button id="adicionar">: Um botão para adicionar tarefas.
<ul id="tarefas">: Uma lista não ordenada onde as tarefas serão exibidas.
Passo 2: Estilizando com CSS
Agora, vamos estilizar nossa aplicação. Crie um arquivo chamado "style.css" e adicione o seguinte código CSS:
/* style.css */
.meu-botao {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.meu-botao:hover {
background-color: #2980b9;
}
Neste CSS, estamos estilizando o botão de adicionar. Definimos a cor de fundo, a cor do texto, o espaçamento, a borda arredondada e a mudança de cor quando o mouse passa por cima. Mude à vontade este código, e tenha a curiosidade de modifica-lo como quiser :)
Passo 3: Implementando a Lógica com JavaScript
Agora, crie um arquivo chamado "script.js" e adicione o seguinte código JavaScript:
// Variáveis
const tarefaInput = document.getElementById("tarefa");
const adicionarBotao = document.getElementById("adicionar");
const listaTarefas = document.getElementById("tarefas");
// Event Listeners
adicionarBotao.addEventListener("click", adicionarTarefa);
tarefaInput.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
adicionarTarefa();
}
});
// Funções
function adicionarTarefa() {
const tarefaTexto = tarefaInput.value;
if (tarefaTexto.trim() !== "") {
const novaTarefa = document.createElement("li");
novaTarefa.innerHTML = `
${tarefaTexto} <button class="excluir">Excluir</button>
`;
listaTarefas.appendChild(novaTarefa);
tarefaInput.value = "";
}
}
listaTarefas.addEventListener("click", function (e) {
if (e.target.classList.contains("excluir")) {
e.target.parentElement.remove();
}
});
Neste JavaScript:
- Capturamos elementos do DOM usando document.getElementById.
- Adicionamos um ouvinte de eventos para o botão de adicionar para criar uma nova tarefa.
- Também adicionamos um ouvinte de eventos para a tecla "Enter" para adicionar uma tarefa.
- Criamos uma função adicionarTarefa que cria elementos de lista <li> para cada tarefa.
- Outro ouvinte de eventos é adicionado à lista de tarefas para permitir a exclusão de tarefas.
Passo 4: Visualize no Navegador
Agora que tudo está configurado, abra o arquivo HTML em seu navegador. Você verá uma aplicação de lista de tarefas onde você pode adicionar, marcar como concluídas e excluir tarefas.
Este artigo fornece uma simples, mas detalhada, introdução ao desenvolvimento web, incluindo HTML, CSS e JavaScript. Você pode expandir esta aplicação adicionando mais recursos, como armazenamento local para manter as tarefas salvas após a atualização da página.
Espero que este tutorial seja útil e que você desfrute da criação de sua lista de tarefas personalizada, e que ajude nos seus estudos :D
