-
<!DOCTYPE html>: Esta línea indica al navegador que el documento es de tipo HTML5, la última versión del lenguaje HTML.
<html lang="en">: Esta etiqueta abre el documento HTML y establece el idioma del contenido como inglés (en).
<head>: La sección <head> contiene metadatos sobre el documento, que no se muestran directamente en la página.
<meta charset="UTF-8">: Define la codificación de caracteres como UTF-8, permitiendo el uso de una amplia gama de caracteres en el documento.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Establece la configuración de la vista para hacer el diseño de la página responsive, es decir, adaptable a diferentes tamaños de pantalla.
<title>Simple lista por Hacer</title>: Define el título de la página que aparece en la pestaña del navegador.
<link rel="stylesheet" href="styles.css">: Vincula el documento HTML con una hoja de estilos CSS externa, que se encuentra en el archivo "styles.css". Este archivo contiene las reglas de diseño para la página.
<body>: La sección <body> contiene todo el contenido que se muestra en la página web.
<div class="todo-container">: Un contenedor div que agrupa los elementos relacionados con la lista de tareas.
<h1>Things to Do</h1>: Un encabezado de nivel 1 que muestra el título "Things to Do" en la página.
<input type="text" id="taskInput" placeholder="Add a new task...">: Un campo de entrada de texto donde el usuario puede escribir una nueva tarea. El atributo placeholder muestra un texto indicativo "Add a new task..." cuando el campo está vacío.
<button id="addTaskBtn">Add Task</button>: Un botón que el usuario puede presionar para agregar la tarea escrita en el campo de entrada.
<ul id="taskList"></ul>: Una lista desordenada que inicialmente está vacía, pero que se llenará con las tareas que agregue el usuario.
<script src="script.js"></script>: Vincula el documento HTML con un archivo de script JavaScript externo, "script.js", que contiene la lógica de programación necesaria para la funcionalidad de la lista de tareas, como agregar y posiblemente eliminar tareas.
-
Estilo para el cuerpo (body):
font-family: Arial, sans-serif;: Establece la fuente del texto en Arial o, si no está disponible, en una fuente genérica sans-serif.
display: flex;: Utiliza el modelo de caja flexible para alinear los elementos hijos.
justify-content: center;: Centra los elementos hijos horizontalmente.
align-items: center;: Centra los elementos hijos verticalmente.
height: 100vh;: Establece la altura del cuerpo al 100% de la altura de la ventana del navegador.
margin: 0;: Elimina el margen predeterminado del cuerpo.
background: linear-gradient(120deg, #6fa2c4, #ae74c7);: Aplica un degradado de color de 120 grados que va del azul (#6fa2c4) al púrpura (#ae74c7).
Contenedor de la lista de tareas (.todo-container):
background-color: white;: Establece un fondo blanco.
padding: 20px;: Añade espacio interno de 20 píxeles alrededor del contenido.
border-radius: 8px;: Redondea las esquinas del contenedor.
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);: Agrega una sombra sutil para dar un efecto de elevación.
width: 300px;: Establece un ancho fijo de 300 píxeles.
Campos de entrada de texto:
width: calc(100% - 24px);: Ajusta el ancho para que sea el 100% del contenedor menos 24 píxeles.
padding: 8px;: Añade espacio interno de 8 píxeles.
margin-bottom: 10px;: Añade un espacio inferior de 10 píxeles entre el campo de texto y otros elementos.
Botones:
padding: 8px 12px;: Define el espacio interno de 8 píxeles verticalmente y 12 píxeles horizontalmente.
background-color: #28a745;: Usa un verde como color de fondo.
color: white;: Establece el color del texto en blanco.
border: none;: Elimina cualquier borde predeterminado.
border-radius: 4px;: Redondea las esquinas del botón.
cursor: pointer;: Cambia el cursor a una mano al pasar sobre el botón, indicando que es clickeable.
Efecto hover en botones:
button:hover { background-color: #218838; }: Cambia el color de fondo a un verde más oscuro cuando el ratón pasa sobre el botón.
Lista sin viñetas (ul):
list-style-type: none;: Elimina los puntos o viñetas predeterminadas de la lista.
padding: 0;: Elimina el relleno predeterminado.
Elementos de lista (li):
background: #e9ecef;: Establece un fondo gris claro.
margin: 5px 0;: Añade un margen vertical de 5 píxeles entre los elementos de la lista.
padding: 10px;: Añade un relleno de 10 píxeles dentro de cada elemento.
border-radius: 4px;: Redondea las esquinas de cada elemento.
cursor: pointer;: Indica que los elementos de la lista son clickeables.
Este CSS está diseñado para crear una interfaz de usuario limpia y centrada, ideal para una aplicación de lista de tareas.
-
Evento DOMContentLoaded: Este código comienza escuchando el evento DOMContentLoaded. Esto garantiza que el código dentro de la función solo se ejecute una vez que el documento HTML haya sido completamente cargado. Es como esperar a que toda la página esté lista antes de empezar a trabajar con los elementos de la misma.
Botón 'addTaskBtn': Una vez que el documento está cargado, se agrega un "escucha" al botón con el ID addTaskBtn. Esto significa que cada vez que se haga clic en este botón, se ejecutará la función definida.
Obtener y procesar el texto de la tarea: Dentro de la función del clic del botón, primero se obtiene el elemento de entrada (input) con el ID taskInput. El valor de este input (lo que el usuario escribe) se guarda en la variable taskText, eliminando posibles espacios en blanco al inicio o al final con .trim().
Comprobación de texto no vacío: Se verifica si taskText no está vacío. Si el campo no está vacío, se procede a crear un nuevo elemento de lista (<li>) para mostrar la tarea.
Agregar la tarea a la lista: Luego, se obtiene el elemento de lista con el ID taskList, y se crea un nuevo elemento <li> con el texto de la tarea (contenido en taskText). Este nuevo elemento se añade a taskList.
Funcionalidad para eliminar la tarea: Se añade un evento al nuevo <li> para que, al ser clicado, se elimine a sí mismo de la lista. Esto se logra mediante taskList.removeChild(newTask).
Limpiar el campo de entrada: Finalmente, después de añadir la tarea a la lista, se limpia el campo de entrada (taskInput) estableciendo su valor a una cadena vacía.
Este código esencialmente permite a los usuarios agregar y eliminar tareas de una lista interactiva en una página web, todo mediante la manipulación de elementos del DOM (Document Object Model) usando JavaScript.