Proyecto: Eliminar elementos

Clase 21 de 23 • Curso de Programación Funcional en JavaScript por Bedu

Julio J Yépez

student•

Algo interesante que se ve en esta clase es cómo cada vez que se hace algún cambio a la lista es necesario llamar a la función que vacía la tabla y luego la que hace el render de los items. Esto sucede porque se está usando jQuery como librería de renderizado.

Otras librerías (o frameworks) como React, Angular o Vue no requieren el renderizado manual con cada cambio de estado porque utilizan un paradigma de programación llamado reactivo basado en el patrón de diseño de Observers. Entidades de ES que permiten detectar el cambio de “estado” y ejecutar el re-renderizado de los elementos del DOM cuyo valor/contenido dependan de éste. (bueno … más o menos) 😉

Algunas referencias sobre este tema:

David Antonio Ordóñez Cornejo

student•

Muy bueno el aporte.

Yulissa Terán Cerquín

student•

Además de Angular, ¿React y Vue también usan observers?

Juan Castro

teacher•

La función .map de JavaScript puede recibir un segundo argumento que por convención se llama index y nos sirve para obtener la posición de un elemento dentro de nuestro array 👍.

Learn & Understand JavaScript’s Map Function - codeburst

Carlos Gómez Mont

student•

Super aporte, gracias!!

Daniel Castillo

student•

También recibe como tercero el Array al que pertenece el elemento

Jorge Méndez Ortega

student•

Practica general del curso sin utilizar jQuery 🤢, para este caso solo se utilizo JS puro lo cual también se conoce como vanilla.

const compose = (...functions) => data => functions.reduceRight((value, func) => func(value), data);

// Se utiliza $ para identificar que una variable o constante hace referencia
// a elementos del DOM
const $DESCRIPTION = document.getElementById("description");
const $CALORIAS = document.getElementById("calorias");
const $CARBOIDRATOS = document.getElementById("carboidratos");
const $PROTEINAS = document.getElementById("proteinas");
const ERROR_CLASS = "is-invalid";
const SUCCESS_CLASS = "is-valid";

// Arreglo de elementos
let LIST = [];

// consiguiendo los atributes para las etiquetas HTML
const attributesToString = (obj = {}) => {
    const ENTRIES = Object.entries(obj);
    const ATTRS = [];
    for (let i = 0; i < ENTRIES.length; i += 1) {
        const AUX = ENTRIES[i];
        const ATTR = AUX[0];
        const VALUE = AUX[1];
        ATTRS.push(`${ATTR}="${VALUE}"`);
    }
    return ATTRS.join("");
};

// Creando etiquetas html con atributos
const createTagAttr = obj => (content = "") => {
    const { tag, attr } = obj;
    return `
      <${tag}${attr ? ` ${attributesToString(attr)}` : ""}>
        ${content}
      </${tag}>`;
};

// Generando tag de maner dinamica
const createTag = (tag) => {
    const TAG = (typeof tag === "string")
        ? createTagAttr({ tag })
        : createTagAttr(tag);
    return TAG;
};

const trashIcon = createTag({ tag: "i", attr: { class: "fas fa-trash-alt" } })("");
const tableCell = createTag("td");
const tableCells = items => items.map(tableCell).join("");

const tableRowTag = createTag("tr");
const tableRow = items => compose(tableRowTag, tableCells)(items);


// Asignacion de evntos siempre que se desea asignar un evento aun elemento del DOM
// es necesario utilizar addEventListener
$DESCRIPTION.addEventListener("keypress", () => $DESCRIPTION.classList.remove(ERROR_CLASS));
$CALORIAS.addEventListener("keypress", () => $CALORIAS.classList.remove(ERROR_CLASS));
$CARBOIDRATOS.addEventListener("keypress", () => $CARBOIDRATOS.classList.remove(ERROR_CLASS));
$PROTEINAS.addEventListener("keypress", () => $PROTEINAS.classList.remove(ERROR_CLASS));

// Limpiando inputs
const cleanInputs = () => {
    $DESCRIPTION.classList.remove(SUCCESS_CLASS);
    $DESCRIPTION.value = "";
    $CALORIAS.classList.remove(SUCCESS_CLASS);
    $CALORIAS.value = "";
    $CARBOIDRATOS.classList.remove(SUCCESS_CLASS);
    $CARBOIDRATOS.value = "";
    $PROTEINAS.classList.remove(SUCCESS_CLASS);
    $PROTEINAS.value = "";
};

// Actualizando totales
const updateTotals = () => {
    let carboidratos = 0;
    let proteinas = 0;
    let calorias = 0;
    // Por buenas praxticas se utiliza un forEach y cumple la mism funcion que se busca
    // practicamente una funcion de alto orden, no utiizo el map por que  map siempre regresa
    // algo y de momento no importa capturar lo que regresa la iteracion que realizamos.
    LIST.forEach((item) => {
        carboidratos += item.carboidratos;
        proteinas += item.proteinas;
        calorias += item.calorias;
    });
    document.querySelector("#totalCalorias").textContent = calorias;
    document.querySelector("#totalCarboidratos").textContent = carboidratos;
    document.querySelector("#totalProteinas").textContent = proteinas;
};

// Permite realizar el rendereo de los items
const renderItems = () => {
    // otra manera de poder obtener un elemento por el name TAG
    // solo que este metodo consigue un arreglo de elementos
    const $CONTAINER = document.getElementsByTagName("tbody")[0];
    $CONTAINER.innerHTML = "";
    const ROWS = LIST.map((item, index) => {
        const {
            calorias, description,
            carboidratos, proteinas,
        } = item;
        const removeButton = createTag({
            tag: "button",
            attr: {
                class: "btn btn-outline-danger",
                onclick: `removeItem(${index})`,
            },
        })(trashIcon);

        return tableRow([description, calorias, carboidratos, proteinas, removeButton]);
    });
    $CONTAINER.innerHTML = ROWS.join("");
};


// Agregar elementos en la lista
const addElement = () => {
    const newItem = {
        description: $DESCRIPTION.value,
        calorias: parseInt($CALORIAS.value, 10),
        carboidratos: parseInt($CARBOIDRATOS.value, 10),
        proteinas: parseInt($PROTEINAS.value, 10),
    };
    LIST.push(newItem);
    cleanInputs();
    updateTotals();
    renderItems();
};

// funcion para validar los inputs
const validateInputs = () => {
    // Por cuestion de buenas practicas el resultado de una condición
    // Ternaria tiene que ser asignada a una variable o constante
    const DESCRIPTION_CLASS = (($DESCRIPTION.value) ? SUCCESS_CLASS : ERROR_CLASS);
    $DESCRIPTION.classList.add(DESCRIPTION_CLASS);

    const CALORIAS_CLASS = (($CALORIAS.value) ? SUCCESS_CLASS : ERROR_CLASS);
    $CALORIAS.classList.add(CALORIAS_CLASS);

    const CARBOIDRATOS_CLASS = (($CARBOIDRATOS.value) ? SUCCESS_CLASS : ERROR_CLASS);
    $CARBOIDRATOS.classList.add(CARBOIDRATOS_CLASS);

    const PROTEINAS_CLASS = (($PROTEINAS.value) ? SUCCESS_CLASS : ERROR_CLASS);
    $PROTEINAS.classList.add(PROTEINAS_CLASS);

    if ($DESCRIPTION.value && $CALORIAS.value && $CARBOIDRATOS.value && $PROTEINAS.value) {
        addElement();
    }
};

// Permite remover un item seleccionado
const removeItem = (position) => {
    LIST = LIST.filter((item, index) => position !== index);
    updateTotals();
    renderItems();
};

Victor Lozada

student•

Otra forma de eliminar el item de la lista es utilizando el metodo .filter() quedaria asi:

const removeItem = (index) => {
//list.splice(index,1) esto sera sustituido por el código debajo 
  list = list.filter((item,i) => i !== index)

  updateTotals()
  renderItems()
}

Para saber mas sobre este método : Array.prototype.filter() - MDN 👍🏻

Usuario anónimo

user•

Super! Gracias :)

Sebastián Buitrago

student•

Viendo este proyecto con JS Vanilla y con JQuery veo que los frameworks como react o vue o angular disminuyen demasiado el trabajo, lo hacen ver sencillo a comparacion de JS Vanilla

Carlos Eduardo Gomez García

teacher•

La función tag() que creamos me recuerda mucho a la función h() de Vue cuando usamos renderFunctions, solo que digamos que ahí la función es un poco más poderosa por así decirlo.

Y el usar esas funciones con JavaScript para crear elementos se resuelve con JSX xD

Francisco Garcia [C6]

student•

Muy interesante.

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data)

const attrsToString = (obj = {}) => Object.keys(obj).map(attr => `${attr}="${obj[attr]}"`).join(' ')

const tagAtrrs = obj => (content = "") => `<${obj.tag}${obj.attrs ? ' ' : ''}${attrsToString(obj.attrs)}>${content}</${obj.tag}>`

const tag = t => typeof t === 'string' ? tagAtrrs({tag: t}) : tagAtrrs(t)

const tableRowTag = tag('tr')
//const tableRow = items => tableRowTag(tableCells(items))
const tableRow = items => compose(tableRowTag, tableCells)(items)

const tableCell = tag('td')
const tableCells = items => items.map(tableCell).join('')

const trashIcon = tag({tag: 'i', attrs: {class: 'fas fa-trash-alt'}})('')

let description = $('#description')
let calories = $('#calories')
let carbs = $('#carbs')
let protein = $('#protein')

let list = []

description.keypress(() => {
  description.removeClass('is-invalid')
})

calories.keypress(() => {
  calories.removeClass('is-invalid')
})

carbs.keypress(() => {
  carbs.removeClass('is-invalid')
})

protein.keypress(() => {
  protein.removeClass('is-invalid')
})

const validateInputs = () => {

  description.val() ? '' : description.addClass('is-invalid')
  calories.val() ? '' : calories.addClass('is-invalid')
  carbs.val() ? '' : carbs.addClass('is-invalid')
  protein.val() ? '' : protein.addClass('is-invalid')

  if(
    description.val() &&
    calories.val() &&
    carbs.val() &&
    protein.val()
  ) add()
}

const add = () => {
  const newItem = {
    description: description.val(),
    calories: parseInt(calories.val()),
    carbs: parseInt(carbs.val()),
    protein: parseInt(protein.val())
  }
  list.push(newItem);
  cleanInputs()
  updateTotals()
  renderItems()
}

const updateTotals = () => {
  let calories = 0, carbs = 0, protein = 0

  list.map( item => {
    calories += item.calories;
    carbs += item.carbs;
    protein += item.protein;
  })

  $('#totalCalories').text(calories)
  $('#totalCarbs').text(carbs)
  $('#totalProtein').text(protein)
}

const cleanInputs = () => {
  description.val('')
  calories.val('')
  carbs.val('')
  protein.val('')
}

const renderItems = () => {
  $('tbody').empty()

  list.map((item, index ) => {

    const removeButton = tag({
      tag: 'button',
      attrs: {
        class: 'btn btn-outline-danger',
        onclick: `removeItem(${index})`
      }
    })(trashIcon)

    $('tbody').append(tableRow([item.description, item.calories, item.carbs, item.protein, removeButton]))
  })
}

const removeItem = (index) => {
  list.splice(index, 1)

  updateTotals()
  renderItems()
}

Julio J Yépez

student•

En el min 05:02 se observa cómo se cambia la sintaxis de la arrow function de item => { a (item, index) => {. Esto es porque al recibir solo un parámetro, no es necesario encerrarlo entre paréntesis, pero cuando es más de uno sí.

Javier Romero

student•

si dice el profesor que bootstrap lo tiene todo la pregunta es, como lo instaló sino tiene ni siquiera un node_modules para que sea alojado... yo observé en la carpeta de css un archivo llamado bootstrap.main.css con un montón de código que me tiene loco de tanto verlo, de donde saco ese archivo es mi pregunta o como lo instalo??

sofia mejia

student•

Usando la CDN, acá está la documentación https://getbootstrap.com/docs/4.3/getting-started/introduction/

No necesitas node

Javier Romero

student•

Hola Sofia, ya leí la CDN y es solamente poner una etiqueta link en head y las etiquetas scripts en un archivo HTML, hasta ahí muy bien y lo puedo hacer, pero la pregunta es esta, después de hacer todo lo que me explica la CDN como hago que aparezca este archivo -> bootstrap.main.css???

Eder Raúl Abarca Raviela

student•

Simplifiqué el código de tableRow() y la función que genera el botón de borrado (buttonGenerator(idx)) para mayor claridad (par mí):

function tableRow(array) {
  return `<tr>
  <td>${array[0]}</td>
  <td>${array[1]}</td>
  <td>${array[2]}</td>
  <td>${array[3]}</td>
`
}
function buttonGenerator(idx){
  return `<td><button class="btn btn-outline-danger" onclick="removeItem(${idx})">
  <i class="fas fa-trash-alt"></i>
</button></td></tr>`;
}

Alejandro Mejia Escobar

student•

Si estás guardando la lista en el localStorage, recuerda actualizarla al momento de eliminar el elemento de la lista

const removeItem = index => {
  list.splice(index, 1);
  updateTotals();
  renderItems();
  localStorage.setItem('list', JSON.stringify(list))
}

Tomas Goldenberg

student•

Cuando elimino el item me dice que deleteItem no esta definida pero si lo esta ademas la funcion me aparece sombreada como si nunca la hubiese llamado

const deleteItem= (index)=>{ list.splice(index,1)

  updateTotals()  
  renderItems()
}



const renderItems = () =&gt; {

  const listWrapper = document.querySelector('tbody')

  listWrapper.innerHTML = &quot;&quot;  

  list.map((item,index) =&gt; {    
    const boton = tag({
      tag:&quot;button&quot;,
      attrs:{
        class:&quot;btn btn-outline-danger&quot;,
        onclick: `deleteItem(${index}) ` 
      },
    })(trashIcon)
    
    listWrapper.innerHTML += tableRow([
      item.description, 
      item.calories, 
      item.carbs, 
      item.protein,
      boton   
    ])
  })
}

Proyecto: Eliminar elementos

Introducción al curso y conceptos base

Qué aprenderás sobre la programación funcional

Programación funcional: qué es

Boilerplate: Base para el proyecto del curso

Funciones

Funciones Algebraicas y Funciones de JavaScript

Qué son funciones puras

Proyecto: Obtener el valor de los inputs

Objetos y Tipos de Memoria en JavaScript

Copiar y modificar objetos en JavaScript

Utilizando inmutabilidad en nuestras funciones

Proyecto: Validar inputs

Estado compartido en funciones

Estado compartido o shared state

Proyecto: Agregar elementos a la lista

Composición de funciones, Closures y Currying

Funciones compuestas o Function Composition

Completando las funciones para generar etiquetas HTML

Closures en programación funcional

Currying

Proyecto: Construyendo filas y celdas

Higher Order Functions

Introducción a las Higher Order Functions

Proyecto: Actualizando el total de calorías

Proyecto: Mostrar elementos

Proyecto: Eliminar elementos

Bonus: Declarative Programming

Programación Declarativa

Conclusiones

Conclusiones