Article image
Lucas Bernardes
Lucas Bernardes31/10/2023 22:55
Compartilhe

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

    Compartilhe
    Comentários (1)
    Lucas Bernardes
    Lucas Bernardes - 31/10/2023 22:57

    Por favor, sintam-se livre pra corrigir algum erro, ou opinar para melhorar esse artigo!