Julio J Yépez
Gabriel De Andrade
Jor ge
Victor Lozada
Carlos Eduardo Gomez García
Carlos David Sanchez Moreno
jorge william reaño reyes
Jorge Méndez Ortega
Ulises German Rios Romero
Manuel Rivera
César Augusto Cortés Labrada
Eder Raúl Abarca Raviela
Irving Juárez
Carlos Enrique Ramírez Flores
Manuel Rivera
Byron Mesias Cueva Cabrera
Eduardo Pech
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.
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!
También podría quedar de la siguiente manera:
let descripcion = document.getElementById('descripcion') descripcion.value = 'texto'
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.
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
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 = ' ' }
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) }
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(); } };
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 }
// 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; }```
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) }
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]; }
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
Mi función con parseFloat porque me estaba concatenando!
const updateTotals = () => { let cal = 0, carb = 0, prot = 0; list.map(item => { 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; }```
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}>` ) }```
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 }
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
