Como criar uma lista de tarefas simples com HTML, CSS e JS

Se você está fazendo tantas coisas na época e não pode gerenciar adequadamente as coisas, é necessário organizar ou priorizar a tarefa diária com base na prioridade da tarefa. Para esse fim, você pode fazer uma lista de tarefas de suas tarefas que possam gerenciar facilmente a tarefa. Além disso, quando você fizer a tarefa, pode removê -la da lista.

Este post é sobre criar uma lista de tarefas simples com a ajuda HTML, CSS e JavaScript.

Como criar uma lista de tarefas simples com HTML, CSS e JavaScript?

Para fazer uma lista de tarefas simples com HTML, CSS e JavaScript, primeiro, faça uma lista simples no HTML com a ajuda do “

" marcação. Em seguida, acesse a lista no CSS e aplique várias propriedades CSS para estilizar a lista, incluindo cores, margens e outros. Depois disso, utilize o “”Tag e adicione o código JavaScript.

Para fazer isso, experimente o código declarado abaixo.

Parte html

Na parte HTML, siga as instruções passo a passo dadas abaixo.

Etapa 1: Crie o contêiner principal da div
Primeiro, faça um recipiente de div e especifique um “eu ia”Com a ajuda do atributo de identificação. Você também pode utilizar o atributo de classe especificando um nome específico.

Etapa 2: Insira o cabeçalho
Utilize a tag de cabeçalho para inserir um título dentro da página HTML e incorpore o texto para o cabeçalho.

Etapa 3: Faça o campo de entrada
Especifique a entrada “tipo" como "texto”, Atribua um ID e utilize o atributo de espaço reservado para colocar o texto no campo de entrada.

Etapa 4: adicione um botão
Use o "”Elemento e adicione o“ONCLICK”Evento para acionar a função quando o usuário clica no“Inserir" botão.

Etapa 5: Faça uma lista
Agora, com a ajuda do “

”Tag, faremos uma lista não ordenada e adicionaremos o elemento da lista usando o“
• " marcação:
  
  
  

  Lista de afazeres

  
  
  Inserir
  
  
  
  
  • JavaScript
  
  
  • Java
  
  
  • HTML/CSS
  
  
  • Docker
  
  
  • Discórdia
  
  
  • janelas
  
  
  • Powershell
  
  
  
  

  Como resultado, a lista foi criada com sucesso:
  

  Parte css

  Na parte CSS, você pode aplicar o estilo acessando o elemento com a ajuda do ID ou classe. Para fazer isso, siga as instruções declaradas abaixo.

  Etapa 1: Div "Main"
  Acesse o contêiner Div "principal" com a ajuda do atribuído "eu ia”Junto com o seletor como“#principal”:

  #principal
  margem: 20px 60px;
  preenchimento: 30px 40px;
  

  Depois de acessar o contêiner Div, aplique as propriedades CSS listadas abaixo:

  • ““margem”Especifica o espaço fora do elemento definido.
  • ““preenchimento”Determina o espaço dentro do limite definido.

  Etapa 2: Aplique o estilo na lista
  Acesse a lista e aplique as propriedades abaixo mencionadas para estilizar a lista:

  ul li
  Cursor: Ponteiro;
  Posição: relativa;
  preenchimento: 12px 8px 12px 40px;
  Antecedentes: #f1cbcb;
  Size da fonte: 16px;
  Transição: 0.3s;
  

  Aqui:

  • ““cursor”Determina o cursor do mouse ser exibido ao apontar sobre um elemento.
  • ““posição”É utilizado para definir a posição de um elemento. Para fazer isso, o valor da posição é definido como "relativo".
  • ““fundo”Especifica a cor na parte traseira do elemento.
  • ““tamanho da fonteA propriedade CSS determina o tamanho da fonte.
  • ““transição”Permite a mudança de valores da propriedade sem problemas, durante uma determinada duração.

  Etapa 3: Defina cores para elementos de lista
  Acesse os elementos ímpares da lista e defina o “fundo" cor:

  Ul Li: Nth Child (Odd)
  Antecedentes: #cfeeeb;
  

  Acesse a lista junto com o “flutuar”Isso é usado quando o usuário mouse sobre o elemento. Em seguida, defina a cor de fundo. Para fazer isso, o valor é definido como “#ddd”:

  Ul Li: Hover
  Antecedentes: #DDD;
  

  Etapa 4: Lista de estilo itens com a classe “verificada”
  Utilize o nome da classe com o elemento da lista para acessar o item em que o atributo de classe específico é especificado:

  ul li.verificado
  Cor: #FFF;
  Antecedentes: #888;
  Decoração de texto: linha de linha;
  

  Em seguida, aplique as propriedades abaixo da listada:

  • ““cor”A propriedade é usada para definir a cor da fonte.
  • ““decoração de texto”Determina o estilo para o texto decorá -lo. Nesse caso, o valor é definido como “linha de linha”Para fazer uma linha de todo o texto.

  Etapa 5: Classe de cabeça de estilo
  Para estilizar a classe Head, acesse a classe e aplique “cor de fundo","cor","preenchimento", e "alinhamento de textoPropriedades do CSS:

  .cabeça
  Background-Color: #685EF7;
  Cor: RGB (252, 186, 186);
  preenchimento: 30px 40px;
  Alinhamento de texto: centro;
  

  Como resultado, lista e elementos da lista foram estilizados com sucesso:

  Javascript Part

  Nesta parte, utilize o “”Tag e adicione o código JavaScript entre as tags. Para fazer isso, siga as etapas mencionadas declaradas abaixo:

  Etapa 1: Obtenha a lista
  Utilize o “getElementsByTagName ()”Método para acessar a lista e armazená -la em um objeto:

  var nodelist = documento.getElementsByTagName ("li");

  Declare uma variável:

  var i;

  Etapa 2: Elemento de Anexo
  Use o loop for e defina o comprimento para iterar o elemento. Em seguida, adicione o seguinte código:

  • Crie novos elementos usando o “createElement ()”Método e armazene -os em uma variável.
  • Adicione texto para cada elemento usando o “CreateTextNode ()”Método.
  • Anexe cada elemento e armazene o elemento criado na lista:
  para (i = 0; i < nodeList.length; i++)
  var span = documento.createElement ("span");
  var txt = documento.createTextNode ("\ u00d7");
  período.ClassName = "Close";
  período.appendChild (txt);
  Nodelist [i].appendChild (span);
  

  Etapa 3: ocultar o item da lista atual
  Para ocultar o item atual da lista, acesse a classe com a ajuda de “getElementsbyclassName ()”Método e armazene -o em uma variável:

  var close = documento.getElementsByClassName ("Close");
  var i;

  Use o loop "for" para iterar o elemento e chamar a função quando o usuário executar um evento.

  para (i = 0; i < close.length; i++)
  fechar [eu].OnClick = function ()
  var div = este.ParentElement;
  div.estilo.display = "nenhum";
  
  

  Etapa 4: adicione símbolo verificado
  Selecione a lista usando o “QuerySelector ()”E insira -o em uma variável:

  var lista = documento.QuerySelector ('Ul');

  Invoque o “addEventListener ()”Método e use o“se”Declaração para verificar a condição. Adicione um “verificado”Símbolo Ao clicar em um item de lista, caso contrário, retorne false:

  lista.addEventListener ('click', function (ev)
  if (ev.alvo.tagname === 'li')
  Ev.alvo.Lista de classe.alternar ('verificado');
  
  , false);

  Etapa 5: Crie um novo item
  Para criar um novo item de lista quando o usuário clicar no “Inserir”Botão, utilize o seguinte código:

  • Primeiro, invocar a função “newelement ().
  • Crie um elemento com a ajuda do “createElement ()”Método e armazene -o em uma variável.
  • Acesse os dados de entrada usando o ID e anexa a criança.
  • Use a instrução "se" e verifique a condição. Se o campo de texto estiver vazio, ele desencadeará a notificação para adicionar algo na área de texto. Caso contrário, ele adicionará os dados à lista.
  • Utilize o loop de iterador "para" e chame a função para acionar o evento:
  função newelement ()
  var li = documento.createElement ("li");
  VAR EnterValue = Documento.getElementById ("input_data").valor;
  var t = documento.CreateTextNode (EnterValue);
  li.ApndendChild (T);
  if (enteservalue === ")
  alerta ("deve adicionar algo");
  
  outro
  documento.getElementById ("Lista").ApndendChild (LI);
  
  documento.getElementById ("input_data").value = "";
  var span = documento.createElement ("span");
  var txt = documento.createTextNode ("\ u00d7");
  período.ClassName = "Close";
  período.appendChild (txt);
  li.appendChild (span);
  para (i = 0; i < close.length; i++)
  fechar [eu].OnClick = function ()
  var div = este.ParentElement;
  div.estilo.display = "nenhum";
  
  
  

  Saída
  

  Como você pode ver, podemos adicionar e remover com sucesso os elementos na lista de tarefas criadas.

  Conclusão

  Para criar uma lista de tarefas simples, primeiro, crie uma lista em HTML usando o “

  ”Tag e adicione elementos com a ajuda de“
  • ”. Depois disso, acesse a lista no CSS e aplique propriedades, incluindo “fundo","cor" e outros. Depois disso, adicione o código JavaScript, que acionará um evento quando o usuário adicionar os dados no campo de texto e clicar no botão criado. Este tutorial declarou o método para fazer uma lista de tarefas utilizando HTML, CSS e JavaScript.