> For the complete documentation index, see [llms.txt](https://ng-girls-colombia.gitbook.io/workshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ng-girls-colombia.gitbook.io/workshop/desafio-2-galeria.md).

# Desafío #2: 🎥 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í:

![](/files/-LK3CCIeTrDJDiJsT7Oh)

{% hint style="info" %}
Recuerda guardar tu progreso haciendo click en el botón **Save** en la parte de arriba
{% endhint %}

### Paso #2 😺

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

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

Deberías ver algo así:

![](/files/-LK3I4Oj44CJiAkzTs9t)

### 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:&#x20;

```
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í:

![](/files/-LK3NVtxEZPswhgK5X_m)

### 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í:

![](/files/-LK3c0iKsYs7JsKqhzVU)

### 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
```

![](/files/-LK3h_-hmfExYUDp1cdU)

### 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 💪

{% hint style="success" %}
Has completado el **desafío #2**, ahora vamos a el **desafío #3 👇**
{% endhint %}