Ejercicio JS – Ventana emergente control de edad

Ejercicio JS – Ventana emergente control de edad

Print Friendly, PDF & Email
Ejercicio JS – Ventana emergente control de edad
Valora esta entrada
En este ejercicio vamos a aplicar los conceptos de:

  • Llamada a nodos del documento web.
  • Asignación de eventos mediante javascript.
  • Modificar el CSS mediante javascript.

A nivel de CSS vamos a practicar los conceptos de :

  • Centrado horizontal y vertical de una capa.
  • Propiedad opacity.
  • Posicionamiento fijo y absoluto de cajas.

Vayamos al ejercicio.

Ejercicio completo de ventana emergente con Javascript
Resultado final del ejercicio

Enunciado

Dado un documento html que únicamente contiene texto de tipo Lorem Ipsum hacer que cuando se cargue el documento haga salir una ventana emergente que pregunte a los usuarios si son mayores de edad o no.

  • En caso de ser mayores de edad la venta emergente desaparece y el texto de fondo pasa a verse con claridad.
  • En caso de no ser mayor de edad el usuario es redirigido a otra página.

Como requisitos:

  • La ventana sólo se cerrará si se hace click en algún botón.
  • Por mucho scroll que haga el usuario la ventana emergente no desaparece si no se selecciona alguna opción.

Si lo prefieres puedes usar este documento como punto de partida.

Solución del ejercicio

La idea es crear un div centrado verticalmente y horizontalmente con posicionamiento fijo de dimensiones 400px x 300px y el contenido de la imagen.

El contenido del documento web estará atrapado dentro de una capa, de modo que inicialmente tendrá definida la propiedad opacity.

Cuando se haga click en la opción de mayor de 18 años se ocultará la capa y se quitará el opacity inicial.

¿Como queda el documento css?

*{
    box-sizing:border-box;
    margin:0;
    padding:0; 
    }

    #container{
    opacity:.3;
    }

    .emergente{
        width:400px;
        height:200px;
        position:fixed;
        background-color:#FFFAFA;
        top:50%;
        left:50%;
        margin-left:-200px;
        margin-top:-100px;
        border:1px solid #000;
        border-radius:10px;
        padding:20px;
        text-align:center;
        box-shadow: 10px 10px 10px #ccc;
    }

    .emergente p{
        font-size:24px;
    }

    .emergente .boton{
        font-size:18px;
        padding:10px;
        border:1px solid #000;
        border-radius:5px;
        display:inline-block;
        width:150px;
        margin-top:32px;
        box-shadow:5px 5px 5px #ccc;
    }
    .menor{background-color:#FAF0E6;}
    .mayor{background-color:#F5F5DC;}
    .menor:hover{background-color:#ff0000;}
    .mayor:hover{background-color:#00ff00;}

¿Como queda el documento html?

<div id="container">...</div> <!--100 párrafos con contenido lorem ipsum-->
        
        <div class="emergente">
        <p>Debes ser mayor de edad para poder visitar este sitio web</p>
        <div class="boton menor">Tengo menos de 18 años</div>
        <div class="boton mayor">Soy mayor de edad</div>

</div>

¿Como queda el JS?

window.onload = init;
    function init(){
        document.querySelector(".emergente .menor").addEventListener("click",adios);
        document.querySelector(".emergente .mayor").addEventListener("click",hola);
    }
        
    function adios(){
        location.href="https://francescricart.com";
    }    
    function hola(){
        document.querySelector(".emergente").style.display="none";
        document.querySelector("#container").style.opacity="1";
    }

Si juntamos todas las piezas resolvemos el ejercicio.

Podéis descargarlo en este enlace.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejercicio – ¿Qué declaraciones de variables son erróneas en JS?
- 144
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Control de acceso con cookies Javascript para web de mayores de edad
- 36
Ejercicio avanzado de javascript para controlar el acceso de usuarios a una página web mediante el uso de cookies. Incluye solución.
Sintaxi y gramática básica de las variables en javascript
- 249
Javascript es un lenguaje. Tiene una sintaxis y una gramática básicas que hay que aprender. Vemos cuales son estas normas para el caso de las variables en JS y dónde debes hacer hincapié en no equivoc...
Ejercicio – Programación de una ventana infinita cansina en JS
- 118
Ejercicio que pregunta iterativamente el color del caballo blanco de santiago hasta que se resuelve. Incluye solución.
Métodos imprescindibles para trabajar con fechas en Javascript
- 232
Compendio de métodos para trabajar con fechas en Javascript. Comparto mi chuleta de métodos para obtener y crear nuevas fechas.
Ejercicio – Corrige los errores (concepto acoplamiento javascript)
- 154
Ejercicio javascript en el que se repasa el concepto de acoplamiento y se piden corregir algunos errores típicos.
Ejercicio JS – Formulario con un campo oculto
- 56
Ejercicio javascript con un campo que se muestra cuando se selecciona un asunto determinado mediante un select. Incluy resolución.
Eliminar el comportamiento por defecto de un elemento html
- 286
Explicamos como desactivar el comportamiento por defecto de un elemento HTML mediante el uso del método javacript preventDefault()
Lista de la compra con javascript perfeccionada con cookies
- 29
Ejercicio javascript avanzado que crea una lista de la compra y almacena la información mediante cookies. Incluye solución.
Introducción a las animaciones Javascript: setInterval() y setTimeout()
- 668
Resumimos las funciones setInterval(), clearInterval y setTimeout(). Cuales son sus parámetros, que es una función anónima y como la llamamos.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.