Cómo crear una lista de tareas pendientes simples con HTML, CSS y JS

Si está haciendo tantas cosas en ese momento y no puede administrar adecuadamente las cosas, entonces, es necesario organizar o priorizar la tarea diaria en función de la prioridad de la tarea. Para ese propósito, puede hacer una lista de tareas pendientes de sus tareas que puedan administrar fácilmente la tarea. Además, cuando ha realizado la tarea, puede eliminarla de la lista.

Esta publicación se trata de crear una lista de tareas pendientes simples con la ayuda HTML, CSS y JavaScript.

Cómo crear una lista de tareas pendientes simples con HTML, CSS y JavaScript?

Para hacer una lista de tareas pendientes simples con HTML, CSS y JavaScript, primero, haga una lista simple en el HTML con la ayuda del "

" etiqueta. Luego, acceda a la lista en CSS y aplique varias propiedades de CSS para diseñar la lista, incluyendo color, márgenes y otros. Después de eso, utilice el ""Etiqueta y agregue el código JavaScript.

Para hacerlo, pruebe el código que se indica a continuación.

Parte html

En la parte HTML, siga las instrucciones paso a paso que se dan a continuación.

Paso 1: Crear contenedor Div principal
Primero, haga un contenedor Div y especifique un "identificación"Con la ayuda del atributo de identificación. También puede utilizar el atributo de clase especificando un nombre en particular.

Paso 2: Insertar encabezado
Utilice la etiqueta de encabezado para insertar un encabezado dentro de la página HTML e incruste el texto para el encabezado.

Paso 3: Hacer el campo de entrada
Especificar la entrada "tipo" como "texto", Asigne una ID y utilice el atributo de marcador de posición para colocar el texto en el campo de entrada.

Paso 4: Agregue un botón
Utilizar el "Elemento "y agregar el"al hacer clic"Evento para activar la función cuando el usuario hace clic en"Insertar" botón.

Paso 5: Haz una lista
Ahora, con la ayuda del "

"Etiqueta, haremos una lista desordenada y agregaremos el elemento de la lista utilizando el"
• " etiqueta:
  
  
  

  Lista de quehaceres

  
  
  Insertar
  
  
  
  
  • Javascript
  
  
  • Java
  
  
  • HTML/CSS
  
  
  • Estibador
  
  
  • Discordia
  
  
  • Windows
  
  
  • Potencia Shell
  
  
  
  

  Como resultado, la lista se ha creado con éxito:
  

  Parte de CSS

  En la parte CSS, puede aplicar el estilo accediendo al elemento con la ayuda de la identificación o clase. Para hacerlo, siga las instrucciones establecidas a continuación.

  Paso 1: Estilo "principal" Div
  Acceda al contenedor Div "principal" con la ayuda del asignado "identificación"Junto con el selector como"#principal":

  #principal
  margen: 20px 60px;
  relleno: 30px 40px;
  

  Después de acceder al contenedor Div, aplique las propiedades CSS enumeradas a continuación:

  • "margen"Especifica el espacio fuera del elemento definido.
  • "relleno"Determina el espacio dentro del límite definido.

  Paso 2: Aplicar el estilo en la lista
  Acceda a la lista y aplique las propiedades mencionadas a continuación para diseñar la lista:

  ul li
  cursor: puntero;
  Posición: relativo;
  relleno: 12px 8px 12px 40px;
  Antecedentes: #F1CBCB;
  tamaño de fuente: 16px;
  Transición: 0.3s;
  

  Aquí:

  • "cursor"Determina que el cursor del mouse se mostrará al apuntar sobre un elemento.
  • "posición"Se utiliza para establecer la posición de un elemento. Para hacerlo, el valor de la posición se establece como "relativo".
  • "fondo"Especifica el color en la parte posterior del elemento.
  • "tamaño de fuente"La propiedad CSS determina el tamaño de la fuente.
  • "transición"Permite cambiar de valor de propiedad sin problemas, durante una duración dada.

  Paso 3: Establezca color para los elementos de la lista
  Acceda a los elementos impares de la lista y establezca el "fondo" color:

  ul li: nth-child (impar)
  Antecedentes: #cfeeeb;
  

  Acceda a la lista junto con el "flotar"Eso se usa cuando el usuario mouse sobre el elemento. Luego, configure el color de fondo. Para hacerlo, el valor se establece como "#DDD":

  Ul Li: Hover
  Antecedentes: #DDD;
  

  Paso 4: Los elementos de la lista de estilo con la clase "revisada"
  Utilice el nombre de clase con el elemento de lista para acceder al elemento donde se especifica el atributo de clase particular:

  ul li.marcado
  Color: #fff;
  Antecedentes: #888;
  Decoración de texto: línea a través de;
  

  Luego, aplique las propiedades de la lista a continuación:

  • "colorLa propiedad se usa para establecer el color para la fuente.
  • "decoración de texto"Determina el estilo para que el texto lo decore. En este caso, el valor se establece como "lineal"Para hacer una línea de todo el texto.

  Paso 5: Clase de cabeza de estilo
  Para diseñar la clase principal, acceder a la clase y aplicar "color de fondo","color","relleno", y "texto alineado"Propiedades CSS:

  .cabeza
  Color de fondo: #685EF7;
  Color: RGB (252, 186, 186);
  relleno: 30px 40px;
  Text-Align: Center;
  

  Como resultado, la lista y los elementos de la lista se han diseñado con éxito:

  Parte de JavaScript

  En esta parte, utiliza el ""Etiqueta y agregue el código JavaScript entre las etiquetas. Para hacerlo, siga los pasos mencionados a continuación:

  Paso 1: Obtener lista
  Utilizar el "getElementsBytagName ()Método para acceder a la lista y almacenarla en un objeto:

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

  Declarar una variable:

  var i;

  Paso 2: Elemento de apertura
  Use el bucle for For y defina la longitud para iterar el elemento. Luego, agregue el siguiente código:

  • Cree nuevos elementos utilizando el "createElement ()"Método y guárdelos en una variable.
  • Agregue texto para cada elemento usando el "createTextNode ()" método.
  • Agregue cada elemento y almacene el elemento creado en la lista:
  para (i = 0; i < nodeList.length; i++)
  var span = documento.CreateElement ("Span");
  var txt = documento.createtextNode ("\ u00d7");
  durar.className = "Close";
  durar.appendChild (txt);
  nodelist [i].appendchild (span);
  

  Paso 3: Ocultar el elemento de la lista actual
  Para ocultar el elemento de la lista actual, acceda a la clase con la ayuda de "getElementsByClassName ()Método y guárdelo en una variable:

  var cerrando = documento.getElementsByClassName ("Cerrar");
  var i;

  Use el bucle "para" para iterar el elemento y llamar a la función cuando el usuario realiza un evento.

  para (i = 0; i < close.length; i++)
  Cerrar [i].onClick = function ()
  var div = esto.Parentralemento;
  div.estilo.display = "Ninguno";
  
  

  Paso 4: Agregar símbolo verificado
  Seleccione la lista usando el "QuerySelector ()”E inserte en una variable:

  VAR LIST = Documento.QuerySelector ('ul');

  Invoca el "addEventListener ()Método "y use el"si"Declaración para verificar la condición. Agrega un "comprobado"Símbolo Al hacer clic en un elemento de lista, de lo contrario regresa falso:

  lista.addEventListener ('Click', function (EV)
  if (ev.objetivo.TagName === 'Li')
  eV.objetivo.Lista de clase.toggle ('revisado');
  
  , FALSO);

  Paso 5: Crear nuevo elemento
  Para crear un nuevo elemento de lista cuando el usuario haga clic en el "Insertar"Botón, utilice el siguiente código:

  • Primero, invoca la función "Newelement ().
  • Crear un elemento con la ayuda del "createElement ()"Método y guárdelo en una variable.
  • Acceda a los datos de entrada utilizando el ID y Agregar niño.
  • Use la declaración "IF" y verifique la condición. Si el campo de texto está vacío, activará la notificación para agregar algo en el área de texto. De lo contrario, agregará los datos a la lista.
  • Utilice el bucle de iterador "para" y llame a la función para activar el evento:
  function newelement ()
  var li = documento.createElement ("li");
  var entervalue = documento.getElementById ("input_data").valor;
  var t = documento.createtextnode (entervalue);
  li.appendchild (t);
  if (entervalue === ")
  alerta ("debe agregar algo");
  
  demás
  documento.getElementById ("List").appendchild (li);
  
  documento.getElementById ("input_data").valor = "";
  var span = documento.CreateElement ("Span");
  var txt = documento.createtextNode ("\ u00d7");
  durar.className = "Close";
  durar.appendChild (txt);
  li.appendchild (span);
  para (i = 0; i < close.length; i++)
  Cerrar [i].onClick = function ()
  var div = esto.Parentralemento;
  div.estilo.display = "Ninguno";
  
  
  

  Producción
  

  Como puede ver, podemos agregar y eliminar con éxito elementos en la lista de tareas pendientes creadas.

  Conclusión

  Para crear una lista simple de hacer, primero, cree una lista en HTML usando el "

  "Etiqueta y agregue elementos con la ayuda de"
  • ". Después de eso, acceda a la lista en CSS y aplique propiedades, incluidas "fondo","color" y otros. Después de eso, agregue el código JavaScript, que activará un evento cuando el usuario agrega los datos en el campo de texto y haga clic en el botón creado. Este tutorial ha declarado el método para hacer una lista de tareas pendientes utilizando HTML, CSS y JavaScript.