Este ejercicio es una variación avanzada del ejercicio ventana emergente con control de edad.
El punto de partida es pues la solución de este. La encontraréis en este enlace de descarga.
Pero cuidado, ya aviso de antemano que es necesario modificarlo bastante. Por tanto en el apartado enunciado de esta publicación encontraréis un archivo inicial para el alumno ligeramente distinto. Quien quiera partir de zero… pues más emocionante.
La idea es conseguir que la web recuerde si es la primera vez que visitamos la página o no y que en función de nuestras respuestas anteriores veamos unos resultados o otros.
Tener en cuenta también que existen muchas soluciones posibles. La mía sólo es una propuesta.
Entre los conceptos clave que usaremos:
- Llamada a nodos del documento web.
- Asignación de eventos mediante javascript.
- Modificar el HTML mediante javascript.
- Modificar el CSS mediante javascript.
- Funciones anónimas.
- Biblioteca de funciones para trabajar con cookies que encontraréis navegando en esta entrada.
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. La siguiente vez que se accede al mensaje se sustituye el mensaje ¿Es la primera vez que nos visitas? por Disculpa las molestias, debemos asegurarnos que eres mayor de edad.
¿Te importa volver a responder?. - En caso de no ser mayor de edad el contenido de la página se sustituye por «<h1>Lo sentimos, sólo si eres mayor de edad puedes ver esta página</h1><p>Prueba a recargar la web</p><button>Menudo despiste, quiero volver a responder</button>«. La idea es que cuando se haga click en el botón se vuelve a cargar la web pero en esta ocasión se ha borrado la cookie que recordaba la edad. Es como volver al punto original.
- Para fines del ejercicio en el extremo inferior izquierdo de la página, al cargarse, habrá un botón fijo al scroll que permitirá borrar todas las cookies.
Para mayor claridad ver las imágenes adjuntas en la introducción de este ejercicio.
Como requisitos:
- La ventana emergente inicial sólo desaparecerá 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 que incluye el html, el css y el documento cookies.js. También un embrión de funciones.js
Solución del ejercicio
La idea es jugar con una cookie de nombre edad que puede tomar los valores mayor o menor.
Como puntos clave que apreciaréis al descargar la solución el css y el javascript se llaman desde el el <head>. El motivo es que en el caso de ser menor de edad reemplazo todo el código dentro de la etiqueta <body> y entonces eliminaríamos el css y el javascript de no tenerlos en el <head>.
Otra instrucción importante es document.location=document.location.href. Sirve para obligar a cargar de nuevo la página web.
Una posible solución alternativa sería que en lugar de sustituir el código html que hay dentro del <body>, como es la solución presentada, en su lugar reenviar los visitantes que digan ser menores de edad a otra página.
Otra posible mejora de la solución encontrada es no jugar con capas ocultas para no perjudicar el SEO. Idealmente deberíamos insertar y eliminar nodos en el DOM a medida que se necesiten. Esto también lo dejo para quién se anime.
El código de index.html y de estilos.css se incluye con el documento descargable que encontraréis. Por razones prácticas no lo incluyo en la entrada.[vc_custom_heading text=»¿Como queda el JS?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
window.onload = init;
function init(){
if(detectCookie("edad")){
if (getCookie("edad")=="mayor"){
document.querySelector(".emergente p").innerHTML = "<p>Disculpa las molestias, debemos asegurarnos que eres mayor de edad.<br>¿Te importa volver a responder?</p>";
asignarEventosBotones();
}else{
removeCookie("edad");
menor18();
}
}else{
//si no se encuentra la cookie o está vacía
asignarEventosBotones()
}
}
function menor18(){
setCookie("edad","menor",7);
document.body.innerHTML="<h1>Lo sentimos, sólo si eres mayor de edad puedes ver esta página</h1><p>Prueba a recargar la web</p><button>Menudo despiste, quiero volver a responder</button>";
//ahora usaremos una función anónima para practicar un poco
document.querySelector("button").addEventListener("click",function(){
removeCookie("edad");
document.location=document.location.href;
}
);
}
function mayor18(){
setCookie("edad","mayor",7);
document.querySelector(".emergente").style.display="none";
document.querySelector("#container").style.opacity="1";
}
function asignarEventosBotones(){
document.querySelector(".emergente .menor").addEventListener("click",menor18);
document.querySelector(".emergente .mayor").addEventListener("click",mayor18);
document.querySelector(".cookies").addEventListener("click",function(){removeCookie("edad")});
}Si juntamos todas las piezas resolvemos el ejercicio.
Podéis descargar la solución completa en este enlace.¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta