1

estoy tratando de mejorar el código de mi primer proyecto, un to do list y lo que quiero hacer es guardar los items en el localStorage, de forma que al refrescar el navegador, estos no se borren o reinicien, pero sobre todo que también se guarden los items chequeados o que al eliminar los items no vuelvan a aparecer al refrescar la pagina. Yo en cada ítem tengo tres botones:

  • el botón para completar o chequear el ítem: checkButton
  • el botón para editar las tareas: editButton
  • el botón para eliminar las tareas: trashButton

Guardo los datos en una lista de objetos que contienen un único id, nombre del ítem (donde almaceno el valor del input) y el valor del boton que chequea los items que se almacena en la propiedad completed ( que seria checkButton.value, valor que me sirve para saber si el item esta completado o chequeado).

Tengo dos problemas pero el principal es que a la hora de "chequear el ítem" yo tengo por un lado el valor de completed, dos iconos llamados CIRCLE_ICON, cuando la tarea esta incompleta (este icono esta por default al crear el item, y CHECK_ICON, cuando la tarea esta completa y una clase que afecta al texto del ítem que lo que hace es aparecer con una linea cruzada y lo único que no cambia al refrescar la pagina o mejor dicho lo único que se guarda en el localStorage es el valor de la propiedad completed, pero lo demás, sin importar si la tarea estaba completada o no, no se guarda y al reiniciar la pagina vuelve al icono por default y el texto sin estilo. Yo lo que quiero es que si yo completo una tarea y reinicio la pagina que siga completada (osea con el CHECK_ICON y el texto con el estilo especifico). Intente guardar los datos del icono y el texto en la función donde yo guardo el valor de completed en el localStorage cada vez que cambie, pero no funciono.

El otro problema que tengo, que por alguna razón que sinceramente no se porque sucede, a la hora de poner varios items y querer eliminarlos todos uno por uno es como siempre algunos no se eliminan del localStorage y siguen allí.

let lists = [];

document.addEventListener("keyup",(event)=>{ if(event.keyCode === 13) addTask() });
refreshBtn.addEventListener("click",() => refreshPage());

// Obtener desde localStorage al cargar todo el DOM
window.addEventListener('load', function() {
    lists = JSON.parse(localStorage.getItem("item.list")) || [];
    // Agregar en HTML los elementos encontrados
    lists.forEach((item) => addTask(item));
});

    function addTask(fromList){
        
        event.preventDefault();

        let inputValue= (fromList) ? fromList.name : input.value;
        
        if(inputValue === "" || inputValue === null) return failAlert();

        function failAlert(){
            failBox.style.display = "block";
            closeBtn.addEventListener("click", ()=> failBox.style.display = "none")
        }

        //CREATING COMPONENTS
        const item = document.createElement("li");
        const deleteBtn = document.createElement("button");
        const toDoTxt = document.createElement("p");
        const editBtn  = document.createElement("button");
        const checkBtn= document.createElement("button");
        const btnContainer = document.createElement("div");

        
        btnContainer.classList.add("buttons");

        //ITEM COMPONENT
        item.classList.add("item");
        let id = item.dataset. id;
        id = (fromList) ? fromList.id : lists.length;

        //APPEND COMPONENTS TO THE ITEM
        item.appendChild(checkBtn);           
        item.appendChild(toDoTxt);
        form.appendChild(item);
        item.appendChild(btnContainer); 

        //SUB-COMPONENT TODO
        toDoTxt.classList.add("text");
        const text= document.createTextNode(inputValue);
        toDoTxt.appendChild(text);

        //SUB-COMPONENT CHECKBOX
        checkBtn.classList.add("checkbox");
        checkBtn.innerHTML = CIRCLE_INCON;
        checkBtn.value= "not-checked";

        //SUB-COMPONENT EDIT BUTTON
        editBtn.classList.add("edit");
        editBtn.innerHTML = EDIT_ICON;
        btnContainer.appendChild(editBtn);
        
        //SUB COMPONENT DELETE BUTTON
        deleteBtn.classList.add("delete");
        deleteBtn.innerHTML = TRASH_ICON;
        btnContainer.appendChild(deleteBtn);

        item.addEventListener("click", (element) => {
            element = element.target;

            let circleClass = element.classList.contains("fa-circle")
            let checkClass= element.classList.contains("fa-check-circle");
            let trashClass = element.classList.contains("fa-trash-alt");
            let editClass = element.classList.contains("fa-edit");

            (circleClass || checkClass) ? checkTask() : false;
            (trashClass) ? deleteTask() : false;
            (editClass) ? editTask() : false;
        });
        
        //CHECK THE TASK
        function checkTask (){
            //SI EL VALOR DEL CHECKBUTTON NO ESTA CHEQUEADO EJECUTA LA FUNCION COMPLETEDTASK()
            checkBtn.value ==="not-checked" ? completedTask(): incompletedTask();
            
            function completedTask() {
                checkBtn.setAttribute("value","checked");
                checkBtn.innerHTML = CHECK_ICON;
                saveValue(checkBtn, CHECK_ICON);
            }

            function incompletedTask() {
                checkBtn.setAttribute("value","not-checked");
                checkBtn.innerHTML = CIRCLE_INCON;
                saveValue(checkBtn, CIRCLE_INCON);
            }
            //ACA ES COMO GUARDO EL VALOR DE COMPLETED AL LOCALSTORAGE
            function saveValue(el, icon){
                const dataLS = JSON.parse(localStorage.getItem('item.list'));
                dataLS[id].completed =  el.value;
                el.innerHTML = icon; //AQUI ES COMO INTENTE GUARDAR EL ICONO AL LOCALSTORAGE
                localStorage.setItem('item.list', JSON.stringify(dataLS));
            }

            toDoTxt.classList.toggle("completed");
        };


        // EDIT THE TASK
        function editTask (){
                //ACA YO ES DONDE EDITO LAS TAREAS
                toDoTxt.innerHTML = `<div class=".edit-container" id = "edit-container"></div>`;
                let editContainer = document.getElementById("edit-container");
                
                let editInput = document.createElement("input");
                let submitEdit = document.createElement("button");

                editInput.classList.add("edit-input");
                submitEdit.classList.add("submit-edit");

                submitEdit.innerHTML = `<i class="fas fa-plus-circle fa-lg"></i>`

                editContainer.appendChild(editInput);
                editContainer.appendChild(submitEdit);
                 
                submitEdit.addEventListener("click",() => editTask());
                //ACA ES COMO GUARDO EL NUEVO NOMBRE EDITADO AL LOCALSTORAGE
                function saveNewTask(){
                    const dataLS = JSON.parse(localStorage.getItem('item.list'));
                    dataLS[parseInt(id)].name = editInput.value;
                    localStorage.setItem('item.list', JSON.stringify(dataLS));
                }
                
                function editTask (){
                    toDoTxt.innerHTML = editInput.value;
                    saveNewTask();
                };
            };

        //DELETE THE TASK
        function deleteTask (){
            //DONDE ELIMINO LAS TAREAS
            const dataLS = JSON.parse(localStorage.getItem('item.list'));
            form.removeChild(item);
            deleteBtn.parentNode.parentNode
            dataLS.splice(id, 1);
            localStorage.setItem('item.list', JSON.stringify(dataLS));
        };
             
       
        //UPLOADING THE DATA
        let data = createDataList(inputValue, checkBtn.value);

        if(!fromList) {
            lists.push(data);
            save();
        }
        
        function save(){  
            localStorage.setItem("item.list", JSON.stringify(lists));
        }

        function createDataList(name, completed){
            return {id: lists.length, name: name, completed: completed};
        }

        input.value = "";
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/09faf5376a.js" crossorigin="anonymous"></script>
    <title>To Do List</title>
</head>

<body>

    <div class="container">

        <div class="header">
           
            <i class="fas fa-sync-alt" id="refresh-btn"></i>
         
            <div class="title-container">
                <h1 class="title">To Do List App</h1>
                <h2 class="ferre">By Fxrree</h2>
            </div>
            
            <div class="date" id="date"></div>
            
            <div class="functionalities">
                <button id="normal" class="normal">NORMAL</button>
                <button id="done" class="done">DONE</button>
                <button id="not-done" class="not-done">NOT-DONE</button>
            </div>

        </div>

        <div class="fail" id="fail">
            <i class="fas fa-times-circle" style="color: #fff;" id="close-btn"></i>

            <p class="failed-text">Please type a valid to do</p>
        </div>

        <div class="content">
            <ul id="list" class="list"></ul>
        </div>

        <div class="add-item">
            <input type="text" class="input" id="input" placeholder="Add something to do">
            <i class="fas fa-plus-circle fa-lg" id="button" onclick="addTask()"></i>
        </div>

    </div>
    <script defer src="app.js/app.js"></script>
</body>
</html>

Si alguien me explican porque suceden mis errores y como solucionarlos se los agradeceria.

2 respuestas 2

1
+50
  1. Ten cuidado con las funciones que tienes en el Javascript. Hay varias que están dentro de la función addTask() y eso hace que solo se puedan usar dentro de esas funciones.
  2. Actualiza el localStorage cada vez que hagas una actualización de los datos en memoria.
  3. Trata de usar estructuras de datos para manejar la información de la lista. Este es un ejemplo de la estructura que puedes manejar:
let toDoList = [];

// Carga los items que se encuentren en el localStorage
window.addEventListener('load', function() {
  let list = localStorage.getItem('toDoList'); 

  if (list) {
    toDoList = JSON.parse(list);
  }
});

// Obtiene el maximo ID existente en la lista
function getMaxId() {
  let maxId = toDoList.reduce(function(id, item) {
    if (item.id > id) {
      return item.id;
    }

    return id;
  }, 0);

  return maxId + 1;
}

// Guarda la lista en el localStorage
function saveToDoList() {
  localStorage.setItem('toDoList', JSON.stringify(toDoList));
}

// Agrega un elemento a la lista y actualiza el localStorage
function add(value) {
  let item = {
    id: getMaxId(),
    value: value,
    completed: false
  };

  toDoList.push(item);

  /**
   * FALTA: Agregar los elementos al DOM
   */

  saveToDoList();
}

// Actualiza el valor del elemento ID y actualiza el localStorage
function update(id, value) {
  let item = toDoList.find(function (item) {
    return item.id === id;
  });

  if (item) {
    item.value = value;

    /**
     * FALTA: Actualizar los elementos en el DOM
     */

    saveToDoList();
  }
}

// Elimina el elemento ID de la lista y actualiza el localStorage
function remove(id) {
  let index = toDoList.findIndex(function(toDoItem) {
    return toDoItem.id === id;
  });

  if (index > -1) {
    toDoList.splice(index, 1);

    /**
     * FALTA: Eliminar los elementos del DOM
     */

    saveToDoList();
  }
}

// Cambia el valor complete de la lista y actualiza el localStorage
function toggleCheck(id) {
  let index = toDoList.findIndex(function(toDoItem) {
    return toDoItem.id === id;
  });

  if (index > -1) {
    let item = toDoList[index];
    item.completed = item.completed === true ? false : true;

    /**
     * FALTA: Actualizar los elementos del DOM
     */

    saveToDoList();
  }
}

Espero te sirva la respuesta.

1
  • Si me sirvió gracias por tu explicación
    – FERRE FACU
    el 10 jun. 2020 a las 3:27
1

pues mira yo lo que hago para eliminar del localstorage es lo siguiente

     eliminar: function (controlid) {
            var self = this;
            var productosLS = this.obtenerLocalstorage();

            var resultado = []


            for (var i = 0; i < productosLS.length; i++) {
                if (productosLS[i].controlid !== controlid) {
                    resultado.push(productosLS[i]);
                }
            }

      
            productosLS=[]
            localStorage.removeItem('productos');
            localStorage.setItem('productos', JSON.stringify(resultado));
            self.leerLocalstorage;

          

        },

al boton de eliminar llamo esa funcion. la cual le paso el ID del elemento que deseo eliminar, recorro todos los elementos y los voy almacenando en otro arreglo para luego eliminar el contenido del localstorage y volver a cargarlo con los elementos del nuevo arreglo , ya sin el que he eliminado.

obviamente en esto hay muchas formas de hacerlo, para mi esa es la mas facil y sin pensarla tanto, funciona y cumple con lo que necesito que haga.

en cuanto a tu otro problema deberias en si de guardar en el localstorage como bien dices todos los atributos del elmento, y al recargar la pagina volver a crearlos con los atributos de cada elemento desde el localstorage.

7
  • Gracias por tu respuesta en cuanto a como eliminar el elemento y por tu consejo.
    – FERRE FACU
    el 7 jun. 2020 a las 0:45
  • He intentado lo mismo pero no funciona nose porque con respecto al primer problema
    – FERRE FACU
    el 7 jun. 2020 a las 17:17
  • podrias compartirme tu nuevo codigo?
    – Elvis Alas
    el 7 jun. 2020 a las 18:47
  • como puedo compartirte el nuevo código?. Porrque no quisiera editar el código de la pregunta porque quizá otra persona que tenga una duda similar al ver el código editado no entienda.
    – FERRE FACU
    el 7 jun. 2020 a las 20:33
  • aqui mismo puedes hacerlo, solo ingresa tu codigo entre ' ' puedes ver la ayuda que sale abajo de añadir comentario. ahi lo explica como funciona.
    – Elvis Alas
    el 7 jun. 2020 a las 23:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.