Usando la API-Rest del sitio web https://reqres.in/ que contiene la documentación de un API pública. He creado un archivo HTML nuevo y un archivo JS para programar las instrucciones necesarias para cumplir con los siguientes requerimientos, utilizando Bootstrap para la maquetación, fetch para hacer las peticiones al backend, jQuery para manipular el HTML y SweetAlert para mostrar avisos al usuario.

Características:

1. Al cargar la página (ready), mostrar el listado de todos los "users" (Read de todos los recursos, es decir, un get de todos los recursos). Mostrar una imagen loading mientras llega la respuesta y luego esconder la imagen de loading cuando se muestren los resultados.


2. Botón con el texto "Agregar" que muestra una ventana modal con inputs necesarios para introducir los datos de un nuevo "user". En la ventana modal esta el botón "Guardar" que hace un llamado al API para registrar el nuevo "user" (Create de un recurso, es decir, un post de un recurso). Cuando la respuesta es exitosa, se muestra un mensaje de éxito y esconder la ventana modal, en caso contrario, se muestra un mensaje de error y mantiene visible la ventana modal. Si el registro es exitoso, el nuevo registro debe aparecer al final del listado del objetivo anterior.


3. Al hacer click sobre un "user", se muestra una ventana modal con inputs necesarios para modificar los datos del "user". En la ventana modal colocar un botón "Guardar" que haga un llamado al API para modificar el "user". Para lograrlo, debe hacer un llamado al API para obtener los datos del "user" sobre el cual se hizo click (Read de un recurso especifico, es decir, get de un recurso particular usando su identificador único). Al llegar la respuesta del backend, se debe mostrar en los inputs ventana modal inicializados con los datos recibidos del backend, para que el usuario pueda modificarlos.


4. Al hacer click en el botón "Guardar", se hace un llamado al API para hacer update de los datos del usuario (Update de un recurso). Al llegar la respuesta del API, mostrar un mensaje de éxito o error dependiendo de la respuesta.


5. Al lado de cada usuario, un botón que permita eliminar ese "user" (Delete de un recurso usando su identificador único). Está programado que al hacer click sobre ese botón, hacer un llamado al API para eliminar ese "user". Si la respuesta es exitosa, se debe eliminar ese usuario del listado (mostrar una imagen de loading mientras llega la respuesta).

Creación de un Frontend Web, utilizando en preprocesador SASS que permite generar, de manera automática, hojas de estilo, añadiéndoles características que no tiene CSS, y que son propias de los lenguajes de programación.

Características:

1. Se crearon 2 mapas, uno llamado coloresPar y otro llamado coloresImpar. En ellos se crearon dos colores en cada uno con un nombre significativo para su uso.


2. Se realizo una estructura condicional que permita manejar la lógica para los colores pares e impares para ser manejados según se indica en el punto 3


3. Un ciclo que permita establecer el color de los recuadros de la maqueta indicada, con el uso de la estructura condicional solicitada en el punto 2.


4. Se estableció un mixin para dar estilo al título "Building a House?".


5. Mixin para dar estilo de los elementos dentro de los recuadros de colores.

FrontEnd Web alternativo a la empresa CADI F1, usando los datos que se obtienen del API https://api.cadif1.com. Se creó un archivo index con un navbar con 4 opciones: Principal, Cursos, Carreras y Registro, y un div vacío. Se crearon 4 archivos HTML adicionales al index: uno con el nombre secciones.html para mostrar las secciones que están por comenzar, otro con el nombre cursos.html para mostrar los cursos que dicta la academia, otro con nombre registro.html y otro con el nombre carreras.html para mostrar las carreras.

Características:

1. Usando el método load de jQuery, al hacer click en su respectiva opción (Principal -> secciones.html, Cursos -> cursos.html, Carreras -> carreras.html, Registro -> registro.html), se cargan en el div vacío del index, el HTML de cada página, mostrando inicialmente (es decir, en el ready del index) el contenido del archivo secciones.html. No hay hipervínculos tradicionales con el atributo href apuntando al archivo HTML porque se muestra el contenido HTML de cada página sin que cambie la URL en el navegador.


2. Usando getJson de jQuery, se obtiene y muestra en cada página lo que retorna el ENDPOINT correspondiente: en secciones.html lo que retorna https://api.cadif1.com/seccion, en cursos.html lo que retorna https://api.cadif1.com/curso y carreras.html lo que retorna https://api.cadif1.com/carrera.


3. Creado el archivo HTML registro.html que permite a un alumno registrarse como interesado a un curso. En este archivo agrega un formulario HTML para solicitar los datos personales del alumno (cédula, nombre y correo) y también tiene un SELECT con las áreas de estudio disponibles en la academia, en otro SELECT los cursos disponibles en la academia.


4. Se validan que los datos del formulario no estén vacíos antes de enviarlos. Se muestran los mensajes de error de validaciones con SweetAlert. Si todo es válido, mostrar un confirm usando SweetAlert. Si el usuario responde que sí, usando el método $.post de jQuery se envían los datos al endpoint https://api.cadif1.com/test.


5. Si el registro es exitoso, se programó que se muestre un mensaje de éxito y se limpie el formulario, pero si el registro no es exitoso, se muestra un mensaje de error y no se borra el formulario. Los mensajes de error se muestran usando SweetAlert.