Desafío #4: 🧠 Quiz

¡Hasta ahora lo has hecho excelente! ¿Qué tal si compartimos nuestro progreso en Twitter con los hashtag #NgColombia y #NgGirls? 📱

¡Comparte tu progreso! 📱

Si te ha gustado lo que has hecho hasta ahora, compártelo con tus amigos y familiares 👨‍👩‍👧‍👧

Haz click al botón SHARE y envía la APP URL para que todos vean tu increíble trabajo.

Paso #1 🔥

¡Ahora vamos a crear un proyecto nuevo! Para hacerlo solo basta con:

Abrir una nueva página
Ir a stackblitz.com
Y seleccionar la opción de Angular

Paso #2 👩‍🎨

Vamos a borrar todo el contenido de app.component.html. Y luego copiamos dentro de una etiqueta h1 nuestra primera y única pregunta:

<h1>¿Te ha gustado NgGirls hasta el momento?</h1>

Agreguemos las opciones de respuesta (Sí y No) con la etiqueta button de HTML:

<button>Sí</button>
<button>No</button>

Utilizamos botones para mostrar tu respuesta 👇.

Paso #3 🤹‍

No siempre vamos a querer que nuestro texto esté escrito directamente en el HTML, por lo general debemos guardar esos textos en variables para poder cambiar los mensajes de manera más dinámica a través de código. 😉

Una de las funcionalidad más geniales de Angular se llama String Interpolation. Ésta te permite enlazar tus variables al HTML:

Abre el archivo app.component.ts
Allí hay una variable llamada name. Vamos a cambiar su nombre a question
Y vamos a reemplazar su valor con una pregunta

question = "¿Te ha gustado NgGirls hasta el momento?"

Luego, en app.component.html cambiamos el texto de la pregunta por la variable question, haciendo uso de string interpolation:

<h1>{{ question }}</h1>

Si justo ahora tienes alguna pregunta, no olvides que tienes excelentes mentores a quienes puedes preguntarles 😏

Paso #4 😺

Como habrás notado, String Interpolation es bastante fácil ✌️. Ahora vamos a crear una función 🔥.

Una función en programación es simplemente una manera de definir una serie de acciones que queremos que se lleven a cabo en cierto momento.

Por ejemplo, si estuviéramos creando una calculadora, lo más seguro es que tendríamos funciones como: sumar, restar, dividir, etc.

En este caso vamos a crear una función llamada answer ✌️. El propósito de esta función es guardar en una variable la respuesta que selecciones al presionar los botones (sí o no).

Por supuesto, dependiendo del botón que sea presionado, vamos a almacenar una valor diferente. Para esto simplemente le agregaremos un parámetro a la función. Lo llamaremos value 🔮

En app.component.ts creamos la función answer con el parámetro value

Ahora vamos a crear una variable donde podamos almacenar la respuesta seleccionada. A esta variable la vamos a llamar response 📜

Nota que en nuestra función asignamos el valor del parámetro value a la variable response

Paso #5 🎬

¡Listo! Nuestra función está lista 🎉 Es momento de hacer uso de ella cuando el usuario presione alguno de los dos botones.

Para capturar la acción del usuario podemos utilizar Event Binding. Un mecanismo que nos proporciona Angular para llamar funciones desde el HTML.

Sólo basta con poner la palabra click entre paréntesis y asignarle la función que deseamos llamar entre comillas dobles:

<button (click)="answer('Si')"> Si </button>

Nota cómo pasamos el valor sí entre comillas simples en el archivo app.component.html

💪 Ahora es tu turno de agregar el evento click al botón No 💪

Paso #6 ✍

Sólo nos falta usar String Interpolation para mostrar el resultado. Agreguemos la etiqueta h1 con la variable response

<h1> {{ response }} </h1>

Cuando le des click a alguno de los botones debería verse así:

Paso #7 🤡

¡Éste es el último paso!

Vamos a hacerlo más divertido agregando un emoji con una carita feliz (😃) o triste (😭) dependiendo de la respuesta.

Para esto, haremos uso de una funcionalidad de Angular llamada Pipes. Ellos nos permiten modificar la información que mostramos en el HTML de manera dinámica. Sigue estos pasos:

Ubica el mouse sobre la carpeta app, presiona click derecho y elige la opción Pipe:

2. Asigna el nombre emoji en la caja de texto que aparece y presiona enter:

Deberías ver una archivo nuevo llamada emoji.pipe.ts con el siguiente contenido: 👇

Allí verás algo que ya conoces: Una función ✌️

En este caso tienes la función transform con dos parámetros value y args

La función transform se encarga de transformar el texto en el HTML como queramos 🎉

En el método transform vamos a agregar la siguiente lógica:

if(value === "Si") {
  return value + " 😊";
}else if(value === "No") {
  return value + " 🙁";
}

Lo que acabas de ver se llama una Condición. Básicamente estamos diciéndole a nuestra aplicación que:

Si el valor que seleccione el usuario es "Sí" entonces va a concatenar un emoji feliz al final del texto
Si el valor que seleccione el usuario es "No" entonces va a concatenar un emoji triste al final del texto