Básico #2 - Trasformando data 🗳🗂
En este desafío vamos a aprender sobre: Interpolación y pipes.
💡 Introducción 💡
Hora de aplicar lo aprendido, vamos a jugar con HTML, Css y Angular 😎 Realizaremos una aplicación que nos permita cambiar la manera en la que vemos la información en pantalla.
¡Aquí puedes encontrar el demo!
Paso 1: Creemos nuestra App de Angular 🅰️
Entra a www.stackblitz.com, y verás algo como esto:


Paso 2: Vamos a crear unas variables 🗳
Ya dominas perfectamente el concepto de que es una variable 🤓vamos a crear las variables que van a contener la información que vamos a mostrar en nuestra aplicación. Copiaremos lo siguiente en el archivo app.component.ts.
flipCard = false;
today = new Date();
totalBill = 203094.12;
text = 'SHe CoDes AnGulAr';
Deberías hacer algo así, y tu resultado se deberá ver así:👇

Paso 3: Vamos a construir el esqueleto de nuestra aplicación 💀
En esta parte vamos a crear la estructura HTML que le dará vida y estructura a la forma en que presentaremos los datos en pantalla. En este archivo llamado app.component.html vamos a reemplazar su contenido, por el siguiente código.
<div>
<div class="centerTitle">
<h1>Vamos a cambiar la forma en la que vemos nuestra información en pantalla</h1>
</div>
<div>
<div class="cardContainer">
<div class="card" [class.flipped]="flipCard" (click)="onClickCard()">
<div class="front">
<h3 class="cardTitle">
¡¡¡ Dame Click !!!
<!-- TODO: Aquí colocaremos datos sin modificar -->
</h3>
</div> <!-- close card front -->
<div class="back">
<div class="content">
<h3 class="cardTitle">
<!-- TODO: Aquí colocaremos los mismos datos modificados -->
</h3>
</div> <!-- close card back content -->
</div> <!-- close card back -->
</div> <!-- close card -->
</div> <!-- close cardContainer -->
</div>
</div>

Deberías hacer algo así, y tu resultado se deberá ver así:👇

Paso 4: Una función pequeñita 👶🍼
Vamos a crear una función simple, pero poderosa 💪🏽con ella controlaremos el valor de nuestra variable flipCard. Adicionaremos en el archivo app.component.ts el siguiente código debajo de la declaración de variable text.
onClickCard() {
this.flipCard = !this.flipCard;
}
Deberías hacer algo así, y tu resultado se deberá ver así:👇

Paso 5: Hora de transformar nuestros datos 🧾⚡️🔖
Llego la hora de cambiar el contenido de nuestras variables, sin cambiar el contenido de nuestras variables 🤨💬what? 🥴¡sí! nuestro objetivo será mostrar el valor de nuestras variables, sin asignarle un valor diferente, solo modificaremos la forma en la que se ve el mismo valor en pantalla. En este archivo llamado app.component.html vamos a reemplazar la línea "<!-- TODO: Aquí colocaremos datos sin modificar -->", por el siguiente código.
<br/>
Hoy: {{ today | date }}
<br/>
<!-- USD - American dollar -->
Valor factura: {{totalBill | currency:'USD'}}
<br/>
Redeondeo Número: {{totalBill | number}}
<br/>
Minúsculas: {{text | lowercase}}
Deberías hacer algo así, y tu resultado se deberá ver así:👇

En este archivo llamado app.component.html vamos a reemplazar la línea "<!-- TODO: Aquí colocaremos los mismos datos modificados -->", por el siguiente código.
Hoy: {{ today | date:'fullDate' }}
<br/>
<!-- CLP - Chilean Peso -->
Valor factura: {{totalBill | currency:'CLP'}}
<br/>
Redeondeo Número: {{totalBill | number:'1.0-0'}}
<br/>
Mayúsculas: {{text | uppercase}}
Deberías hacer algo así, y tu resultado se deberá ver así:👇

Paso 6: Agregar estilos al tablero de juego 🎨🖌
Ya hicimos toda la lógica 🧠, ahora vamos a ponerle personalidad 👩🎨 Reemplaza el contenido de styles.css con el siguiente código:
/* Add application styles & imports to this file! */
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
body {
font-family: 'Roboto Slab', serif;
font-weight: 300;
font-size: 16px;
color: #333;
background: #eee;
background-image: url(https://subtlepatterns.com/patterns/gplaypattern.png);
background-position: center center;
}
h1 {
margin: 0.5em 0 1em 0;
font-size: 1.8em;
font-weight: 700;
color: #096AA3;
}
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.centerTitle {
padding: 3%;
margin: 20px auto;
text-align: center;
}
.cardContainer
{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card
{
width: 99%;
height: 200px;
cursor: pointer;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped
{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 1.5em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 25px;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
/*Colors for front and back applied here*/
.cardContainer:first-child .card .front {
background: #2aa9e0;
}
.cardContainer:first-child .card .back {
background: #2aa9e0;
}
h3.cardTitle {
line-height: 1.2em;
font-weight: 600;
}
.content h3.cardTitle
{
margin-top: 0%;
}
.content {
padding: 2% 0% 4% 1%;
font-weight: 100;
font-weight: bold;
}
Deberías hacer algo así, y tu resultado se deberá ver así:👇

🎉 ¡LO LOGRASTE! 🎉
😎 Tu Misión 😎
Con lo que aprendiste en el ejercicio de hoy, crea una nueva card, que contenga un pipe diferente a los usados hoy (aquí un pastelito https://angular.io/api/common#pipes), ponle el color que quieras 🎨👩🎨y asegúrate que cuando le des click las card se volteen de forma independiente (solo crea una variable que funcione como flipCard 😉).
Esta adición es para retar tu curiosidad, podrías proponer la solución que tu quieras.
Has completado los Trasformando data 🗳🗂 ahora vamos para nuestro siguiente desafío 👇
Last updated
Was this helpful?