Reto 11. Las redes sociales de Mark Zuckerberg

Vanilla Javascript

by didacticode

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="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;
}

JavaScript

window.addEventListener("load",inicio);

function inicio(){
    //document.getElementById("informacion").setAttribute("style","visibility: hidden;");
    //document.getElementById("fechaNacimiento").setAttribute("style","visibility: hidden;");
    document.getElementById("informacion").setAttribute("style","display: none;");

    document.getElementById("mayorEdad").addEventListener("click",mostrarOcultar);    
    document.getElementById("fechaNacimiento").addEventListener("keyup",comprobarFecha);
}

function mostrarOcultar(elemento){
    if (elemento.target.checked) {
        document.getElementById("informacion").style = "display: block;";
    } else {
        document.getElementById("informacion").style = "display: none;";
    }
        document.getElementById("informacion").style.display = (elemento.target.checked) ? "block" : "none";
}

function comprobarFecha(elemento){
    let hoy = new Date(); // Fecha de hoy en milisegundos
    let edad18anos = 18 * 365 * 24 * 60 * 60 * 1000; //18 años en milisegundos
    let fechaInput = new Date(elemento.target.value);
    if (hoy-fechaInput >= edad18anos) {
        console.log("MAYOR");
        elemento.target.style.backgroundColor = "green";
        document.getElementById("enviar").disabled = false;
    } else {
        console.log("MENOR");
        elemento.target.style.backgroundColor = "red";
    }
}