Proyecto: Mostrar elementos

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

Julio J Yépez

student•

La función renderItems() redefinida sin jQuery, sería algo como:

const renderItems = () => {

  document.querySelector('tbody').innerHTML = ''

  list.map(item => {

    const row = document.createElement('tr')

    row.innerHTML = tableRow([
      item.description,
      item.calories,
      item.carbs,
      item.protein
    ])

    document.querySelector('tbody').appendChild( row )
  })
}

IMO

Gabriel De Andrade

student•

Yo por mi parte modifiqué el innerHTML De una vez en el elemento HTML quedando algo así

const renderItems = () => {
  
  const listWrapper = document.querySelector('tbody')

  listWrapper.innerHTML = ""  

  list.map(item => {    
    listWrapper.innerHTML += tableRow([
			item.description, 
			item.calories, 
			item.carbs, 
			item.proteins
		])
  })
}

Fernando Alejandro Yerena Ramos

student•

@gabrielelpido, ¿Al colocar += no se repiten los elementos ya renderizados de la lista, en la tabla? 🤔

Jorge Méndez Ortega

student•

Una variante de la función renderItems, para este caso no utilizamos jQuery y tampoco utilizo el createElement de JS ya que realmente es inecesario ya que la creacion de los tags ya existe dentro de las funciones.

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) => {
        const {
            calorias, description,
            carboidratos, proteinas,
        } = item;
        return tableRow([description, calorias, carboidratos, proteinas]);
    });
    $CONTAINER.innerHTML = ROWS.join("");
};

Diego Andres Cardenas Caro

student•

Genia. me gusto tu solucion sin usar jquery y aplicando destructuring. 👌

Carlos Enrique Ramírez Flores

student•

Gracias!! yo use document.querySelector("tbody");

Bryan Estiven Silva Mercado

student•

obtengo el siguiente error

main.js:150 Uncaught TypeError: undefined is not a function

El error es en esta linea

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

alguna idea ?

Bryan Estiven Silva Mercado

student•

tableCell tiene un estado de undefined

Danelia Sanchez Sanchez

student•

Podría ser algún error de digitación, a mí me sucedió que en la función tag había omitido la palabra return.

Fernando Quinteros Gutierrez

student•

Codigo vanilla JS hasta el momento

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

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

const tagAtrrs = ({ tag, attrs }) => (content = "") =>
  `<${tag} ${attrs && attrsToString(attrs)}>${content}</${tag}>`;

const tag = (t) => {
  if (typeof t === "string") {
    return tagAtrrs({ tag: t });
  } else {
    return 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("");

let description = document.getElementById("description");
let calories = document.getElementById("calories");
let carbs = document.getElementById("carbs");
let protein = document.getElementById("protein");
let $inputs = document.querySelectorAll("input");
let $btnSubmit = document.getElementById("submit-button");

let list = [];

$inputs.forEach((input) => {
  input.addEventListener("keypress", function () {
    this.classList.remove("is-invalid");
  });
});

const validateInputs = () => {
  description.value ? "" : description.classList.add("is-invalid");
  calories.value ? "" : calories.classList.add("is-invalid");
  carbs.value ? "" : carbs.classList.add("is-invalid");
  protein.value ? "" : protein.classList.add("is-invalid");

  if (description.value && calories.value && carbs.value && protein.value) {
    add();
  }
};

const add = () => {
  const newItem = {
    description: description.value,
    calories: parseInt(calories.value),
    carbs: parseInt(carbs.value),
    protein: parseInt(protein.value),
  };

  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;
  });

  document.getElementById("totalCalories").innerText = calories;
  document.getElementById("totalCarbs").innerText = carbs;
  document.getElementById("totalProtein").innerText = protein;
};

const cleanInputs = () => {
  description.value = "";
  calories.value = "";
  carbs.value = "";
  protein.value = "";
};

const renderItems = () => {
  document.querySelector("tbody").innerHTML = "";

  list.map((item) => {
    const row = document.createElement("tr");

    const { description, calories, carbs, protein } = item;
    row.innerHTML = tableRow([description, calories, carbs, protein]);

    document.querySelector("tbody").appendChild(row);
  });
};

$btnSubmit.addEventListener("click", validateInputs);

Jorge Méndez Ortega

student•

Una manera un poco diferente de crear elementos de manera dinamica

const createElement = Object.create({ config: null, customSettings: null, contetPanel: null }, {
    init:
    {
        get() {
            this.config = {
                tag: "div",
                id: `id_${Math.random().toString(36).substr(2)}`,
                label: "empty",
            };
            Object.assign(this.config, this.customSettings);
        }, // get:function
    }, // init
    factory:
    {
        get() {
            if (this.contetPanel !== null) {
                const panel = document.createElement(this.config.tag);
                let source = "";
                let config = "";
                const ENTRIES = Object.entries(this.config);
                ENTRIES.forEach((item) => {
                    const PROPERTY = item[0];
                    config = this.config[PROPERTY];
                    source = (PROPERTY === "infoText") ? `panel.innerHTML = '${config}';` : `panel.${PROPERTY} = '${config}';`;
                    eval(source);
                });

                if (this.config.label !== "" && this.config.label !== "empty") {
                    const tagLabel = document.createElement("label");
                    tagLabel.innerHTML = this.config.label;
                    this.contetPanel.appendChild(tagLabel);
                }// if (config.label != '' && config.label != 'empty')
                this.contetPanel.appendChild(panel);
                this.contetPanel = null;
            }
        }, // get:function()
    }, // factory
    create:
    {
        value(custom, selector = "") {
            this.customSettings = custom;
            this.contetPanel = (selector !== "") ? document.querySelector(selector) : document.body;
            this.init;
            this.factory;
            return this.config.id;
        }, // value
    }, // create
});// createElement

const CONFIG = {
    tag: "div",
    id: "demo",
    className: "style",
}

// ejemplo
createElement.create(CONFIG, "body");

Angelo Zambrano

student•

Les comparto mi código en Vanilla JS:

View:

Eder Raúl Abarca Raviela

student•

Mi versión de la función renderItems() usando reduce y JS vanilla:

Nota: **dataList **es el array que el maestro nombró como list

function renderItems() {
  tableContent.innerHTML = '';
  
  let dataTable= dataList.reduce((acc, item)=> {
    acc = acc + tableRow([item.description, item.calories, item.carbs, item.protein]) +'\n'
    return acc; 
  },'');
  // console.log(dataTable);
  tableContent.innerHTML= dataTable;

}

JOSE RANGEL

student•

En la forma en como lo estoy realizando, simplemente recibo el objeto con la data que voy a agregar a la tabla. . Así está la función addItem()

const addItem = (data) => {
    const tbody = document.querySelector('tbody');
    const row   = document.createElement('tr');
    for(let prop in data){
        row.innerHTML += tag('td')(data[prop])
    }
    tbody.appendChild(row)
}

Saludos!

Francisco Garcia [C6]

student•

Muy interesante.

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

  list.map(item => {
    $('tbody').append(tableRow([item.description, item.calories, item.carbs, item.protein]))
  })
}

Carlos Eduardo Gomez García

teacher•

Que gracioso, a mi se me están imprimiendo los códigos de las funciones tal cual jajaja....

const renderItems = () => {

  document.querySelector('tbody').innerHTML = ''

  list.map(item => {

    const row = document.createElement('tr')

    row.innerHTML = tableRow([
      item.description,
      item.calories,
      item.carbs,
      item.protein
    ])

    document.querySelector('tbody').appendChild( row )
  })
}

const renderItems = () => {
  
  const listWrapper = document.querySelector('tbody')

  listWrapper.innerHTML = ""  

  list.map(item => {    
    listWrapper.innerHTML += tableRow([
			item.description, 
			item.calories, 
			item.carbs, 
			item.proteins
		])
  })
}

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) => {
        const {
            calorias, description,
            carboidratos, proteinas,
        } = item;
        return tableRow([description, calorias, carboidratos, proteinas]);
    });
    $CONTAINER.innerHTML = ROWS.join("");
};

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

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

const tagAtrrs = ({ tag, attrs }) => (content = "") =>
  `<${tag} ${attrs && attrsToString(attrs)}>${content}</${tag}>`;

const tag = (t) => {
  if (typeof t === "string") {
    return tagAtrrs({ tag: t });
  } else {
    return 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("");

let description = document.getElementById("description");
let calories = document.getElementById("calories");
let carbs = document.getElementById("carbs");
let protein = document.getElementById("protein");
let $inputs = document.querySelectorAll("input");
let $btnSubmit = document.getElementById("submit-button");

let list = [];

$inputs.forEach((input) => {
  input.addEventListener("keypress", function () {
    this.classList.remove("is-invalid");
  });
});

const validateInputs = () => {
  description.value ? "" : description.classList.add("is-invalid");
  calories.value ? "" : calories.classList.add("is-invalid");
  carbs.value ? "" : carbs.classList.add("is-invalid");
  protein.value ? "" : protein.classList.add("is-invalid");

  if (description.value && calories.value && carbs.value && protein.value) {
    add();
  }
};

const add = () => {
  const newItem = {
    description: description.value,
    calories: parseInt(calories.value),
    carbs: parseInt(carbs.value),
    protein: parseInt(protein.value),
  };

  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;
  });

  document.getElementById("totalCalories").innerText = calories;
  document.getElementById("totalCarbs").innerText = carbs;
  document.getElementById("totalProtein").innerText = protein;
};

const cleanInputs = () => {
  description.value = "";
  calories.value = "";
  carbs.value = "";
  protein.value = "";
};

const renderItems = () => {
  document.querySelector("tbody").innerHTML = "";

  list.map((item) => {
    const row = document.createElement("tr");

    const { description, calories, carbs, protein } = item;
    row.innerHTML = tableRow([description, calories, carbs, protein]);

    document.querySelector("tbody").appendChild(row);
  });
};

$btnSubmit.addEventListener("click", validateInputs);

const createElement = Object.create({ config: null, customSettings: null, contetPanel: null }, {
    init:
    {
        get() {
            this.config = {
                tag: "div",
                id: `id_${Math.random().toString(36).substr(2)}`,
                label: "empty",
            };
            Object.assign(this.config, this.customSettings);
        }, // get:function
    }, // init
    factory:
    {
        get() {
            if (this.contetPanel !== null) {
                const panel = document.createElement(this.config.tag);
                let source = "";
                let config = "";
                const ENTRIES = Object.entries(this.config);
                ENTRIES.forEach((item) => {
                    const PROPERTY = item[0];
                    config = this.config[PROPERTY];
                    source = (PROPERTY === "infoText") ? `panel.innerHTML = '${config}';` : `panel.${PROPERTY} = '${config}';`;
                    eval(source);
                });

                if (this.config.label !== "" && this.config.label !== "empty") {
                    const tagLabel = document.createElement("label");
                    tagLabel.innerHTML = this.config.label;
                    this.contetPanel.appendChild(tagLabel);
                }// if (config.label != '' && config.label != 'empty')
                this.contetPanel.appendChild(panel);
                this.contetPanel = null;
            }
        }, // get:function()
    }, // factory
    create:
    {
        value(custom, selector = "") {
            this.customSettings = custom;
            this.contetPanel = (selector !== "") ? document.querySelector(selector) : document.body;
            this.init;
            this.factory;
            return this.config.id;
        }, // value
    }, // create
});// createElement

const CONFIG = {
    tag: "div",
    id: "demo",
    className: "style",
}

// ejemplo
createElement.create(CONFIG, "body");

function renderItems() {
  tableContent.innerHTML = '';
  
  let dataTable= dataList.reduce((acc, item)=> {
    acc = acc + tableRow([item.description, item.calories, item.carbs, item.protein]) +'\n'
    return acc; 
  },'');
  // console.log(dataTable);
  tableContent.innerHTML= dataTable;

}

const addItem = (data) => {
    const tbody = document.querySelector('tbody');
    const row   = document.createElement('tr');
    for(let prop in data){
        row.innerHTML += tag('td')(data[prop])
    }
    tbody.appendChild(row)
}

Proyecto: Mostrar 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