# 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?**��

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


---

# 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://shecodes.gitbook.io/she-codes-angular/workshop-v.2/basico-1-catclock.md?ask=<question>
```

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.