> For the complete documentation index, see [llms.txt](https://shecodes.gitbook.io/she-codes-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shecodes.gitbook.io/she-codes-angular/workshop-v.2/basico-1-catclock.md).
# Básico #1: CatParty😺
Es la hora de la acción ⏰. Crearemos una alarma gatuna para despertar a nuestro gatito y que esté listo para la acción.
## 💡 Introducción 💡
En este desafío haremos algo divertido aplicando conceptos básicos de Angular, los cuales iremos describiendo a medida que realicemos cada uno de los pasos descritos abajo.
[**¡Aquí puedes encontrar el demo!**](https://angular-catparty.stackblitz.io/)
¿Estás list@?
**Es hora de la Acción!!! 😝**
## Paso 1: **Creemos nuestra App de Angular** ⭐️
Primero iremos a el inicio de **Stackbliz** y crearemos una App de Angular.
Seleccionamos el texto del archivo **app.component.html**, lo borramos (presionando la tecla delete de tu compu 💻) y guardamos los cambios, seleccionando en la parte superior la opción de 'Save' 💾
.gif?alt=media\&token=8924bfbd-4c41-4857-b397-9e9f32e455de)
## Paso 2: **Añadamos un título** 🏁
Iremos al archivo **app.component.html** y vamos a usar unas etiquetas o tags de HTML para poner un titulo.
Copiaremos lo siguiente en el archivo **app.component.html**
{% code title="app.component.html" %}
```markup
CatClock 😼
```
{% endcode %}
Deberías ver algo así: 👇
{% hint style="info" %}
**¿Qué es una etiqueta?**�
Las etiquetas o tags son la forma de escribir código HTML, es la semántica del HTML. Son fragmentos de texto rodeados por corchetes angulares `< >,` que tienen funciones y usos específicos, existen muchas etiquetas como **\\
**, **\\
**, entre otras.
**\:** Es una etiqueta para los títulos
**\![]()
**: Es una etiqueta para imágenes
{% endhint %}
## Paso 3: **Añadamos una imagen de un gatito** 🖼️
Debajo de nuestro titulo en el archivo **app.component.html**, vamos a añadir la etiqueta para las imágenes, con una imagen de un gatito.
Copiaremos lo siguiente en el archivo **app.component.html**
{% code title="app.component.html" %}
```markup
CatClock 😼
```
{% endcode %}
Verás algo así: 👇
## Paso 4: **Añadamos un texto dinámico** 📝
Vamos a usar un término en Angular llamado **Interpolación** (conocida en inglés como "string interpolation"), nos permite desplegar algo declarado en código en nuestra vista o HTML. Crearemos una variable llamada "**party**" en el archivo **app.component.ts**.
Podemos reemplazar la variable que estaba creada llamada **name** y la renombramos a **party** en el archivo **app.component.ts** dentro del **export class AppComponent** y lo demas no lo borramos.
Le quitamos el valor de **'Angular'** y le pondremos **'Party'**
{% code title="app.component.ts" %}
```typescript
export class AppComponent {
party = 'Party';
}
```
{% endcode %}
Verás algo así: 👇
.gif?alt=media\&token=063fa33a-4fe8-4308-9af3-b3d24b6f7363)
Ahora añadamos nuestra variable a nuestro título en el archivo **app.component.html**.
{% hint style="info" %}
**¿Qué es una variable?** es como un caja, (donde puedes poner cosas 🎁). Ésta almacenará lo que nosotros queramos, textos, números, etc **👍**
{% endhint %}
Para usar la interpolación se usan dos llaves **{{ }}** dobles.
{% code title="app.component.html" %}
```markup
CatClock 😼 {{party}}
```
{% endcode %}
## Paso 5: **Crearemos una imagen dinámica** 🖌️
Sabemos cómo crear texto dinámico, ahora vamos a crear una imagen dinámica.
Para ello copiaremos la url de la imagen que esta en el 'src' y la pondremos en una nueva variable.
Crearemos una variable llamada **urlImage** y pondremos la url copiada allí.
En el archivo **app.component.ts** ve hasta la línea 8, donde encontraras el **export class AppComponent** y añade dentro de el, debajo de la variable **party**, la variable de urlImage, no borres lo demás, te debe quedar algo así en el **export class AppComponent**: 👇
{% code title="app.component.ts" %}
```typescript
export class AppComponent {
party = 'Party';
urlImage = 'https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/normalTime.jpg';
}
```
{% endcode %}
Luego en el archivo **app.component.html** borraremos del src la url de la imagen y pondremos en su lugar el nombre de la nueva variable entre llaves dobles.
Quedaría algo así: 👇
{% code title="app.component.html" %}
```markup
CatClock 😼 {{party}}
```
{% endcode %}
.gif?alt=media\&token=006a603e-0ba9-4eef-9ae4-87551c61eba7)
## Paso 6: **Remplacemos nuestra imagen con algo de lógica** 🧠
Ahora lo que haremos es que cuando reemplacemos el texto de nuestra imagen en el código, esta cambiará.
Para ellos usaremos algo de lógica, colocaremos un **if** (nos sirve para preguntar) en nuestro archivo **app.component.ts**, donde preguntaremos si el texto de la variable **party** es igual a 'Party' si esto se cumple se mostrará una nueva imagen.
Copia debajo la variable **urlImage** el siguiente código:
{% code title="app.component.ts" %}
```typescript
export class AppComponent {
party = 'Party';
urlImage = 'https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/normalTime.jpg';
constructor() {
if(this.party === 'Party'){
this.urlImage = 'https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/partyTime.jpg';
}
}
}
```
{% endcode %}
.gif?alt=media\&token=cad327fb-21cc-463d-8592-d6990ab2338e)
Si reemplazas el texto la variable **party**, podrás ver la imagen inicial. Con el valor 'Party' veras los gatos saltando.
¡Felicitaciones hemos terminado el primer desafío!
🎉 ¡**LO LOGRASTE!** 🎉
{% hint style="info" %}
[**Aquí**](https://stackblitz.com/edit/angular-catparty) puedes encontrar el ejercicio resuelto.
{% endhint %}
## 😎 Tu Misión Especial 😎
Parece que nuestra aplicación está lista pero debemos editar el texto desde la lógica 😵.
⭐️ Se podría poner un botón que al darle click nos cambie el texto, pero esto te lo dejamos de tarea ⭐️
A medida que vas desarrollando los demás desafíos aprenderás como añadir un botón que al presionarlo pueda realizar este cambio, o puedes poner un campo de texto o idearte tu propia solución.
Esta adición es para retar tu curiosidad, podrías proponer la solución que tu quieras.
{% hint style="success" %}
Has completado el **desafío #1**, ahora vamos a el **desafío #2 👇**
{% endhint %}
{% hint style="info" %}
**Nota:**
Si necesitas mentoría con este ejercicio puedes contactar a:
Vanessa M. Aristizabal\
Twitter: @vanessamarely\
Correo:
{% endhint %}