Ejercicio 1:
Requerimientos del Ejercicio - Gestión de Nombres
Descripción:
Desarrollar una aplicación web que permita a los usuarios ingresar nombres en un formulario y visualizar una lista dinámica de estos nombres.
Funcionalidades:
Formulario de Ingreso de Nombres:
Un campo de entrada de texto y un botón para agregar nombres.
La inserción de un nombre activa una función JavaScript que actualiza la lista de nombres en la página.
Lista de Nombres:
Mostrar una lista dinámica de los nombres ingresados.
Los nuevos nombres deben agregarse a la lista sin recargar la página.
Tecnologías Utilizadas:
HTML, CSS y JavaScript.
Requisitos de Implementación:
Interfaz Atractiva:
Interfaz clara y agradable utilizando CSS para estilizar los elementos.
Interactividad sin Recarga de Página:
Actualización instantánea de la lista de nombres sin recargar la página.
Validación de Entrada:
Validación básica en el campo de entrada de texto para evitar nombres vacíos o inválidos.
Compatibilidad Multiplataforma:
Funcionalidad en diferentes navegadores y dispositivos.
Entregables:
Archivos HTML, CSS y JavaScript.
Código bien comentado y documentado.
HTML
Ejercicio 2:
Requisitos de Ejercicios: Creación de una Lista de Opciones
Objetivo:
Desarrollar una serie de ejercicios interactivos que permitan al usuario seleccionar entre varias opciones mediante una lista desplegable.
Requisitos Funcionales:
Cada ejercicio debe incluir un campo de entrada donde el usuario pueda introducir su elección y una lista de opciones.
La lista de opciones debe ser dinámica y reaccionar a las acciones del usuario.
Al seleccionar una opción, el ejercicio debe mostrarla de manera clara y visible.
Requisitos Técnicos:
Utilizar HTML, CSS y JavaScript para desarrollar los ejercicios.
Estructurar los ejercicios con archivos separados para HTML, CSS y JavaScript.
Implementar JavaScript para manejar la interactividad de las listas de opciones.
Requisitos de JavaScript (para la función proporcionada):
Definir una función llamada muestraOpcion() en un archivo JavaScript separado.
La función debe obtener todas las opciones de entrada con el atributo name igual a "elección".
Recorrer las opciones y mostrar la opción seleccionada en una ventana emergente de alerta.
Vincular la función al evento de clic de los elementos de entrada.
HTML
Ejercicio 3:
Requisitos para la función JavaScript "añadir Texto":
Obtener Texto Ingresado: La función debe obtener el texto ingresado por el usuario desde el campo de entrada de texto en el formulario.
Identificar Elementos HTML: Debe identificar los elementos HTML relevantes utilizando el método getElementById() de JavaScript.
Mostrar Texto Agregado: El texto ingresado por el usuario debe ser agregado dinámicamente a un elemento en la página, como un <div>. El texto debe ser agregado al elemento de destino utilizando la propiedad innerHTML.
Funcionamiento al Hacer Clic en el Botón: La función añadirTexto() debe ejecutarse cuando el usuario haga clic en el botón "Añadir texto".
Manejo del Valor del Campo de Entrada: Se debe asegurar que el valor del campo de entrada de texto sea capturado correctamente utilizando la propiedad value del elemento de entrada.
Actualizar Contenido Dinámico: El contenido existente en el área de visualización (<div> con él, id "mostrar_texto") debe mantenerse y el nuevo texto ingresado debe agregarse al final.
Control de Errores: Se deben manejar posibles errores, como la ausencia de texto ingresado por el usuario.
Optimización: Se debe implementar la función de manera eficiente para garantizar un rendimiento óptimo.
Estos requisitos asegurarán que la función añadirTexto() cumpla con su propósito de manera efectiva y brinde una experiencia de usuario satisfactoria.
HTML
Ejercicio 4:
Requisitos del formulario de números mayores
1. Interfaz de Usuario (HTML)
Crear un formulario con dos campos de entrada de texto para que el usuario pueda ingresar dos números.
Proporcionar un botón que, al hacer clic, activará la función para determinar el número mayor.
Cada campo de entrada de texto debe tener un identificador único (id) para ser referenciado desde JavaScript.
Incluir un archivo CSS externo para estilizar el formulario.
2. Validación de Entrada (JavaScript)
Al hacer clic en el botón, se debe ejecutar una función en JavaScript (mayorNum()).
Esta función debe recuperar los valores de los campos de texto y convertirlos a números enteros.
Verificar que ambos valores ingresados sean números válidos.
Determinar cuál de los dos números es mayor y mostrar un mensaje correspondiente.
Mostrar un mensaje de error si uno de los números no es válido o no se ha completado.
3. Estilo (CSS)
Utilizar un archivo CSS externo para aplicar estilos al formulario y sus elementos.
Estilizar el formulario y sus elementos para mejorar la experiencia del usuario y la legibilidad en diferentes dispositivos.
4. Integración (HTML y JavaScript)
Vincular el código JavaScript mediante un archivo externo para que interactúe con el formulario HTML.
Asegurar que la función mayorNum() se active correctamente desde el evento click del botón en el formulario.
Con estos requisitos, se asegura la creación de un formulario funcional que permite al usuario ingresar dos números y determinar cuál es mayor, con una experiencia de usuario mejorada y una presentación visual adecuada.
HTML
Comments