Sobre a Aula
Lista de Tarefas Interativa
Neste projeto final, aplicaremos os conceitos aprendidos ao criar uma aplicação prática: uma lista de tarefas interativa. Esta aplicação permitirá adicionar, marcar como concluída e excluir tarefas. Vamos criar o HTML, CSS e JavaScript passo a passo.
HTML (index.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lista de Tarefas Interativa</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Lista de Tarefas</h1> <!-- Campo de entrada para nova tarefa --> <input type="text" id="novaTarefa" placeholder="Adicione uma nova tarefa"> <!-- Botão para adicionar nova tarefa --> <button onclick="adicionarTarefa()">Adicionar</button> <!-- Lista para exibir as tarefas --> <ul id="listaTarefas"></ul> </div> <script src="script.js"></script> </body> </html>
CSS (styles.css):
body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .container { max-width: 600px; margin: 50px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } input[type="text"] { width: 70%; padding: 8px; margin-right: 8px; } button { padding: 8px; cursor: pointer; } ul { list-style: none; padding: 0; } li { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #ddd; } .completed { text-decoration: line-through; color: #888; }
JavaScript (script.js):
// Função para adicionar uma nova tarefa à lista function adicionarTarefa() { const novaTarefaInput = document.getElementById('novaTarefa'); const novaTarefaTexto = novaTarefaInput.value.trim(); // Verifica se o campo não está vazio if (novaTarefaTexto !== '') { const listaTarefas = document.getElementById('listaTarefas'); const novaTarefaItem = document.createElement('li'); // Adiciona o HTML do item da tarefa novaTarefaItem.innerHTML = ` <span>${novaTarefaTexto}</span> <button onclick="marcarConcluida(this)">Concluída</button> <button onclick="removerTarefa(this)">Remover</button> `; // Adiciona o item à lista listaTarefas.appendChild(novaTarefaItem); // Limpa o campo de entrada novaTarefaInput.value = ''; } } // Função para marcar uma tarefa como concluída function marcarConcluida(botaoConcluir) { const tarefaItem = botaoConcluir.parentNode; // Alternância da classe 'completed' para marcar/desmarcar como concluída tarefaItem.classList.toggle('completed'); } // Função para remover uma tarefa function removerTarefa(botaoRemover) { const tarefaItem = botaoRemover.parentNode; // Remove o item da lista tarefaItem.remove(); }
Explicação:
- HTML: Criamos uma estrutura simples com um campo de texto para adicionar tarefas, botão de adição e uma lista para exibir as tarefas.
- CSS: Estilizamos a aplicação para torná-la visualmente atraente e responsiva.
- JavaScript: Implementamos funções para adicionar tarefas, marcar como concluída e remover tarefas. Utilizamos manipulação de DOM e classes CSS para refletir o estado das tarefas.
Este projeto utiliza os principais conceitos aprendidos, como manipulação de DOM, eventos, boas práticas e otimizações. Use este projeto interativo para consolidar seu entendimento e sinta-se à vontade para expandi-lo com mais funcionalidades. Agora só depende de você!
Quando terminar, segue para o próximo projeto.
Entrar na conversa