Proyecto: Actualizando el total de calorías

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

Julio J Yépez

student•

Comprendo la facilidad que ofrece el uso de jQuery en el proyecto para seleccionar elementos del DOM; pero, creo que hubiera estado más acorde con la onda EcmaSript-ProgramaciónFuncional, si en lugar de jQuery, se hubiera usado JavaScript vanilla: document.querySelector('#id-selector') …

¡Aún así, el curso va muy bien!
Seguimos.

Gabriel De Andrade

student•

Agregando a esto recuerdo que se puede usar la propiedad textContent de JavaScript para lograr cambiar el texto quedando algo así:
document.querySelector('#id-selector').textContent = 'value'

¡Coincido, muy buen curso!

Jor ge

student•

También podría quedar de la siguiente manera:

let descripcion = document.getElementById('descripcion')

descripcion.value = 'texto'

Victor Lozada

student•

Si les parece mas rápido y sencillo utilizar la nomenclatura de jQuery $('#element') para acceder a los elementos del dom, pueden hacer uso de esta sin necesidad de cargar la librería con la siguiente función:

//probando en la home de platzi (https://platzi.com/) desde la consola

const $ = element => document.querySelector(element)
const spanNumber = $('#home-v4 > div > div.HeroContent > div > div.HeroContent-content > div.HeroContent-stats > div > div:nth-child(1) > span:nth-child(1)')
console.log(spanNumber) // nos mostrara un elemento span

++AVISO++: de esta forma no podrás usar los métodos de jQuery como val() o text() ,pero tendrás disponibles todos los métodos nativos de los elementos HTML como .innerText o .textContent entre muchísimos mas claro.

Carlos Eduardo Gomez García

teacher•

Veo esto y veo Vue y recuerdo por qué amo Vue jaja, con Vue solo tienes que actualizar el valor y ya Vue se encarga de actualizar todo el en DOM xD

Carlos David Sanchez Moreno

student•

VanillaJS

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


const attrsToString = (obj = {}) => {

  const keys = Object.keys(obj)
  let attrs = []

  for(let i = 0; i < keys.length; i++){
    let attr = keys[i]
    attrs.push(`${attr}="${obj[attr]}"`)
  }
  
  const string = attrs.join('')
  return string
}// string

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

const tag = t => {
  if (typeof t === 'String'){
    tagAttrs({tag: t})
  }else{
    tagAttrs(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 => item.map(tableCell).join('')


let list = []
let description = document.getElementById('description')
let calories = document.getElementById('calories')
let carbs = document.getElementById('carbs')
let protein = document.getElementById('proteins')
let btn = document.getElementById('btn')

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) {
    console.log('OK!')
    add()
    cleanInputs()
    updateTotals()
  }
}

btn.addEventListener('click', validateInputs)

description.addEventListener('keydown', () => description.classList.remove('is-invalid'))
calories.addEventListener('keydown', () => calories.classList.remove('is-invalid'))
carbs.addEventListener('keydown', () => carbs.classList.remove('is-invalid'))
proteins.addEventListener('keydown', () => proteins.classList.remove('is-invalid'))

const add = () => {
  const newItem = {
    description: description.value,
    calories: parseInt(calories.value),
    carbs: parseInt(carbs.value),
    proteins: parseInt(proteins.value)
  }
  list.push(newItem)
  console.log(list)
}

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

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

  document.getElementById('totalCalories').innerHTML = calories
  document.getElementById('totalCarbs').innerHTML = carbs
  document.getElementById('totalProteins').innerHTML = proteins

}

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

jorge william reaño reyes

student•

let updateTotals = () => { let scal = items.reduce((acum,item) => acum +=parseInt(item.cal) ,0) let scarb = items.reduce((acum,item) => acum +=parseInt(item.carb) ,0) let sprote = items.reduce((acum,item) => acum +=parseInt(item.prote) ,0) }

Jorge Méndez Ortega

student•

Ejemplo utlizando JS puro o lo que tambien 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
const 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;
};

// 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 = "";
};

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

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

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

Ulises German Rios Romero

student•

Este es mi código para la parte de updateTotals, utilize textContent, ya que innerHTML no me convence mucho para este caso

//Las puse a parte por si se usan en otro momento, si no simplemente se pasan a la función
const totalCalories = document.getElementById('totalCalories')
const totalCarbs = document.getElementById('totalCarbs')
const totalProteins = document.getElementById('totalProteins')

const updateTotals = () => {
	let calories = 0, carbs = 0, protein= 0
	list.map(item => {
		calories += item.calories,
		carbs += item.carbs,
		protein += item.protein
	})
	console.log(calories)
	totalCalories.textContent = calories
	totalCarbs.textContent = carbs
	totalProteins.textContent = protein
}

Manuel Rivera

student•

// update total inputs
function updateTotals () {
  let calories = 0, carbs = 0, protein = 0;

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

  document.querySelector('#totalCalories').innerHTML = calories;
  document.querySelector('#totalCarbs').innerHTML = carbs;
  document.querySelector('#totalProtein').innerHTML = protein;

}```

César Augusto Cortés Labrada

student•

Para evitar escribir tantas veces document.getElementById podemos crear una función, este caso le llamé nodeId, recibe como parámetro el id del elemento html que deseamos obtener. Esto lo aprendí de otro estudiante en el curso de profesional de asincronismo con Juan DC.

const nodeId = (node) => document.getElementById(node);

//Función que actualiza los valores totales
const updateTotals = () => {
  let calories = 0, carbs =0, protein = 0;

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

  nodeId("totalCalories").textContent = calories;
  nodeId("totalCarbs").textContent = carbs;
  nodeId("totalProtein").textContent = protein;

  console.log(calories, carbs, protein)
}

Eder Raúl Abarca Raviela

student•

Mi versión de la función updateTotals() usando reduce:

function updateTotals() {
  let totals = dataList.reduce((acc, num)=> {
    acc =  [acc[0]+ num['calories'], acc[1]+ num['carbs'], acc[2]+ num['protein']];
    return acc
  }, [0,0,0])
  // console.log(totals);
  totalCalories.innerText = totals[0];
  totalCarbs.innerText = totals[1];
  totalProtein.innerText = totals[2];
}

Irving Juárez

student•

Desde mi personal punto de vista, yo hubiera hecho la función con un .forEach, ya que el este método hace casi lo que hace un ciclo for, lo que vendría siendo el recorrer todo el arreglo y ya, sin regresar ningún tipo de array nuevo, como en el caso de .map

Carlos Enrique Ramírez Flores

student•

Mi función con parseFloat porque me estaba concatenando!


const updateTotals = () =&gt; {
  let cal = 0, carb = 0, prot = 0;
  list.map(item =&gt; {
    cal += parseFloat(item.calories),
    carb += parseFloat(item.carbs),
    prot += parseFloat(item.protein)
  })
  document.getElementById('totalCalories').textContent= cal;
  document.getElementById('totalCarbs').textContent= carb;
  document.getElementById('totalProtein').textContent= prot;
}```

Manuel Rivera

student•

Para los que validaron anteriormente como yo lo hice, en esta clase les arrojará un error, hay que agregar una línea de código en la siguiente función.

// tagAttrs
function tagAttrs (obj, content = '') {
  if (!obj.attrs) obj = {...obj, attrs: {}}

  return (
    `<${obj.tag}${Object.keys(obj.attrs).length > 0 && ' '}${attrsToString(obj.attrs)}>${content}</${obj.tag}>`
  )
}```

Byron Mesias Cueva Cabrera

student•

Yo lo hice así:

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

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

  const query = document.querySelector.bind(document)
  query('#totalCalories').textContent = calories
  query('#totalCarbs').textContent = carbs
  query('#totalProtein').textContent = protein
}

Eduardo Pech

student•

Así quedó en VanillaJS

const $totalCalories = document.getElementById("totalCalories");
const $totalCarbs = document.getElementById("totalCarbs");
const $totalProtein = document.getElementById("totalProtein");

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

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

  $totalCalories.textContent = calories;
  $totalCarbs.textContent = carbs;
  $totalProtein.textContent = protein;
};

.textContent resulta text/plain mientras que innerHTML resulta text/html