Cómo crear una lista de tareas pendientes simples con HTML, CSS y JS
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":
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:
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:
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: HoverAntecedentes: #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:
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:
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:
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:
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 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:
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:
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.