Reto Zuckerberg

HTML

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Las redes sociales de Mark Zuckerberg</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
    <h1>Las redes sociales de Mark Zuckerberg</h1>
    <input type="checkbox" id="mayorEdad" />Soy mayor de edad.
    <div id="informacion" class="closed">
        <p id="mensaje">
            Para asegurar tu mayorĂ­a de edad, <br/>introduce tu fecha de nacimiento:
        </p>
        <input type="date" id="fechaNacimiento" class="transparente" />
        <input type="submit" id="enviar" value="Enviar" />
    </div>
    <script src="./js/index.js"></script>
</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;
}

.closed {
    display: none;
}

.open {
    display: block;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

JavaScript

let info = document.getElementById('informacion')
let mayor = document.getElementById('mayorEdad')
let fecha = document.getElementById('fechaNacimiento')
let enviar = document.getElementById('enviar')
enviar.disabled = true

info.classList.add('closed')

mayor.addEventListener('click', mayorEdad)

function mayorEdad() {
    if (mayor.checked) {
        info.classList.add('open')
        info.classList.remove('closed')
    } else {
        info.classList.remove('open')
        info.classList.add('closed')
    }
}

fecha.addEventListener('keyup', comprobarFecha)

function comprobarFecha(e) {
    let hoy = new Date()
    let mayoriaEdad = 18 * 365 * 24 * 60 * 60 * 1000
    let dateInp = new Date(e.target.value)

    if (hoy - dateInp >= mayoriaEdad) {
        console.log('Mayor')
        fecha.classList.add('green')
        fecha.classList.remove('red')
        enviar.disabled = false
    } else {
        console.log('Menor')
        fecha.classList.add('red')
        fecha.classList.remove('green')
        enviar.disabled = true
    }
}