No acostumbró a hacer comentarios por que sé que las personas que hacen estos vídeos explicativos tratan de hacerlo de la mejor manera que pueden, pero tu brother te pasas, eres un crack, un vídeo así con todo incluido es lo que tengo como dos meses de andar buscando y neta no pude ni pausar, ni tan siquiera ver a otro lado fue increíble, muchas gracias!! Sigue así, sigue ayudando a los simples mortales como yo en esto!. Gracias!.
Cuando estaba haciendo un juego, para mi fue muy difícil entender sobre como detectar el evento, pero con su video ya siento que es muy fácil detectarlo, muchas gracias
Ignacio, eres un montro!! Como dicen en mi país. Muchísimas gracias por este video, de crear una App de una Rutina del Gym. Ahora veré el nuevo video para aprender a hacerlo con Vue, así podré notar la enorme diferencia y seguir aprendiendo más y más del framework con tus enseñanzas. Haces ver que la programación es realmente sencilla, nuevamente gracias!!
Me encantó este video, muchas gracias, llevaba varios días tratando de entender como funciona el localStorage y como guardar las cosas y al fin pude. Gracias
Hola Ignacio, felicitaciones... excelente vídeo. Te hago un aporte: En el momento de eliminar un registro, que tan si en la etiqueta de icono agregas un atributo data con un indice por ejemplo edit y en tu función de eliminar obtiene el valor de la siguiente forma "e.target.dataset.id". Así te ahorra todo ese rollo de llegar hasta la etiqueta y me parece que tiene mas exactitud a la hora de eliminar o seleccionar el registro que se desea... Un saludo desde Colombia
Llevo un año aprendiendo mediante internet-free y tu, sin dudas eres el mejor. Si haces un tutorial de Typescript la pegarias del techo (: no desaparezcas
Realmente bueno.. ya llevo varios videos de este curso.. y francamente es bueno... por donde lo mires... es usted talentoso Ignacio, al menos en lo que respecta a hacer un curso en youtube... felicidades... y realmente agradecido... siga adelante...
para lo del minuto 44:50 , es correcto lo que dice la mayoria el e.path ya no es un estandar , mi solucion fue en el navegador Firefox Developer Edition y funciona perfectamente : if (e.target.innerHTML === 'done' || e.target.innerHTML === 'delete') { console.log(e.originalTarget.offsetParent.childNodes[1].innerHTML); }
Felicitaciones Ignacio y muchas gracias por estos tutoriales, me han sido de gran ayuda. Me paso que al crear la aplicacion y probandola en firefox me daba error al llamar el "event.path", leyendo encontré que no es un estandar para los navegadores, y que se puede utilizar el metodo "event.composedPath()", y funciona exactamente igual con chrone y firefox. Nota: no probe con otros navegadores, si alguien lo intenta por favor comente como le va.
Buenas Tambien podes subir por la jerarquia de nodos hacia el div alert y bajar hasta la etiqueta , asi: let texto = e.target.parentNode.parentNode.childNodes[1].innerText; que es parte del standar DOM, asi que funciona en todos los navegadores.
Felicitaciones Ignacio muy buen video. Sabes podías haber utilizado la función TRIM() para cortar los espacios a los lados...pero bueno de la forma en que lo hiciste también funciona...!!!
lo mismo pensé cuando estaba viendo el video, con solo utilizar e.target.innerHTML.trim() te evitas tener que andar modificando el código dentro del literal
Si, tambien use el trim(), ya que las comillas literales las conoci en estos dias y estan buenisimas para poder visualizar la estructura del html, cuando juntas todo sin espacios (como hacia antes) era muy complicado leerlo posteriormente. Excelentes los tutoriales, me los estoy devorando! y aprendiendo mucho! mil gracias Ignacio!
Excelente tutorial Ignacio!, gracias me fue muy util este miniCRUD voy hacer mencion para los que esten siguiendo este cursito que el e.path del DOM no es un standard y no lo podran encontrar en Firefox en su lugar podran encontrar: composedPath y para solucionar la compatibilidad entre navegadores pues simplemente pueden anteponer con un if (e.path), y/o if(composedPath) y agregan la logica que quieran! SALUDOS!
Excelente vídeo, de verdad me quito el sombrero, si se encontrase mas contenido así en youtube sería mucho mas fácil dar los primeros pasos en el desarrollo web.
Hola a todos, creo que lo unico que hay que cuidar con querySelector son con las versiones de explradores que puedan visitar tu pagina, ya que pueden tener versiones viejas de javaScript y no va a funcionar en ellos. Saludos. Excelente profesor, estos milenials, por que son tan buenos en esto!!!
Aprendí muchísimo!!! Una sugerencia! Hice esto para el innerHTML de cada actividad para ahorrarme el if else let customStatus item.estado === false ? customStatus = 'danger' : customStatus = 'success' Abrazo!!
Wow!, muchisimas gracias, me puse en una hora a ver y hacer la practica, no copiando sino pensando y pf, aprendí un montón, muchisisisisisisimas gracias :D!
Buen video, espero sigas subiendo este tipo de material donde hablas y practicas con javascript puro sin frameworks ni librerias, donde el trabajo se realiza con codigo puro y duro, asi es como realmente se aprende a programar, por otra parte hay un tema de los SPA con Ajax a ver si te das un tiempito sobre ello o para realizar el mecanismo de un eficiente y real preloader de una pagina web o de imagenes con Preload y Prefetch, en forma didactica como acostumbras, desde a gracias por todo.
Ufff que video tan bueno, aprendí demasiado, has que repasar mucho y también leer demasiado para que queden muchas cosas enn claro. una duda que tengo es: tambien se puede crear las actividades por medio de clases?
saludos, antes que nada el video este super bueno gracias de verdad, queria decirle que la logica que usas en la app tienen un problema me explico: si ingresas 3 actividades con el mismo nombre CORRER por ejemplo si quiero eliminar la ultima actividad que ingrese la que se va a eliminar es la primara ya que cuando el recorra el arreglo en la primera posición del arreglo encontrara el nombre de la actividad y la eliminara pero no esta bien porque la que el tiene que eliminar es la tercera, eso pasa porque al hacer la comparacion en el arreglo comparamos los nombres de las actividades, lo correctos es que se comparen con un valor unico lo que en Base de datos se llama Primary Key
Solución: Agregar un campo 'id' a la estructura del array, 'id' contendrá un valor correlativo que también se almacenará en el atributo 'id' de cada uno de los elementos 'i', de esa forma se recupera el valor del atrributo 'id' del elemento 'i' y se localiza en el campo 'id' del array, tanto para eliminar como para editar. var lastIndex = 0; //correlativo global arrayActividades = [ { 'id': '0', 'actividad': 'correr', 'estado': 'eliminado'}, { 'id': '1', 'actividad': 'nadar', 'estado':' eliminado'} ]; done delete
Gracias hermano, he aprendido más contigo que con los maestros de la escuela, oye en algún momento vas a hacer el CRUD con acceso a la base de datos mysql? me quedé esperandolo ya que en uno de tus videos me parece que lo mencionaste y busqué en todos tus videos y no lo encontré, gracias y ojalá puedas leer mi comentario, saludos y sigue así, eres un crack. El próximo mes me inscribo al premium de bootstrap, saludos
hola, muy buen video, me suscribi, TIPS: en el navegador firefox developer me costo encontrar el e.path, pero pero pero explorando me sirvio en console: e.originalTarget.parentElement.offsetParent.childNodes[ ].innerHtml, les dejo esa anotacion para que los que usen firefox en vez de chrome
He usado localstorage y es súper útil y creo que llegara a remplazar las coockies, esta genial el video hermano ,como advertencia si hacen un app para clientes que usan browser viejos usen coockies de preferencia ,porque no soportan él api de localstorage solos los browser modernos soporta la api
Como dices, no todos los navegadores lo soportan, por lo tanto, tambien puede fallar en muchos sistemas android. Una funcion sencilla para saber si localstorage esta soportado por el navegador es la siguiente if(typeof(Storage)!=="undefined"){ //Soporta localstorage }else{ //No soporta localstorage } o sea... si es distinto de UNDEFINED esta soportado ;-)
Muchas gracias por el video, tengo una duda. Cuando te metes en la consola para ubicar con el mouse el texto caminar en el inner HTML, yo entré al children y podia ver también la "b" y el inner HTML, ¿Cómo sabes o supiste que funcionaría utilizando childNodes?
Hola Ignacio, cómo siempre excelente contenido. Pero creo que hay algo se tea ha pasado o no hemos llegado ahí. Las Promesas, creo que es un tema muy interesante, he visto en otros lugares, pero la verdad es que, tú eres único en explicar. Excelente cómo siempre.
el tema de la detección de la condición literal (e.target.innerHTML === done) eliminando los espacios en blanco también se podia solucionar usando una condicional menos estricta (== en lugar de ===)
Excelente tutorial, solamente que tengo un problema, al agregar una actividad en la lista de actividades en el document, se me agregan nuevamente pero sumado al numero de otras actividades, es decir que en el localstorage tengo 4 actividades ("correr, saltar, nadar, pesas"). Pero si agrego otra como ("descansar") se me agrega pero nuevamente se agregan las 4 anteriores, es decir en ves de tener 5 actividades tengo 9, este problema se arregla si recargo la pagina, como lo arreglo si no la recargo?
Buenas, muchas gracias por el video, vengo con una consulta,. El boton de borrar, no me funciona en Firefox, por lo que vi la parte donde usamos "console.log(e)" no funciona igual en firefox, ya que cuando hago lo mismo, no me aparece "Path" en la lista. El error en consola dice: Uncaught TypeError: e.path is undefined file:///C:/Users/Katu/Desktop/Momocca-Coffee/estilos/index.js:125 EventListener.handleEvent* file:///C:/Users/Katu/Desktop/Momocca-Coffee/estilos/index.js:121
Para no repetir todo el trozo de Html Mejor usar una variable para el color segun el estado for (elem of arrayActividades) { let tipoAlerta = "alert-danger"; if (elem.estado) { tipoAlerta = "alert-success"; } listatareas.innerHTML += ` accessibility ${elem.actividad} - ${elem.estado} done delete ` }
Hola Ignacio, tengo un problemilla. Trato de usar una imagen como btn para borrar (que hice yo) y no me funciona el momento en donde tengo que borrar el LocalStorage :S, ayudaaaa.
Hola amigo, muchas gracias por todo lo que enseñas. Oye una pregunta, a mi no me funciona poner el float-left mr-2 dentro de la etiqueta i al momento de alinear el equino con el texto, me podrias decir cual es la razon? muchas gracias.
Excelente vídeo, pude entender en profundidad el tema. Sólo que en mi proyecto no uso innerHtml y me falta la parte de pintar. Si alguien me puede ayudar le agradezco
Hola Ignacio, no logro interpretar este error que me bota consola app.js:37 Uncaught TypeError: arrayActividades.foreach is not a function at HTMLDocument.PintarDB (app.js:37) PintarDB @ app.js:37 Me ayudas? yo veo todo igual
el find index no me gusta por que hace el recorrido, cuando podemos poner tarjet a la alerta que tenga el index, cuando preciones la alerta, ya sabes que index es sin recorrerlo.
SOS ignacio Necesito ayuda con este error, no logro descifrarlo: Uncaught TypeError: Cannot set property 'estado' of undefined at EditarDB (app.js:88) at HTMLDivElement. (app.js:116) Y otra cosa que me pasa, al eliminar siempre me borra la primera actividad, o sea si tengo actividad 1 = correr y actividad 2 = trotar al darle click en eliminar trotar, me borra correr y me desplaza trotar como actividad 1
tengo un problema en el minuto 40:33 verás yo no uso MATERIALIZE SINO FONT-AWSOME PERO CUANDO PINTO CUALQUIERA DE LOS ICONOS EN LA CONSOLA ME TRAE EL CORRE O NADAR PERO EL NOMBRE DEL ICONO LO TRAE VACIO COMO SI EL ICONO NO TIENE NOMBRE
A que se debe estos errores: - Uncaught TypeError: Cannot read property 'addEventListener' of null - Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLDocument.PintarDB
Errores en Navegadores Como Solucionarlo? En Firefox => e.path is undefined En Chrome => Cannot set property 'estado' of undefined at EditarDB (app.js:67) at HTMLDivElement. (app.js:94) EditarDB @ app.js:67 (anonymous) @ app.js:94
Muy bueno el tutorial, me suscribo!!! Hay un pequeño bug, cuando se actualiza el navegador el arrayActividades vuelve a estar vacio y cuando seteamos el localStorage va colocar un array desde 0, alguien soluciono este pequeñoo bug?? Saludos!!!
Se podría crear una funcion que verifique despues que cargue la página algo asi: const verificarArray = () => { if (!localStorage.getItem('localTareas')) { listaTareas = []; } else { listaTareas = JSON.parse(localStorage.getItem('localTareas')); } return listaTareas; } Me respondo solo pero me funcionó
A Y U D A!! Tengo el siguiente error y no se elimina el contenido del id="listaActividades" que esta en el html ---> Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLDocument.PintarDB listaActividadesUI.innerHTML = ' '; { listaActividadesUI.innerHTML = ''; }
![CRUD con LocalStorage y Vanilla Javascript [Tutorial en Español]](/img/logo.svg){kind=logo}
