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!

¿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.

Seleccionamos la opción de Angular

Verás algo como esto 👆

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

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

app.component.html

<h1>CatClock 😼</h1>

Deberías ver algo así: 👇

Añadimos el título a nuestra App

¿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

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

app.component.html

<h1>CatClock 😼</h1>

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

Verás algo así: 👇

Así puedes cualquier imagen en tu html

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'

app.component.ts

export class AppComponent  {
  party = 'Party';
}

Verás algo así: 👇

Ahora añadamos nuestra variable a nuestro título en el archivo app.component.html.

¿Qué es una variable? es como un caja, (donde puedes poner cosas 🎁). Ésta almacenará lo que nosotros queramos, textos, números, etc 👍

Para usar la interpolación se usan dos llaves {{ }} dobles.

app.component.html

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

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

app.component.ts

export class AppComponent  {
  party = 'Party';
  urlImage = 'https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/08/normalTime.jpg';
}

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

app.component.html

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

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

Creamos nuestra imagen dinámica

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:

app.component.ts

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';
    }
  }
}

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! 🎉

Aquí puedes encontrar el ejercicio resuelto.

😎 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.

Has completado el desafío #1, ahora vamos a el desafío #2 👇

Nota:

Si necesitas mentoría con este ejercicio puedes contactar a:

Vanessa M. Aristizabal Twitter: @vanessamarely Correo: [e-mail]