> 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😺

## 💡 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.

![Vamos al inicio de Stackblitz y damos click en el botón.](/files/-LfmF2EIn_D3rx1gxAJJ)

![Seleccionamos la opción de Angular](/files/-LfmFnfwUkx_kYXbVEwL)

![Verás algo como esto 👆](/files/-LfmGCMN4j_IokU0vzTP)

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' 💾

![](/files/-LfmHJVm7_7cFa8fmSA3)

## 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
<h1>CatClock 😼</h1>
```

{% endcode %}

Deberías ver algo así: 👇

![Añadimos el título a nuestra App](/files/-LfmJ9q7BDrlDIldnrXw)

{% hint style="info" %}
**¿Qué es una etiqueta?**&#xD83D;���

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 **\<div>\</div>**, **\<p>\</p>**, entre otras.

**\<h1>:** Es una etiqueta para los títulos

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

{% code title="app.component.html" %}

```markup
<h1>CatClock 😼</h1>

<img id="catImage" src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/normalTime.jpg" alt="CatClock">
```

{% endcode %}

Verás algo así: 👇

![Así puedes cualquier imagen en tu html](/files/-LfmLvvtRGq9Dll7kVVd)

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

![](/files/-LfmRoYc9EimRKS6eCvU)

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
<h1>CatClock 😼 {{party}} </h1>

<img id="catImage" src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/normalTime.jpg" alt="CatClock">
```

{% 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.&#x20;

Quedaría algo así: 👇

{% code title="app.component.html" %}

```markup
<h1>CatClock 😼 {{party}} </h1>

<img id="catImage" src={{urlImage}} alt="CatClock">
```

{% endcode %}

![Creamos nuestra imagen dinámica](/files/-LfmWsAU2QK99wQtLV9g)

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

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 %}

![](/files/-Lfm_QVoarYDpNXjt7iV)

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

⭐️ 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.&#x20;

{% 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: <vanessamarely@gmail.com>
{% endhint %}