18 Dic Ejercicio JS – Ventana emergente control de edad
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.
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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
¿Estás preparando un examen javascript? Comparto el último examen JS (nivel básico) del curso de confección y publicación de páginas web (IFCD0110)
Ejercicio introductorio a los eventos javascript dónde se limpia un documento html para que no aparezcan eventos en línea con el html mediante addEventListener(). Incluye solución.
Ejemplo explicado paso a paso para entender el concepto del this en javascript. Se empieza con el javascript en línea en el html para finalmente inicializar los eventos llamándolos directamente desde ...
Ejemplo explicado de funciones javascript simples que devuelven un color aleatorio en formato rgb o hexadecimal.
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
Ejercicio de programación de una venta emergente con el mítico mensaje de Ley de Cookies. Paradójicamente hay que usar una cookie para cumplir con la ley de cookies. Incluye solución.
No hay comentarios