/
Quiero darte la bienvenida a tu segundo checkpoint, este desafío que incluye un grado más alto de dificultad. Al ser una semana relativamente teórica hemos preparado un ejercicio no tan difícil 😉
/
Esperamos que lo disfrutes y pongas a prueba tus conocimientos, sin más, te dejo con un gif aleatorio para después explicarte la solución propuesta ¡Buena suerte!
/
!bird dancing
/
Esta explicación va a llevar un rato, espero no te pierdas
exportfunctioncreateTaskPlanner(){// Empezamos con un array vacío// aquí almacenaremos las tareaslet tasks =[];// retornamos las funciones // que servirán para manipular el arrayreturn{// La función de agregar tareas debe recibir una tareaaddTask(task){// Por lógica al añadir una nueva tarea inicia sin estar completada task.completed=false;// Una vez modificada la enviamos al array tasks.push(task);},// Ahora la función para remover tareasremoveTask(value){// Dependiendo si el valor es un número o un stringif(typeof value ==="number"){// Si es un número, filtramos todas las tareas que no tengan el mismo valor// y luego lo reasignamos al array de tareas tasks = tasks.filter((task)=> task.id!== value);}else{// En caso de ser un string, hacemos lo mismo pero con la propiedad de .name tasks = tasks.filter((task)=> task.name!== value);}},// Para obtener las tareas simplemente las retornamosgetTasks(){return tasks;},// Para obtener las tareas pendientes o completadas simplemente las filtramos// y retornamos el resultadogetPendingTasks(){return tasks.filter((task)=>!task.completed);},getCompletedTasks(){return tasks.filter((task)=> task.completed);},// Para marcar una tarea dependiendo el valor recibidomarkTaskAsCompleted(value){// primero declaramos la variable de index// la cual tendrá el indice de la posición del elementolet index;// buscamos el indice dependiendo el valorif(typeof value ==="number"){// buscamos por index dependiendo si es por id index = tasks.findIndex((task)=> task.id=== value);}else{// O por name index = tasks.findIndex((task)=> task.name=== value);}// Al final con ese indice modificamos la propiedad de completed a true tasks[index].completed=true;},getSortedTasksByPriority(){// Para ordenar las tareas sin modificar el array original// solamente hacemos una copia del array y ejecutamos sort sobre esteconst sortedTasks =[...tasks].sort((a, b)=> a.priority- b.priority);// Al final lo retornamosreturn sortedTasks;},filterTasksByTag(tag){// Filtramos las tareas que incluyan cierto tagreturn tasks.filter((task)=> task.tags.includes(tag));},updateTask(taskId, updates){// obtenemos el id como lo hicimos previamenteconst index = tasks.findIndex((task)=> task.id=== taskId);// agregamos las propiedades extras destructurando ambos objetos tasks[index]={...tasks[index],...updates };},};}
Un checkpoint un tanto más amplio para seguir practicando 💪
¿Y tu? ¿Cómo lo hiciste?
Hola, al menos en mi caso nunca recibí un typeof number en value, ya que el input es de type="text"
**En mi caso **no me funciona el tremoveTask de tu código
Yo lo que hice fue una comparación no estricta con ['name'] y ['id']. Con el primero que coincidía lo eliminaba. Así me funcionó
También noté que cada vez que agrego, elimino o completo una tarea, se restablecen todas y se marcan como no completadas.
Tu solución amerita que la presumas en alguna red social 💪
Me encantó
Solución… 😄
.
Para comenzar, creamos un array de tareas vacía. Posteriormente realizamos las función correspondientes del reto.
.
En 'addTask' simplemente agregamos la propiedad completed al hacer:
.
task.completed=false;
.
Puesto que si la propiedad no existe, al asignarla de esa manera se le añade dinámicamente. Luego añadimos la tarea al array de tarea.
.
En 'removeTask' utilizamos la función splice:
.
tasks.splice( tasks.findIndex((task)=> task.id== value || task.name=== value),1);
.
Esta función recibe 2 parámetro, la primera es la posición desde donde queremos eliminar elementos de un array, y la segunda es la cantidad de elementos que queremos eliminar, en este caso 1.
.
Es por ello que utilizamos la función findIndex() para encontrar la tarea que tenga el value igual al id o al name de la tarea.
.
tasks.findIndex((task)=> task.id== value || task.name=== value),1);
.
'getTask' solo retorna el array de tareas. 'getPendingTask' y 'getCompletedTask' utilizan la función filter() para devolver las tareas que tengan la propiedad completed en el estado correspondiente.
.
Para 'markTaskAsCompleted' guardamos en una variable el resultado de buscar la tarea por su id o name mediante la función find(). Si la tarea existe lo marcamos como completado accediendo a la propiedad completed cambiandolo a true.
.
'getSortedTasksByPriority' utiliza la función sort() en el cual ordenamos las tareas según su prioridad, de menor a mayor. Es importante hacer una copia del array para no alterar al array original, por lo que utilizamos [...NombreDelArray] para ello.
.
'filterTasksByTag(tag)' utiliza filter() donde accedemos a la propiedad tags para encontrar una coincidencia, (siendo tags un array) mediante la función include() .
.
'updateTask' actuamos de forma similar a 'markTaskAsCompleted' pero para pasar las propiedades que queremos cambiar 'updates' a la tarea encontrada, debemos utilizar Object.assign().
.
Object.assign() tiene 2 parametro, el primero es el objeto al que queremos cambiar sus propiedades, y el segundo son las propiedades que queremos cambiar.
.
Por ejemplo si update fuera {id: 4, name: "Pedro"} en task o la tarea solo se cambiarían esas propiedades, las demás (priority, tags y completed) no cambian.
.
Finalmente, retornamos un objeto con el nombre de las funciones implementadas.
.
Código:
.
exportfunctioncreateTaskPlanner(){// Array de todas las tareaslet tasks =[];// Añadimos una tarea al array de tareasfunctionaddTask(task){ task.completed=false; tasks.push(task);}/* Removemos una tarea a partir del índice del
elemento que coincida en name o id con value */functionremoveTask(value){ tasks.splice( tasks.findIndex((task)=> task.id== value || task.name=== value),1);}// Retornamos el array de tareas functiongetTasks(){return tasks;}/* Filtramos y retornamos las tareas que tengan
la propiedad completed false */functiongetPendingTasks(){return tasks.filter((task)=>!task.completed);}/* Filtramos y retornamos las tareas que tengan
la propiedad completed true */functiongetCompletedTasks(){return tasks.filter((task)=> task.completed);}/* Encontramos la tarea que queremos marcar como
competado, si existe la propiedad completed
será igual a true */functionmarkTaskAsCompleted(value){let task = tasks.find((task)=> task.id== value || task.name=== value);if(task){ task.completed=true;}}// Ordenamos y retornamos el array de tareas ordenadofunctiongetSortedTasksByPriority(){return[...tasks].sort((a, b)=> a.priority- b.priority);}// Filtramos las tareas por tagfunctionfilterTasksByTag(tag){return tasks.filter((task)=> task.tags.includes(tag));}/* Actualizamos las propiedades de updates con la
tarea que coincida con taskId */functionupdateTask(taskId, updates){let task = tasks.find((task)=> task.id== taskId);if(task){Object.assign(task, updates);}}return{ addTask, removeTask, getTasks, getPendingTasks, getCompletedTasks, markTaskAsCompleted, getSortedTasksByPriority, filterTasksByTag, updateTask
}}
genial Harold.
Uno difícil, estuvo largo pero interesante.
Al momento de hacer la prueba, sortTasksByPriority() es en realidad getSortedTasksByPriority(), ya lo están corrigiendo.
.
.
.
.
.
.
.
spoilers:
Gracias, sin este comentario no me habría dado cuenta, no sabía qué estaba fallando
Ya está corregida la descripción :D
Aquí está mi solución, en este ejercicio aumentó la dificultad, excelente el reto!!!
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
👾 Mi solución
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
🚧
exportfunctioncreateTaskPlanner(){// Tu código aquí 👈let tasksList =[]return{// crear tareaaddTask:(task)=>{ task.completed=false tasksList.push(task)//console.log(task)},// eliminar tarearemoveTask:(value)=>{ tasksList = tasksList.filter((task)=>{if(task.id!==parseInt(value)&& task.name!== value)return task
console.log(task)})},// listar todas las tareasgetTasks:()=> tasksList,// listar las tareas pendientesgetPendingTasks:()=> tasksList.filter((task)=>!task.completed),// listar las tareas completadasgetCompletedTasks:()=> tasksList.filter((task)=> task.completed),// marcar una tarea como completadamarkTaskAsCompleted:(value)=>{const index = tasksList.findIndex((task)=> task.id===parseInt(value)|| task.name=== value
) tasksList[index].completed=trueconsole.log(tasksList)},// listar las tareas por prioridadgetSortedTasksByPriority:()=>[...tasksList].sort((a, b)=> a.priority- b.priority),// filtrar las tareas por etiquetafilterTasksByTag:(tag)=> tasksList.filter((task)=> task.tags.includes(tag)),// actualizar una tareaupdateTask:(taskId, updates)=>{ tasksList = tasksList.map((task)=>{if(task.id!== taskId)return task
const taskUpdated ={...task,...updates,}console.log(taskUpdated)return taskUpdated
})},}}
Hola!. Muy buen ejercicio, gracias. Comparto mi solución comentada
.
.
.
Antes un par de aportes de mejora:
-Creo que las getCompleted y getPending no corren bien en el simulador; traen todo o nada
-El mark completed sólo deja marcar una task a la vez
-Sería bueno poner explícito el orden del sorting ascendente/descendente porNumero/porDificultad
.
.
.
exportfunctioncreateTaskPlanner(){let tasks =[]return{// spread el objeto entrante, agrega la key completed y conforma el nuevo objetoaddTask(task){tasks.push({...task,completed:false})},// filtra para True cuando el id o el name NO coincidenremoveTask(val){ tasks = tasks.filter(t=>!(val == t.id|| val == t.name));},getTasks(){return tasks;},getPendingTasks(){return tasks.filter(t=> t.completed==false);},getCompletedTasks(){return tasks.filter(t=> t.completed==true);},// trae el elemento que tiene id o tiene name y le pone true a su 'completed'markTaskAsCompleted(val){ tasks.find(t=> val == t.id|| val == t.name).completed=true;},// reconstruye un arreglo desde el original y lo organiza descendentementegetSortedTasksByPriority(){return[...tasks].sort((a,b)=>a.priority- b.priority);},// filtra con True para cuando alguno (some) de los elementos en los tags de la task cumple la condiciónfilterTasksByTag(tag){return tasks.filter(tk=> tk.tags.some(tg=>tg == tag));},// toma la task que coincide con el id. Itera sobre el objeto update y actualiza las propiedadesupdateTask(taskId, updates){let task = tasks.find(t=>t.id== taskId);for(let key in updates) task[key]= updates[key];},}}
Hola!
No hay posibilidad de guardar el progreso en esos "Playground"? es muy molesto que donde llegue a equivocarme con darle f5, con clickear en volver página o hacer el gesto con el touchpad se borra todo y quedo .-.
Y más con un ejercicio largo como este, opté por copiar y pegar el código en otra parte para guardarlo, pero es muy molesto y se me ha perdido el código varias veces, desmotiva un poco hacer el ejercicio con eso
¡Hola @stevenson-grajales!
De entrada mil disculpas por esa mala experiencia, voy a llevar este feedback con el equipo para que en un futuro cercano tengamos esa implementación y no tengas problemas similares 💪
Gracias por hacernos llegar este comentario 💚
Cualquier otro detalle lo puede dejar dentro las clases del curso o llevarlo directamente a nuestro canal oficial de Discord
Un abrazo!
Hola, tengo un problema con la última función, la que actualiza una tarea por el id, la cosa es que no entiendo lo que el error me está tratando de decir, creo que tiene que ver con la forma como viene el nuevo objeto updates, el error es este:
expect(received).toEqual(expected)// deep equality-Expected-10+Received+5Array[Object{-"completed":true,-"id":1,-"name":"Comprar leche",-"notes":"Leche deslactosada",-"place":"supermercado",-"priority":3,-"tags":Array[-"shopping",-"home",-],+"completed":undefined,+"id":undefined,+"name":undefined,+"priority":undefined,+"tags":undefined,},Object{"completed":true,"id":2,"name":"Llamar a Juan","priority":1,"tags":Array["personal",],},]
me podrían ayudar por favor explicándome el problema que me está arrojando?
ok, viendo el error desde los comentarios, ya con colorsitos y un poco mejor organizado, entiendo que me están pasando un objeto con propiedades extra??
¡Hola!
Lo que pasa es que a la tarea se le está agregando más atributos al objeto por lo que debes asegurarte que estés agregando lo que ya trae consigo la tarea junto con sus actualizaciones
Si necesitas más inspiración te dejo aquí la grabación con nicobytes que resuelve este mismo problema 💪
Vaya iba muy bien hasta el dia 9, de aqui me perdi espectacularmente, alguien podria decirme donde aprendo este uso de codigo y demas, estoy siguiendo la ruta de aprendizaje de JS y no vi nada parecido.. gracias
¡Hola Marco!
Hay algún aspecto en particular el cual te haga sentir complejo este ejercicio? De esta manera te puedo recomendar una serie de cursos que te ayudarán a entenderlo y pasar el desafío más fácil 💪
Alguien sabe cual es el requerimiento que me falta? porque ya agrego el atributo completed al crear una tarea...
Por ende, no deberían haber tareas sin el atributo completed definido
Esa prueba tiene que ver con el método
updateTask(taskId, updates)
Puedes compartirnos tu código para darle una revisada por aquí o por discord 💪
Mil gracias! Ya pude solucionar el reto... solo por los memes, muestro como lo estaba haciendo antes x"D
Tuve que verme la ultima clase de manipulacion de arrays para ver como era~