Desafío #2: 🎥 Galería

¡Ha llegado el momento de hacer algo más rimbombante! Construyamos una galería 🎦

Paso #1 🔥

Lo primero que debemos hacer es usar una etiqueta de HTML. Si no has escuchado hablar de HTML, no te preocupes, HTML sólo es el lenguaje que le da estructura y contenido a las vistas en tu aplicación. 🎉

Vamos a empezar borrando todo el contenido del archivo app.component.html, así:

Recuerda guardar tu progreso haciendo click en el botón Save en la parte de arriba

Paso #2 😺

Ahora es momento de traer nuestra primera foto. Para hacerlo, solo basta con que pongas el siguiente código:

<img src="https://www.ngcolombia.com/cat.jpg">

Deberías ver algo así:

Paso #3 🐯

Lo que acabamos de poner es una etiqueta de HTML que se llama img, a través de ella, puedes agregar imágenes e incluso gifs animados! Lo único que debes hacer es agregar el link de una imagen a la propiedad src(Asegúrate de usar comillas dobles) ✌️

Ahora es tu turno de agregar las siguientes imágenes:

https://www.ngcolombia.com/cat2.gif
https://www.ngcolombia.com/cat3.gif
https://www.ngcolombia.com/cat4.gif
https://www.ngcolombia.com/cat5.gif
https://www.ngcolombia.com/cat6.gif

Deberías ver algo así:

Paso #4 📱

Ahora iremos un paso adelante, ahora utilizaremos una API (Application Programming Interface). Es simplemente una herramienta que nos permite obtener información de una base de datos. Por ejemplo, hay APIs que nos devuelven:

• Chistes

• Recetas de cocina

• Memes

• Universidades

Por ahora utilizaremos una API que nos entrega gifs animados de gatos! Abre el siguiente link varias veces:

https://thecatapi.com/api/images/get?format=src&type=gif

Deberías ver diferentes gifs animados cada vez! 😺🐱😺

Paso #5 🎃

Es momento de utilizar esta API es nuestra aplicación, hacerlo es muy sencillo, sólo basta con reemplazar el link de las imágenes con el link de la API, así:

<img src="https://thecatapi.com/api/images/get?format=src&type=gif">
<img src="https://thecatapi.com/api/images/get?format=src&type=gif">
<img src="https://thecatapi.com/api/images/get?format=src&type=gif">
<img src="https://thecatapi.com/api/images/get?format=src&type=gif">
<img src="https://thecatapi.com/api/images/get?format=src&type=gif">
<img src="https://thecatapi.com/api/images/get?format=src&type=gif">

Deberías ver algo así:

Paso #6 ⏳

La API está devolviendo el mismo gif las 7 veces. Para evitar esto es necesario agregar un parámetro a nuestro API. El parámetro es results_per_page:

https://thecatapi.com/api/images/get?format=src&type=gif&results_per_page=1
https://thecatapi.com/api/images/get?format=src&type=gif&results_per_page=2
https://thecatapi.com/api/images/get?format=src&type=gif&results_per_page=3
https://thecatapi.com/api/images/get?format=src&type=gif&results_per_page=4
https://thecatapi.com/api/images/get?format=src&type=gif&results_per_page=5
https://thecatapi.com/api/images/get?format=src&type=gif&results_per_page=6
https://thecatapi.com/api/images/get?format=src&type=gif&results_per_page=7

Paso #7 🎭

Ahora, qué crees que pasaría si quisiéramos tener 100 gifs al tiempo? O incluso 1000? O 1 millón? 😱

Tendríamos que hacerlo uno tras otro de manera manual... 😔

¡No te preocupes!

Más adelante aprenderás a hacerlo de manera automática a través de la programación! 🧠

Lo lograste 💪

Has completado el desafío #2, ahora vamos a el desafío #3 👇