0

estoy tratando de mejorar el código de mi primer proyecto que es un to do list usando iconos de fontawesome. En cada ítem yo tengo, entre otras cosas, un botón que sirve para marcar si la tarea esta completada o no. Este boton aparece con un icono por default que en el código esta guardado en la variable CIRCLE_INCON, pero lo que quiero es que cuando se complete la tarea cambie a otro icono que esta guardado en la variable CHECK_ICON. Lo que hice es lo siguiente (Solo muestro las partes del codigo relacionadas con el botón para completar la tarea que yo llamo checkBtn):

//ICONS
const CIRCLE_INCON = `<i class="far fa-circle fa-lg"></i>`;
const CHECK_ICON = `<i class="far fa-check-circle fa-lg"></i>`;

//LOS "..." SIGNIFICAN QUE HAY CODIGO ANTES DE ESO
//PUEDEN VER ABAJO EL CODIGO COMPLETO

function addTask(fromList){
  //...
  //CREATING COMPONENTS
  const checkBtn= document.createElement("button");
  //...
  //SUB-COMPONENT CHECKBOX
   checkBtn.classList.add("checkbox");
   checkBtn.innerHTML = CIRCLE_INCON;
   checkBtn.value= "not-checked";
   //...
   //ASI ES COMO LLAMO A LA FUNCION QUE SE ENCARGA DE CHEQUEAR O COMPLETAR LA TAREA
   item.addEventListener("click", (element) => {
        element = element.target;

        let circleClass = element.classList.contains("fa-circle")
        let checkClass= element.classList.contains("fa-check-circle");
       
        (circleClass || checkClass) ? checkTask() : 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;
            dataLS[id].icon = icon
            el.innerHTML = dataLS[id].icon; //AQUI ES COMO INTENTE GUARDAR EL ICONO AL LOCALSTORAGE
            localStorage.setItem('item.list', JSON.stringify(dataLS));
        }

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


  

Así el código funciona exactamente como quiero pero yo lo que quiero es simplificar la función checkTask() usando .toggle() a algo como esto:

//PRIMERO CAMBIO DE TAG DE "button" A UN "i"
const checkBtn= document.createElement("i");

//CHECK THE TASK
    function checkTask (){
        //SI EL VALOR DEL CHECKBUTTON NO ESTA CHEQUEADO EJECUTA LA FUNCION COMPLETEDTASK()
        
        checkBtn.classList.toggle("fa-circle");
        checkBtn.classList.toggle("fa-check-circle");
        toDoTxt.classList.toggle("completed");
        
        //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;
            dataLS[id].icon = icon
            el.innerHTML = dataLS[id].icon; //AQUI ES COMO INTENTE GUARDAR EL ICONO AL LOCALSTORAGE
            localStorage.setItem('item.list', JSON.stringify(dataLS));
        }

        
    };

Pero el problema es que cuando hago eso eso no aparece el icono sino que aparece un cuadrado. Si alguien sabe lo que pasa que por favor me explique se lo agradecería mucho. A continuación dejo el código completo para que vean como esta compuesto.

const form  = document.getElementById("list");
const input = document.getElementById("input");
const normalButton = document.getElementById("normal");
const finishedTask = document.getElementById("done");
const unfinishedTask = document.getElementById("not-done");
const refreshBtn = document.getElementById("refresh-btn");
const failBox = document.getElementById("fail");
const closeBtn = document.getElementById("close-btn");
const taskCategories = document.getElementById("categories")

//ICONS
const CIRCLE_INCON = `<i class="far fa-circle fa-lg"></i>`;
const CHECK_ICON = `<i class="far fa-check-circle fa-lg"></i>`;
const TRASH_ICON = `<i class="fas fa-trash-alt"></i>`;
const EDIT_ICON =`<i class="far fa-edit"></i>`;

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("i");
    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();

        checkBtn.classList.toggle("fa-circle");
        checkBtn.classList.toggle("fa-check-circle");
        
        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;
            dataLS[id].icon = icon
            el.innerHTML = dataLS[id].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(dataLS.id, 1);
        localStorage.setItem('item.list', JSON.stringify(dataLS));
    };
         
    taskCategories.addEventListener("click", (element) => {
        element = element.target;
        console.log(element);
        if (element === normalButton) return goToNormal();
        if (element === finishedTask) return seeFinishedTasks();
        if (element === unfinishedTask) return seeUnfinishedTask();
    });

    let goToNormal = () => item.style.display = "flex";

    let seeFinishedTasks = () => { 
        checkBtn.value==="checked" ? item.style.display = "flex" : item.style.display = "none";
    };

    let seeUnfinishedTask = () => {
        checkBtn.value==="not-checked" ? item.style.display = "flex" : item.style.display = "none";
    };

    //UPLOADING THE DATA
    let data = createDataList(inputValue, checkBtn.value, CIRCLE_INCON);

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

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

    input.value = "";
}

function refreshPage(){
<!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">
    <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>
            </div>
            
            <div class="date" id="date"></div>
            
            <div class="categories" id="categories">
                <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="https://kit.fontawesome.com/09faf5376a.js" crossorigin="anonymous"></script>
    <script defer src="app.js/app.js"></script>
</body>
</html>

3
  • 1
    La ruta de tu href del fontawesome es incorrecta, revísala porque no es una hoja de estilos válida. Commented el 11 jun. 2020 a las 13:06
  • Pero si estuviera mal la ruta ¿no tendrian que aparecer todos los iconos en mi pagina en forma de cuadrado o no tendria que aparecer un error 404 en la consola?. Porque tengo otros iconos que uso en la pagina y si aparecen esos iconos.
    – FERRE FACU
    Commented el 11 jun. 2020 a las 15:42
  • Igual gracias ya una de las respuestas en la publicación soluciono mi problema.
    – FERRE FACU
    Commented el 11 jun. 2020 a las 15:43

2 respuestas 2

3

Para que fontawesome funcione es necesario que varias cosas estén correctas. 1. Que la url de la librería esté correctamente embedeada

<link href=""> en la cabecera.
  1. El elemento que contendrá la tipografía (El icono) debe de contener la clase fa y la clase del icono en concreto

    class="fa fa-check-circle"

Todos los iconos contienen fa-nombreIcono 3. En algunos casos, embedear solo una librería como por ejemplo "regular" ocasiona que debas usar otro tipo de clases, por ejemplo

class="fad fa-check-circle"

En todos los casos, para que un icono se muestre solo debes cambiar agregar las clases del icono en cuestión.

El tema de los "cuadritos" se debe a que la tipografía de la que está compuesta fontawesome( De ahi su nombre "Fuente increible" ) no está cargando correctamente. Revisa la consola del navegador y verifica que no existan errores 404 (Esto indicaría que si añadiste la url pero esta no es correcta o el archivo no existe).

Por otro lado, sería mejor si añadieras más información y el código que usas en el html.

1
  • Con respecto a si hay errores 404, no me ha aparecido ningún error en consola y los links se que esta bien puestos porque hay otros icono que estoy cuando que si me estar cargando correctamente. Igual ahora voy a agregar el html a la publicación
    – FERRE FACU
    Commented el 9 jun. 2020 a las 0:54
2
+50

Tienes que agregar primero la clase far o fas al elemento i después de crearlo. Sin eso te aparecera un cuadro y no el icono cuando intentes cambiarlo.

La corrección sería así:

//PRIMERO CAMBIO DE TAG DE "button" A UN "i"
const checkBtn= document.createElement("i");

// Agrega la clase 'far fa-circle' al elemento i cuando se crea
checkBtn.className = 'far fa-circle';

// ...

//CHECK THE TASK
    function checkTask (){
        //SI EL VALOR DEL CHECKBUTTON NO ESTA CHEQUEADO EJECUTA LA FUNCION COMPLETEDTASK()
        
        checkBtn.classList.toggle("fa-circle");
        checkBtn.classList.toggle("fa-check-circle");
        toDoTxt.classList.toggle("completed");
        
        //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;
            dataLS[id].icon = icon
            el.innerHTML = dataLS[id].icon; //AQUI ES COMO INTENTE GUARDAR EL ICONO AL LOCALSTORAGE
            localStorage.setItem('item.list', JSON.stringify(dataLS));
        }

        
    };

Espero te sirva.

1
  • Si gracias por la respuesta y la explicación. Ambas me sirvieron.
    – FERRE FACU
    Commented el 11 jun. 2020 a las 15:49

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.