Vamos a utlizar una API para obtener datos sobre la situación del Covid19 en el mundo. Vamos a usar uno de los endpoint que nos ofrecen en esta Web

Un objetivo añadido es usar un componente para crear tablas de Bootstrap para poder volcar los datos en una tabla, sin tener que nosotros codificar casi nada.

El verdadero reto de esta práctica es entender la documentación de una herramienta que puede hacernos ahorrar mucho trabajo si aprendemos a utilizarla.

Demo

• Explora los diferentes endpoints que nos ofrecen en esta Web. Busca aquel que nos permite recuperar información sobre la pandemia para un conjunto de países. Úsala en el mismo navegador para asegurarte que sabes como invocarla.

• Establece el atributo adecuado en el tag table para que la biblioteca haga una llamada al endpoint y recupere información para un conjunto de paises. Por ejemplo, para los mismos que se muestran en la demo (Span, Italy, etc.)

• Haz posible que, al hacer clic en la columna de "casos activos por millón de habitantes"; esta pueda ser ordenada creciente o decrecientemente. Tan solo tienes que añadir un atributo en el tag adecuado.

• En la parte superior derecha de la Demo, aparece un botón gris que permite exportar todos los datos a diferentes formatos. La mayoría de componentes que podemos encontrar por Internet, como esta tabla de Bootstrap, permite expandir sus funcionalidades mediante la inclusión de plugins. Busca uno de ellos que te permita hacer esto. Pre-pista: busca "export" en la documentación de Bootstrap table.

• Seguramente la fecha de actualización de tu table aparece en formato timestamp. Podrías recorrer todas las celdas y cambiar el formato usando JavaScript. PERO para este proyecto, te animo a usar las herramientas que Boostrap Table ofrece. Busca como "maquetar" los datos que recuperas de la llamada AJAX para la columna de fecha de actualización.

• Queremos llamar la atención del usuario de manera que, si los casos activos por millón de habitantes superan los 10000; muestra la celda de color amarillo. Puedes utilizar un atributo de Bootstrap Table para cambiar el estilo de la celda en función del valor de la misma.

• Finalmente, permite que el usuario pueda añadir nuevos paises a la búsqueda mediante, por ejemplo, un cuadro de texto. Fíjate como funciona en la demo.