Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Proyecto: Agregar elementos a la lista

12/23
Recursos

Aportes 18

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

El estilo usado por el profesor para definir funciones como constantes y no como functions se llama regularmente en JavaScript: arrow function, aunque en términos más generales también las podemos encontrar como funciones lambda y es una característica introducida por EcmaScript.

Si no quieren utilizar parseInt pueden colocar ‘+’ antes y les hará el cast a entero:

const newItem = {
    description: description.value,
    calories: +calories.value,
    carbs: +carbs.value,
    protein: +protein.value,
  }```

Dejo mi aporte, codigo en JS puro

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

const description = document.getElementById("description");
const calorias = document.getElementById("calories");
const carbohidratos = document.getElementById("carbs");
const proteinas = document.getElementById("protein");
const button = document.getElementById('buttonplus')

const IS_INVALID = 'is-invalid'
const inputs = [description,calorias,carbohidratos,proteinas]

let list = []

// si parametro(las variables) que pase por la función tiene un valor, es valido

const isValid = elem => elem.value

// El formulario será valido cuando todos los argumentos de cada funcion tenga un valor (estos ya pasaron para ser
 // validados en la funcion anterior)
const isFormValid = () => isValid(description) && isValid(calorias) && isValid(carbohidratos) && isValid(proteinas)

// si el parametro que se pase por esta funcion tiene no tiene valor: '' (comprobado por la funcion isValid) 
// entonces agregale una clase que se llame 'is-invalid'
const showInvalid = elem => isValid(elem) ? '' : elem.classList.add(IS_INVALID)

// el elemento que pase por la funcion se le pondrá un evento al digitar una tecla, cuando esto suceda se le quitara la clase is-invalid'
const addKeyDownEvent = elem => elem.addEventListener('keydown', ()=> elem.classList.remove(IS_INVALID))

// recorre la funcion addKeyDownEvent poniendole los nombres de los inputs del array
inputs.forEach(addKeyDownEvent)

// recorra los elementos del array en la funcion showInvalid y luego si la condicion de la funcion isFormValid 
// se cumple (Todos los imput tiene algun valor) realiza la funcion add()
const validateInputs = () => {

    inputs.forEach(showInvalid)

    if(isFormValid()) {
        add()
    }
}

// adiciona los valores del formulario al array vacio list y despues limpia el formulario
const add = () => {
  const newItem = {
    description: description.value,
    calorias: calorias.value,
    carbohidratos: carbohidratos.value,
    proteinas: proteinas.value,
  }
    list.push(newItem)
    cleanInputs()
    console.log(list)
}

// Limpia el formulario
const cleanInputs = () => {
    description.value =''
    calorias.value =''
    carbohidratos.value =''
    proteinas.value =''
}

Si alguien prefiere usar VanillaJS así pueden limpiar los campos
let cleanInputs = () => {
description.value = ''
calories.value = 0
carbs.value = 0
protein.value = 0
}

Aquí hay cosas que no me cuadran… es decir, en capítulos pasados vimos que mutar la variable global no era correcto, pero aquí si la estamos mutando… ¿Es por fines prácticos del curso?..

igual en lugar de list.push() se puede hacer uso del spread operator
list = […list, newItem]

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


description.onkeypress = () => {
  description.classList.remove('is-invalid')
}

carbs.onkeypress = () => {
  carbs.classList.remove('is-invalid')
}

calories.onkeypress = () => {
  calories.classList.remove('is-invalid')
}

protein.onkeypress = () => {
  protein.classList.remove('is-invalid')
}

let list = [];

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

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

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

  list = [...list, newItem]
  cleanInputs()
  console.log(list)
}

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

por favor alquien que me guie como empezar a practicar en javascript ,estoy nuevo en todo esto y realmente necesito ayuda ,que necesito hacer para empezar a practicar creando una webside utilizando javascribt

Código sin JQuery:

Si quieren que la información de list no se pierda cada vez que recargan la página, pueden almacenarla en el localstorage. Algo importante es que en el localstorage sólo se pueden almacenar cadenas de texto, por fortuna, como ya hemos visto, JSON.stringify nos permite convertir un objeto en una cadena de texto

let list = (localStorage.getItem('list'))
    ? JSON.parse(localStorage.getItem('list'))
    : []

Y cada vez que actualicen la lista con la función add, tambien actualizan la variable del localstorage.

localStorage.setItem('list', JSON.stringify(list))

Una forma de probar data o de crear elementos de un array para simular datos podria ser asi:

Array(cantidad_de_veces_a_repetir).fill(dato_con_el_que_quieres_rellenar_tu_array)

Ejemplo:

Array(5).fill(1)  // [1,1,1,1,1]

profe una pregunta, si quisiera editar uno de los elementos como selecciono el item del array, pues lo hice recorriendo el array con un for, pero tengo esa sensación de que no es la forma optima de hacerlo

for (var i in list) {
     if (list[i].value == value) {
        list[i].desc = desc;
        break; 
     }
   }

En este ejemplo, ¿No sería más correcto en la función add, mandar como parámetro la descripción, calorías y proteínas. Porque de otra manera no se está aplicando el concepto de funciones puras.

Por si le funciona a le funciona dejo mi ejemplo donde estoy utilizando JS puro sin utilizarjQuery

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 = [];


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

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

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

Para agregar los nuevos elementos a la lista no debería ser de forma inmutable también?

¿la función cleanInputs es una función pura?

// reset values Inputs
function resetValues () {
  $description.value = '';
  $calories.value = '';
  $carbs.value = '';
  $protein.value = '';

};```

¯\_(ツ)_/¯