Reto #11 Redes sociales

Las redes sociales de Mark Zuckerberg

by didacticode

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Las redes sociales de Mark Zuckerberg</title>
        <link href="Reto11_RedesSociales.css" 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 que es cierto que eres mayor de edad, introduce tu fecha de nacimiento:
            </p>
            <input type="date" id="fechaNacimiento"/>
            <input type="submit" id="enviar" value="Enviar"/>
        </div>
        <p>Otro párrafo</p>
    </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(){
    //Cambiamos la visualización del div para que inicialmente no se vea
    document.getElementById("informacion").setAttribute("style", "display:none");
    //Deshabilitamos el botón de enviar inicialmente
    document.getElementById("enviar").disabled = true;

    //document.getElementById("mayorEdad").addEventListener("click",mostrarOcultar);
    document.getElementById("mayorEdad").addEventListener("click",toggle);

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

//Función que muestra u oculta el div si el checkbox está o no marcado, en Vanilla Javascript
function mostrarOcultar (evento){
    /*if (evento.target.checked) {
        document.getElementById("informacion").style = "display: block";
    } else {
        document.getElementById("informacion").style = "display: none";
    }*/
    document.getElementById("informacion").style.display = (evento.target.checked) ? "block" : "none";
}

//Función que muestra u oculta el div si el checkbox está o no marcado, en JQuery
function toggle (evento) {
    $("#informacion").toggle();
}

//Función que comprueba si una fecha de nacimiento introducida corresponde a una persona mayor de 18
function comprobarFecha(evento){
    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 (evento.target.value);
    if (hoy - fechaInput >= edad18anos){
        console.log("MAYOR");
        evento.target.style.backgroundColor = "green";
        document.getElementById("enviar").disabled = false;
    } else {
        console.log("MENOR");
        evento.target.style.backgroundColor = "red";
        document.getElementById("enviar").disabled = true;
    }
}