# 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í:
{% 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
```
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:
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í:
```
```
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 💪
{% hint style="success" %}
Has completado el **desafío #2**, ahora vamos a el **desafío #3 👇**
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ng-girls-colombia.gitbook.io/workshop/desafio-2-galeria.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.