Programando en web - Parte 1 - Curso de programación - Módulo 1

[@kelvinantoniovelasquezvasq5795]

Gracias por el apoyo, estoy iniciando, me gusta mucho la manera en que explicas, todo bien entendido, logré hacer el reto que colocaste de agregar la columna de cantidad.
// Convertir string a array
productos = JSON.parse(productos);
// Agregar productos a la tabla
var tabla = document.getElementById('productos');
for(var i = 0; i < productos.length; i++){
var fila = tabla.insertRow(-1);
var celda1 = fila.insertCell(0);
var celda2 = fila.insertCell(1);
var celda3 = fila.insertCell(2);
var celda4 = fila.insertCell(3);
var celda5 = fila.insertCell(4);
celda1.innerHTML = productos[i].id;
celda2.innerHTML = productos[i].nombre;
celda3.innerHTML = productos[i].precio;
celda4.innerHTML = productos[i].cantidad;
celda5.innerHTML = "Eliminar";
}
}
function agregarProducto(){
// Iniciar variables
var idProducto = document.getElementById('id');
var nombre = document.getElementById('producto');
var precio = document.getElementById('precio');
var cantidad = document.getElementById('cantidad');
// Validar que no sean vacios
if(idProducto == "" || nombre == "" || precio == "" || cantidad== ""){
alert("No puede dejar campos vacios");
return
}
// Agregar producto a la tabla
var tabla = document.getElementById('productos');
var fila = tabla.insertRow(-1);
var celda1 = fila.insertCell(0);
var celda2 = fila.insertCell(1);
var celda3 = fila.insertCell(2);
var celda4 = fila.insertCell(3);
var celda5 = fila.insertCell(4);
celda1.innerHTML = idProducto.value;
celda2.innerHTML = nombre.value;
celda3.innerHTML = precio.value;
celda4.innerHTML = precio.value;
celda5.innerHTML = "Eliminar";
console.log("Se agregó un producto")
// Guardar en la base de datos
var productos = localStorage.getItem('productos');
if(productos === null){
productos = [];
}
else{
productos = JSON.parse(productos);
}
productos.push({id: idProducto.value, nombre: nombre.value, precio: precio.value, cantidad: cantidad.value});
localStorage.setItem('productos', JSON.stringify(productos));
console.log("Se guardó un producto en la base de datos")
// Limpiar campos
idProducto.value = "";
nombre.value = "";
precio.value = "";
cantidad.value = "";
Espero aprender mucho, gracias por tomarte el tiempo de compartir tus conocimientos

[@EstoyProgramando]

Excelente 👏👏 , muchas gracias por tu comentario y buen trabaj

[@elmeme1912]

Que tal, disculpa la molestia, no me agrega el producto, me marca dos lineas de error, ya las compare y creo que ambas estan iguales: var fila = tabla.insertRow(-1); (en el archivo .js) y otro en el .html en esta parte, ojala pudieras orientarme, gracias y excelentes videos; Agregar

[@EstoyProgramando]

Claro que si, gracias por intentarlo. Puedes colocar aqui el error que te sale en la consola de desarrollo? es la que sale cuando le das click derecho inspeccionar y luego haces click en la pestaña Console

[@EstoyProgramando]

Código de la nota #1:
gist.github.com/damuz91/7ac10f0a939f86a1987ff1ee2c73e713
Código de la nota #2:
gist.github.com/damuz91/47d4398b38847c87e07acc8de44bfe2e
El código completo del proyecto:
github.com/damuz91/mi-bodega-html-js

[@magdielcruzsalas4549]

vi que agregaste los campos de texto, pero me hubiera gustado saber el significado de la sintaxis :(

[@EstoyProgramando]

Asi es Magdiel, en este caso esto es una demostración, para darte a entender que esto lo puede hacer cualquiera, pero ya viene el curso de Html donde si se explica en detalle 💪

[@JohannesCamillusjcrm]

Excelente la demostración. Lo hice todo, pero tuve que fallar en algo para que cuando llegado el momento de ingresar el ID, el nombre y el valor del producto, no me generara el producto. Estoy tratando de ver en qué fallé... ¿Vos qué dirías?

[@EstoyProgramando]

Debes hacer click derecho en cualquier sitio de la página y hacer click en inspecciónar elemento. Luego te abre la consola de desarrollador y en la pestaña Console te dice cual es el error. Si no lo entiendes es porque has omitido algún paso, eso es muy común

[@JohannesCamillusjcrm]

@@EstoyProgramando Empezaré mejor de cero. Muchas gracias. Vi el error: unexpected error.

[@magdielcruzsalas4549]

A mi me paso igual, hasta que compare el código con el código completo del proyecto y vi que yo estaba poniendo imput y es input, osea con n...animo si compila

[@EstoyProgramando]

@@magdielcruzsalas4549 Asi es, eso es super común en este oficio, una tecla mal puesta cambia todo el proyecto, pero uno coge buen ojo con el tiempo para detectarlo

[@edwinperez2571]

Donde copio estas dos líneas 8 y 9, en el link de las notas del video no las encuentro