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:

3 formas de cambiar la ubicación de búsqueda en Google
- 355
En esta entrada encontrarás 3 formas distintas de modificar tu ubicación de búsqueda en google sin necesidad de que te tengas que desplazar.
Ejercicio – Programación de una ventana infinita cansina en JS
- 204
Ejercicio que pregunta iterativamente el color del caballo blanco de santiago hasta que se resuelve. Incluye solución.
Eliminar eventos Javascript .removeEventListener()
- 1408
Ejemplos prácticos de como usar addEventListener() y removeEventListener() del tutorial gratuito de Javascript (y apuntes para mis alumnos)
Ejercicio JS – Susto emergente
- 137
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
Tipos de variables en Javascript
- 1804
En programación se dice que una variable es un recurso de memoria del ordenador reservado para alojar una información. En Javascript existen 5 tipos de variables: textos, números, booleanos, objetos y...
Ejercicio – ¿En qué día de la semana estamos?
- 191
Problema javascript que devuelve en formato texto el día de la semana en el que esamos. Incluye 2 posibles soluciones con switch() y array.
Introducción a la lógica de programación: if y for
- 966
Hasta el momento hemos estado programando mediante secuencias de instrucciones que se iban sucediendo en orden cronológico. Hemos aprendido la sintaxis y vocabulario mínimo necesario del lenguaje java...
Ejercicio JS – Rellenar contenidos usando el DOM
- 208
Serie de ejercicios resueltos del tutorial Javacript. Uso básico del DOM. Incluye el repaso básico de teoria a leer y explicación.
Sustituir un nodo por otro en el DOM mediante Javascript
- 360
Para poder sustituir un nodo por otro en el DOM previamente necesitas saber como: Identificar nodos del DOM. Crear nuevos nodos. Si tienes claros estos conceptos sigue leyendo el ejemplo práctico.
Introducción a los eventos javascript
- 452
Repasamos las distintas formas que existen de asociar eventos javascript a etiquetas html. Ya sea por acoplamiento directo o como evento semántico. Comparamos también con addEventListener()
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.