Lista de la compra con javascript perfeccionada con cookies

Lista de la compra con javascript perfeccionada con cookies

Print Friendly, PDF & Email
Lista de la compra con javascript perfeccionada con cookies
Valora esta entrada

El ejercicio de hoy es  la continuación del anterior ejercicio de creación de una lista de la compra con Javascript.

Si no lo has hecho te recomiendo que resuelvas primero este ejercicio. Pues las partes previas necesarias las voy a dar explicadas.

Adicionalmente a los conceptos mencionados en la parte I de la solución hoy practicaremos los siguientes:

¡Vayamos al ejercicio!

Enunciado

Dado el html a continuación crea una lista de recordatorios según la imagen que:

De la parter ejercicio:

  • Creada una lista añada cualquier información escrita en el cajetín de texto cuando se pulse el botón enviar.
  • En caso que el cajetín esté vacío no se añadirá nada a la lista.
  • Para eliminar elementos lista se hará con un doble click.
  • El javascript se añadirá al cargar el documento. Intenta que el código html esté lo más limpio posible.
  • El color del fondo es #ccc.

Como novedad

  • Recuerda la información en una cookie para que cada vez que se cargue el documento se actualize automáticamente la lista de la compra.
  • Incluya un botón que pueda resetear la lista de la compra (resetear la cookie).
  • Asegúrate que cuando se carga una lista de la compra previamente creada los elementos lista conserven la propiedad de que con un doble click se puedan eliminar de la lista.

Haz uso de la siguiente biblioteca de funciones sobre cookies.

<div id="container">
        <form action="#">
            <label for="anadir">Mi lista de la compra:</label>
            <input type="text" name="anadir" id="anadir">
            <input type="button" value="Añadir a la lista">
        </form>    
        
        <ul id="listaCompra"></ul>
        
        <p>Nota: Puedes eliminar elementos de la lista haciendo doble click sobre ellos</p>
        <button id="resetear">Resetear lista y borrarla de la memoria</button>
       </div>
       
    
    <script src="cookies.js"></script>
    <script src="funciones.js"></script>

Solución del ejercicio

Además de las funciones presentadas en la resolución de la parte I del ejercicio, se incluyen las funciones básicas:

  1. La función actualizarCookie para crear una cookie si no existe o actualizarla si existe.
  2. La función resetear para eliminar la cookie en caso que el usuario haga click en el botón creado para este menester.
  3. La función rellenarContenido para validar si el usuario tiene el navegador la cookie o no y actuar según corresponda creándola o recuperando su contenido.

Se modifican ligeramente las funciones init, anadir y eliminarLi para actualizar la cookie de nombre compra según corresponda en cada caso.

Hemos limpiado un poquito el código enviándolo al archivo funciones.js.

En el código no se incluye el CSS pues no es relevante para la resolución (pero se añade con el archivo descargable).

IMPORTANTE:

Recordar que el navegador en versión escritorio no permite el uso y almacenaje de cookies. Necesitaréis subir vuestra solución a un hosting mediante FTP parar poder practicar con las cookies.

Función onload

window.onload = init;
    function init(){
        botonEnvio = document.querySelector('[type="button"]');
        nuevoItem = document.querySelector('[type="text"]');
        listaCompra = document.getElementById("listaCompra");
        botonEnvio.addEventListener("click",anadir);
        document.getElementById("resetear").addEventListener("click",resetear);
        rellenarContenido();
    }

La única modificación es que en este caso incluye una llamada a la función rellenarContenido.

Funciones anadir y eliminarLi

function anadir(e){
        evento = e || window.event;
        if (nuevoItem.value == ""){
            evento.preventDefault();
        }else{
        var lista = document.createElement("li");
        lista.innerHTML = nuevoItem.value;
        lista.addEventListener("dblclick",eliminarLi);
        listaCompra.appendChild(lista);
        nuevoItem.value = "";
        }
        actualizarCookie();
    }
function eliminarLi(){
        this.parentNode.removeChild(this);
        actualizarCookie();
    }

La única modificación es que en este caso las dos incluyen una llamada a la función actualizarCookie.

Función actualizarCookie

function actualizarCookie(){
        setCookie("compra",listaCompra.innerHTML,7);
    }

La función actualizarCookie hace una llamada a la función setCookie que se puede encontrar en la biblioteca de funciones cookies.js

Fijaros que listaCompra es una variable de tipo global y que por esta razón la podemos usar sin problema.

Adicionalmente, tener en cuenta que pasamos el valor del elemento <ul> en formato texto (que es lo que hace innerHTML).

Función resetear

function resetear(){
        listaCompra.innerHTML ="";
        removeCookie("compra");
    }

Cuando se llama la función resetear en el script es porqué tenemos la certeza de que esta existe.

Simplemente es una llamada a la función removeCookie() de la biblioteca cookies.js y borramos mediante innerHTML todo el contenido de la variable global listaCompra. 

Función rellenarContenido

function rellenarContenido(){
        var i=0;
        if (detectCookie("compra")){
            listaCompra.innerHTML = getCookie("compra");
            //los elementos añadidos no tienen el comportamientoLi.
            elementosLista = document.getElementsByTagName("li");
            while(i<elementosLista.length){
                elementosLista[i].addEventListener("dblclick",eliminarLi);
                i++;
            }
        }
    };

La función rellenarContenido es la que realmente aporta interés a este ejercicio.

Es llamada en el momento de cargarse la página dentro de la función init.

En caso de detectarse la cookie de nombre compra se sustituye el valor de la variable global listaCompra por el que contiene la cookie.

Dado que el contenido es en realidad un string este no contiene eventos que que le hayan podido dar, como por ejemplo el que hace que cuando se haga dobleclick se elimine un elemento <li>.

Es necesario añadirlos de nuevo.

Para ello mediante un while recorremos todos los <li> del documento y les asignamos el evento dblclick junto con la función eliminarLi.

En caso de no detectarse la cookie la función rellenarContenido no hace nada.

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

Este ha sido un completo ejercicio dónde se repasan muchísimos conceptos y le damos una utilidad práctica a las cookies.

Puedes descargar la solución completa en este enlace.

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

Entradas relacionadas:

Instrucción “this” de Javascript explicada paso a paso
- 359
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 ...
Ejercicio – ¿Estamos en fin de semana?
- 186
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
Ejercicio JS – Salva pantallas primitivo con javascript
- 136
Ejercicio de salvapantallas primitivo creado con javascript básico y sin usar la etiqueta canvas. Incluye solución.
Control de acceso con cookies Javascript para web de mayores de edad
- 159
Ejercicio avanzado de javascript para controlar el acceso de usuarios a una página web mediante el uso de cookies. Incluye solución.
Ejercicio – corrección de errores en javascript. Variables y strings.
- 191
En este ejercicio practicamos la diferencia entre usar un string y una variable. También otras normas básicas de sintaxis de javascript.
Métodos javascript
- 637
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
Ejercicio – Crear una lista de recordatorios
- 170
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
La etiqueta noscript
- 515
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
Validación de campos try catch finally en Javascript puro
- 617
Explicación teórica y ejemplo práctico del uso de las instrucciones try + throw, catch y finally en javascript. Utilizamos esta estructura para validar un campo en un formulario. Sin embargo se puede ...
Como contar vocales y espacios en blanco en un texto mediante javascript
- 314
Ejercicio con solución dónde se muestra como hacer un script que cuenta todas las vocales y espacios en blanco de un texto introducido por el usario.
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.