Reto 11. Las redes sociales de Mark Zuckerberg

Solo HTML

by OscarBeses

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Las redes sociales de Mark Zuckerberg</title>
        <link href="" rel="stylesheet" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="Reto11_RedesSociales.js"></script>
    </head>
    <body>
        <h1>Las redes sociales de Mark Zuckerberg</h1>
        <input type="checkbox" id="mayorEdad"/>Soy mayor de edad.
        <div id="informacion">
            <p id="mensaje">
              Para asegurar tu mayoría de edad, <br/>introduce tu fecha de nacimiento:
            </p>
            <input type="date" id="fechaNacimiento"/>
            <input type="submit" id="enviar" value="Enviar" disabled/>
        </div>
    </body> 
</html>

CSS

body{
  background: URL("https://youplanet.es/wp-content/uploads/2018/05/social-media-marketing-background-4.jpg");
  background-size: cover;
  font-family: sans-serif;
  color:black;
}

.invisible{
  visibility:hidden;
}
.visible{
  visibility:visible;
}

JavaScript

/*
* Hay que usar visibility porque display:none elimina del dom
*/
window.onload = function() {

  // Se oculta la información al cargar
  const divInformacion = document.getElementById('informacion');
  divInformacion.className = 'invisible';
  
  // Se visibiliza la información al marcar el check
  const checkMayorEdad = document.getElementById('mayorEdad');
  checkMayorEdad.addEventListener('click', function(event) {
	  divInformacion.className = checkMayorEdad.checked ? 'visible' : 'invisible';
  })
  
  // Al introducir la fecha se comprueba la validez para habilitar el boton de envío
  const inputNacimiento = document.getElementById('fechaNacimiento');
  inputNacimiento.addEventListener('change', function(event) {
  	const dateNacimiento = new Date(inputNacimiento.value);
  	const nacimientoMas18 = dateNacimiento.setFullYear(dateNacimiento.getFullYear() + 18);
  	const botonEnviar = document.getElementById('enviar');
    botonEnviar.disabled = nacimientoMas18 > new Date();
  })
}