Las redes sociales de Mark Zuckerberg
Javascript y JQueryEventos
La semana pasada recibíamos un reto de Mark Zuckerberg en el que nos pedía una pequeña funcionalidad para controlar la edad de los nuevos usuarios de sus redes sociales. Podéis consultar los detalles del reto aquí.
Enunciado del reto:
La carta de Mark decía así:
¡Hola, chicos!
Necesito vuestra ayuda para implementar un pequeño código en mis formularios de creación de cuentas para que, cuando un usuario indique que es mayor de edad (de momento, 18 años), introduzca además su fecha de nacimiento para comprobar que es cierto.
Como me corre bastante prisa, únicamente quiero que el formulario haga dos cosas muy simples:
1. Al marcar el checkbox se mostrará un pequeño mensaje, un campo de fecha y un botón que inicialmente estará deshabilitado.
2. Si el usuario introduce correctamente la fecha y realmente tiene 18 años o más, se habilitará el botón Enviar.
Una vez que implementéis esto os pediré una segunda funcionalidad para diferenciar entre las redes sociales que manejo y sus diferentes mayorías de edad. Pero eso será en otro momento…
Os dejo el código fuente del formulario. ¡Gracias por todo!
Soluciones al reto
En esta ocasión os traigo dos soluciones al reto:
- La primera, utilizando Vanilla Javascript para hacer referencia a los elementos.
- La segunda, utilizando JQuery, lo que nos reduce sustancialmente el código.
- En ambos casos utilizo la misma función de comprobar la edad de la persona a partir de su fecha de nacimiento.
¿Qué aprenderás en el vídeo?
En este vídeo veremos:
- La diferencia entre visibility:hidden y display:none;
- Cómo hacer referencia a elementos del DOM utilizando Vanilla Javascript y JQuery.
- Cómo utilizar la función toggle de JQuery.
- Cómo calcular el tiempo transcurrido entre una fecha y el día de hoy.
- Qué es un operador ternario y cómo utilizarlo.
Vídeo y código fuente
¡¿A qué esperas?! ¡Echa un ojo al vídeo de la solución!
Código fuente de la solución
¿Tú cómo lo habrías hecho? ¡Deja tus ideas en los comentarios!
Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…
Hola ADA te mando el codigo un poco diferente, a ver que te parece, comentame los fallos.
un saludo.
https://jsfiddle.net/7snxz5jb/
¡Hola, Pepe! ¡Y en primer lugar, muy buen intento y gracias por tu aporte en los comentarios!
Como habrás comprobado, la solución es muy parecida a la mía, especialmente en el cálculo de las fechas.
Sin embargo, soy partidaria de hacerlo a tu manera: me gusta más tu propuesta a la hora de utilizar clases en lugar de trabajar directamente con el método style (que desde el punto de vista del reto está bien para no tener que explicar cómo funciona CSS, pero no es lo más adecuado).
Es más, si yo tuviera que implementar algo similar lo habría hecho como tú: modificando el CSS y trabajar con métodos de clase en Javascript. No solo es mucho más intuitivo, sino que también es más eficiente.
Así que, mi enhorabuena… ¡y a seguir practicando!
Muchas gracias