El documento HTML se inicia con la declaración del tipo de documento. A continuación, se utiliza el elemento html con el atributo lang establecido en "es" para indicar que el contenido está en español. Dentro del elemento head se definen los metadatos, como la codificación del documento (UTF-8) y la metaetiqueta viewport para el diseño responsivo en dispositivos móviles. Asimismo, se incluye un título descriptivo y se enlaza la hoja de estilos externa (archivo styles.css).
En el cuerpo del documento (body), se utiliza una estructura semántica con encabezado (header), contenido principal (main) y pie de página (footer).
En el encabezado (header) se coloca el título de la aplicación (Mi Agenda).
Dentro del contenido principal (main) se organizan varias secciones semánticas (section):
La sección de selección de fecha y hora (date-picker) contiene:
Un campo de tipo fecha (input de tipo date).
Un campo de tipo hora (input de tipo time).
Un botón (button) con un identificador para mostrar las tareas.
La sección de tareas (tasks) muestra un título (h2) y una lista (ul) vacía. Esta lista se llenará dinámicamente con elementos de lista (li) según las tareas correspondientes a la fecha seleccionada.
La sección para agregar una nueva tarea (add-task) contiene un formulario (form) con identificador. Dentro del formulario hay tres grupos:
Un campo de fecha para la nueva tarea (input de tipo date).
Un campo de hora para la nueva tarea (input de tipo time).
Un campo de texto para la descripción (input de tipo text). Todos estos campos incluyen el atributo required para asegurar que el usuario introduzca datos válidos. También hay un botón de tipo submit para agregar la tarea.
Finalmente, en el pie de página (footer) se incluye el texto de derechos de autor. Al final del cuerpo se carga el archivo JavaScript (script.js) que controla la lógica.
CONCEPTOS HTML APLICADOS
Estructura semántica mediante elementos como header, main, section, footer, h1, h2, h3 y p, lo que mejora la accesibilidad y la legibilidad del código.
Uso de formularios nativos de HTML con elementos input de tipo date, time, text y el atributo required, lo que permite validaciones básicas del lado del navegador.
Vinculación de archivos externos (CSS y JS) para separar la presentación (styles.css) de la lógica (script.js).
Uso de listas (ul y li) para presentar las tareas dinámicamente.
DESCRIPCIÓN DE LA HOJA DE ESTILOS (CSS)
La hoja de estilos define la presentación visual de la página, aplicando una paleta de colores con predominancia de tonos verdes. Se configuran tipografías sans-serif, márgenes, fondos, colores y espaciados.
Entre los conceptos CSS clave se encuentran:
Uso del modelo de caja (margin, padding, border) para espaciados y contenedores.
Alineación y disposición de elementos mediante flexbox (display: flex, gap, flex-direction), lo que facilita la distribución tanto horizontal como vertical del contenido.
Uso de colores coherentes y una paleta de verdes para fondos, encabezados, bordes y detalles, creando una apariencia unificada.
Estilos para estados interactivos, como el hover en botones, cambiando el color de fondo y ofreciendo retroalimentación visual al usuario.
Clases descriptivas (por ejemplo, add-task, date-picker, tasks) para agrupar reglas de estilo y mantener el código ordenado y fácil de mantener.
El archivo script.js contiene la lógica interactiva. Una vez que el navegador carga el documento, se configura el manejo de eventos y la manipulación del DOM. Se utiliza el objeto localStorage del navegador para almacenar y recuperar las tareas, asegurando persistencia de datos.
Conceptos clave en JavaScript:
Manipulación del DOM: Se seleccionan elementos por su identificador (getElementById) y se interactúa con ellos (por ejemplo, limpiar listas, agregar elementos li con las tareas, etc.).
Eventos del navegador: Por ejemplo, cuando el usuario hace clic en el botón para mostrar tareas, se llama a una función que filtra y muestra las tareas. Cuando se envía el formulario para agregar una tarea, se llama a otra función que valida y guarda la nueva tarea.
Estructuras de datos: Las tareas se almacenan en un objeto (tareas), el cual contiene claves de tipo fecha y cada fecha asocia un arreglo (array) de tareas con hora y descripción.
Uso de localStorage: Se convierte el objeto de tareas a JSON (string) con JSON.stringify antes de guardarlo, y se lo recupera con JSON.parse. Esto permite que las tareas persistan entre recargas de la página.
Control de flujo y filtrado: Al mostrar las tareas, se filtran por fecha y por hora, si esta última se ha especificado. Además, se ordenan por hora para presentarlas cronológicamente.
Validación sencilla de campos: Antes de agregar una tarea, se verifica que la fecha, hora y descripción no estén vacías.
#AgendaWeb #HTML #CSS #JavaScript #TutorialEnEspañol #DesarrolloWeb #RevisandoMiAgenda #ElGrinch #AudioViral #LaAgendaDelGrinch #CodigoWeb #ProgramacionWeb