• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉNES SOMOS
  • FAQ
  • ACCEDER
  • CONTACTO

Reto resuelto: Las redes sociales de Mark Zuckerberg

Publicado el 31/10/2020 por didacticode 3 Comments

Redes sociales

Las redes sociales de Mark Zuckerberg

Javascript y JQuery

Eventos


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…

Filed Under: Ejercicio resuelto, Reto Tagged With: eventos, javascript

Reader Interactions

Comments

  1. Pepe says

    13/11/2020 at 16:02

    Hola ADA te mando el codigo un poco diferente, a ver que te parece, comentame los fallos.
    un saludo.
    https://jsfiddle.net/7snxz5jb/

    Responder
    • didacticode says

      14/11/2020 at 20:51

      ¡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!

      Responder
      • Pepe says

        18/11/2020 at 18:32

        Muchas gracias

        Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2021

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.