Criando uma lista de tarefas com Javascript, HTML/CSS

#HTML
#JavaScript
#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