Básico #3: Calcular la Edad ✌️
En este desafío vamos a crear una mini calculadora de edad. Practicaremos todo lo aprendido hasta ahora. 👍
Last updated
En este desafío vamos a crear una mini calculadora de edad. Practicaremos todo lo aprendido hasta ahora. 👍
Last updated
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!!! 😝
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' 💾
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
Deberías ver algo así: 👇
Recuerda
Una Etiqueta o tag es una 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>, <h1></h1>, <img />, entre otras
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.
Incluyamos un botón debajo de nuestro campo de texto.
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
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.
Conceptos vistos hasta ahora: 👇
Two-way-binding , 🔁 permite enviar datos desde el componente a la vista (HTML) y viceversa.
Banana box [()], 🍌 lo llaman así porque si usas tu imaginación parece una banana en una caja.
Directiva, se representa como un atributo en una etiqueta HTML, este atributo está dotando al elemento del DOM que la contiene de un comportamiento, ese comportamiento lo definimos nosotros y se puede utilizar en todos los elementos que queramos.
ngModel es una directiva que nos permite tener un enlace entre el componente de TS y un elemento en el HTML. Existen varios tipos de directivas.
(click) es una directiva de evento, con ella podemos controlar la ación del click, en nuestro caso el click del botón.
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:
Ahora te explicaré que hicimos en la función anterior: 👇
ageCalculator, es el nombre de la función.
Pondremos dentro un if que nos permitirá realizar el calculo solo si hemos ingresado un valor. Entonces preguntaremos si age tiene algún valor, traducido en if(this.age)
Arriba de la función has visto dos variables, una llamada age y showAge, las cuales usaremos para el calculo de la edad.
Dentro del if crearemos otras variables, las crearemos como constantes, usando la palabra const antes del nombre de la variable, ya que el valor de la variable solo se le asignará una sola vez y este no se cambiará.
La constante convertAge, toma lo que el usuario a ingresado en el input y lo convierte a una fecha usando el new Date, que es propio de JS para las fechas, al Date le pasamos la fecha ingresada, entre los paréntesis, que es controlada por la variable age y como la variable age fue declarada al inicio de nuestra App, fuera de nuestra función debemos usar antes la palabra this.
A la constante timeDiff, le asignaremos una función propia de JS Math.abs(),en esta función haremos la resta de la fecha actual Date.now(), menos la fecha almacena en la constante convertAge, que además le incluimos la función getTime(), esta función devuelve el valor numérico correspondiente a la hora para la fecha especificada según la hora universal.
Teníamos una variable llamada showAge a la cual le asignaremos la función Math.floor(),la cual nos devolverá un valor entero del calculo de la constante timeDiff que pasaremos a años. El resultado del calculo asignado a showAge, dará como resultados los años de la persona que ingreso la fecha.
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:
Te va a quedar todo parecido a lo siguiente: 👇
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.
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í:
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! 🎉
Aquí puedes encontrar el ejercicio resuelto.
Nota:
Si necesitas mentoría con este ejercicio puedes contactar a:
Vanessa M. Aristizabal Twitter: @vanessamarely Correo: vanessamarely@gmail.com
Has completado los desafíos básicos, ahora vamos a continuar con los intermedios 👇
