Scribd
Cargar
7 vistas2 páginas

Crear App Web para Gestión de Contactos

El documento describe los requisitos para desarrollar una aplicación web de lista de contactos, incluyendo la estructura HTML, estilos CSS y funcionalidades JavaScript. La aplicación debe permitir la entrada, búsqueda, visualización y eliminación de contactos, así como la validación de campos. Se especifican detalles sobre el diseño y la interacción del usuario para asegurar una experiencia fluida.

Cargado por

Alejandro Gilli
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
7 vistas2 páginas

Crear App Web para Gestión de Contactos

El documento describe los requisitos para desarrollar una aplicación web de lista de contactos, incluyendo la estructura HTML, estilos CSS y funcionalidades JavaScript. La aplicación debe permitir la entrada, búsqueda, visualización y eliminación de contactos, así como la validación de campos. Se especifican detalles sobre el diseño y la interacción del usuario para asegurar una experiencia fluida.

Cargado por

Alejandro Gilli
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Examen: Crear una aplicación web de lista de contactos

Objetivo

Desarrollar una aplicación web que permita a los usuarios gestionar una lista de contactos. La aplicación
debe cumplir con los siguientes requisitos:

1. Estructura HTML

La página HTML debe seguir la siguiente estructura semántica:

 Un elemento principal que contenga toda la aplicación.

 Dentro del elemento principal:

o Una sección para la entrada de datos con:

 Un campo de texto para introducir el nombre del contacto.

 Un campo de texto para introducir el teléfono del contacto.

 Un botón para añadir nuevos contactos.

o Un campo de búsqueda para filtrar contactos por nombre.

o Una sección que contenga una lista de contactos. Cada contacto en la lista debe
contener:

 Un span para mostrar el nombre del contacto.

 Un span para mostrar el teléfono del contacto.

 Un botón para eliminarlo.

o Un párrafo para mostrar el número total de contactos.

2. CSS3

1. Al contenedor principal se le aplicará un ancho máximo de 600px, deberá estar centrado


horizontalmente sobre el body, tendrá un color de fondo blanco, un padding de 20px, y su caja
presentará una sombra con los valores x = 0, y = 4, un desenfoque de 10px y un color
determinado por la función rgba(0, 0, 0, 0.1).

2. El texto h1 estará centrado y debe tener un color #333.

3. Los campos de texto y el botón deben estar alineados verticalmente y tener un diseño limpio.

4. Los elementos de la lista de contactos deben tener un fondo gris claro, bordes redondeados, un
padding de 10px y un margen inferior de 10px.

5. El botón de eliminar debe tener un color de fondo rojo y texto blanco.

3. JavaScript

1 de 2
 Añadir dinámicamente nuevos contactos a la lista cuando el usuario haga clic en "Añadir".

 Filtrar la lista de contactos en tiempo real mientras el usuario escribe en el campo de búsqueda.

 Mostrar automáticamente el número total de contactos.

 Eliminar un contacto al hacer clic en el botón "Eliminar".

 Validar que los campos de nombre y teléfono no estén vacíos antes de añadir un contacto.

2 de 2

También podría gustarte