Básico #3: Calcular la Edad ✌️
En este desafío vamos a crear una mini calculadora de edad. Practicaremos todo lo aprendido hasta ahora. 👍
💡 Introducción 💡
En este desafío haremos algo divertido aplicando los conceptos aprendidos de Angular, para realizar una App que nos permita calcular la edad.
¡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.



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
<h1>Calcular la Edad ⏳</h1>
Deberías ver algo así: 👇

Paso 3: Añadamos más etiquetas 🏷️
Debajo de nuestro titulo en el archivo app.component.html, vamos a añadir un campo de texto. Existen muchos tipos de campo de texto, el que vamos a incluir va a ser de tipo fecha.
<h1>Calcular la Edad ⏳</h1>
<input type="date" />

Incluyamos un botón debajo de nuestro campo de texto.
<h1>Calcular la Edad ⏳</h1>
<input type="date" />
<button type="button"> Calcular </button>

Paso 4: Creemos la funcionalidad de Calcular 🧠
Ahora a nuestro campo de texto vamos a usar un concepto llamado two-way-binding, para esto vamos añadirle algo llamado banana box [()] y dentro pondremos la palabra ngModel y lo haremos igual a una variable llamada age. Lo que haremos es que todo lo que escriba en el campo de texto será almacenado en age. Todo esto lo vamos a añadirle en nuestro archivo app.component.html
<h1>Calcular la Edad ⏳</h1>
<input type="date" [(ngModel)]="age" />
<button type="button"> Calcular </button>
A nuestro botón le vamos a añadir una directiva de evento el click, y le asignaremos el nombre de una función en la cual pondremos toda la lógica.
<h1>Calcular la Edad ⏳</h1>
<input type="date" [(ngModel)]="age" />
<button type="button" (click)="ageCalculator()"> Calcular </button>

Conceptos vistos hasta ahora: 👇
En nuestro app.component.ts vamos a crear una función, llamada ageCalculator(), esta función será la que realizará el calculo de la fecha ingresada. Vamos a añadir la función dentro del export class AppComponent y ademas reemplazaremos la variable llamada name='Angular' y pondremos la función que esta a continuación:
export class AppComponent {
age;
showAge;
ageCalculator(){
if(this.age){
const convertAge = new Date(this.age);
const timeDiff = Math.abs(Date.now() - convertAge.getTime());
this.showAge = Math.floor((timeDiff / (1000 * 3600 * 24))/365);
}
}
}
Ahora te explicaré que hicimos en la función anterior: 👇

Paso 5: Mostrar la Edad 🤠
Ya tenemos el cálculo de la fecha ingresada, ahora vamos a mostrarlo, usemos la interpolación que hemos aplicado anteriormente.
En el archivo app.component.html vamos incluir un texto y nuestra variable showAge, para mostrar los años de la persona. Debajo de nuestro botón pondremos la siguiente línea:
<p>Tu edad es {{ showAge }}</p>
Te va a quedar todo parecido a lo siguiente: 👇
<h1>Calcular la Edad ⏳</h1>
<input type="date" [(ngModel)]="age" />
<button type="button"> Calcular </button>
<p>Tu edad es {{ showAge }}</p>
Además vamos a añadir otra directiva *ngIf, para mostrar el texto sólo si se ha ingresado algún valor. Añade en la etiqueta <p> el atributo *ngIf.
<p *ngIf="age">Tu edad es {{ showAge }}</p>

Podemos hacer más bonita nuestra vista añadiendo en el CSS el siguiente código en el archivo app.component.css, para que nuestra App luzca así:
button {
cursor: pointer;
background: #f45c41;
border: 0;
border-radius: 6px;
color: white;
font-size: 16px;
height: 40px;
margin-bottom: 10px;
text-align: center;
min-width: 120px;
}
input {
border-radius: 10px;
box-shadow: 5px 5px 20px #cbcdd3;
color: #333;
font-size: 16px;
height: 40px;
text-align: center;
}
p {
color: #333;
font-size: 20px;
text-transform: uppercase;
}

😎 Tu Misión 😎
Nuestra aplicación se ve lista, podrías si aceptas la misión ponerle algo de estilos para que se vea más bonita 💪. Sino sabes como hacerlo puedes preguntarle a los mentores como puedes cambiar los estilos de los textos o del botón. 👍
⭐️ Puedes utilizar estilos que has usado en desafíos anteriores
💪💪¡¡Felicitaciones!! ¡Llegaste muy lejos! 💪💪
🎉 ¡LO LOGRASTE! 🎉
Has completado los desafíos básicos, ahora vamos a continuar con los intermedios 👇
Last updated
Was this helpful?