Aplicación de Productos con Javascript Orientado a Objetos

¡Gracias a Kite por patrocinar esta sección del vídeo! Kite es un asistente de autocompletado gratuito con tecnología de IA que te ayudará a codificar de forma más rápida e inteligente:
Haz clic aquí ➞ bit.ly/3dPzXHe ➞ para saber más.
Aprende a crear una aplicación del frontend, completamente desde cero, utilizando Javascript y el paradigma de programación Orientado a Objetos.
Ademas utilizaremos Bootstrap 4 para diseñar la interfaz de usuario, y las ultimas versiones de Javascript Ecmascript utilizando Clases, metodos, constantes y más.
💻 Código de este proyecto:
github.com/Faz...
🛍 Descuentos:
NordVPN ➞ 68% de descuento en plan de 2 años ➞ Código: fazt
Hostinger ➞ 7% de descuento en cualquier compra ➞Código: FAZT
👨‍💻 ¿Qué servicios utilizo?
Brave ➞ brave.com/faz053
NordVPN ➞ bit.ly/2Te7p0J
Hostinger ➞ www.hostg.xyz/...
Cloudinary ➞ bit.ly/3ohNlJ7
SiteGround ➞ bit.ly/31u9ZEk
Namecheap ➞ bit.ly/3kne9W8
🖥️ Recursos:
Deno, Un nuevo entorno de Javascript ➞ • ¿Qué es Deno ? Un nuev...
Javascript para principiantes ➞ • Curso Javascript para ...
MERN STACK & Typescript ➞ • MERN STACK & Typescrip...
Curso de NodeJS ➞ • Nodejs Curso Desde Cer...
Curso de Git ➞ • Git y Github | Curso P...
🌐 Redes:
Fazt Web ➞ www.faztweb.com/
Facebook ➞ / fazttech
Instagram ➞ / fazttech
Twitter ➞ / fazttech
Telegram ➞ t.me/fazttech
Twitch ➞ / fazttech
Slack ➞ bit.ly/3dPqCPT
Discord ➞ / discord
Blog ➞ blog.faztweb.com
📩 Contacto:
➞ [e-mail]
➞ [e-mail]
#javascript #programacion #desarrollo-web

[@El_Bartto]

es muy importante que como programadores se comparta la informacion y que muera de una vez esa mentalidad de " a mi me costo mucho aprender esto, a ti tambien te debe costar mas que yo", gracias.

[@carlosvaldemarsoria941]

lamentablemente eso va a existir siempre, nadie te regala nada; menos en un entorno laboral donde la gente tiene que hacer otras cosas.

[@danielesquivel3155]

:c

[@luis-of4cd]

@Mauricio Ángel Morales no es mi conocimiento , esfuerzo y ganancia es mi conocimiento , mi esfuerzo y nuestra ganancia.

[@tello9504]

Carlos Valdemar Soria los gringos comparten todo jajaja

[@elTripaSeca]

a mi me toco, escuchar ese comentario pendejo pero entre puros de la vieja escuela donde gente de 40 años o mas

[@cristhianaguilarverduguez1698]

Este si que es master aprendi tanto en una hora que en un semestre en el instituto!!!!!!!! El mejor la verdad Gracias por compartir tus conocimientos!!

[@AndreaGomezJimenez]

X2 satisfecha.

[@javierjimenez3627]

@@AndreaGomezJimenez como te ha ido durante ese año?

[@AndreaGomezJimenez]

@@javierjimenez3627 hola?

[@javierjimenez3627]

@@AndreaGomezJimenez pues hola ☺️

[@RuanoProductions]

A ver si prestas más atención en clases xd De todas formas aquí resume muchas cosas, no profundiza, por eso mismo demoras más en clases

[@gbarajas2971]

He comprado cursos caros, platzi, codigo facilito de todo y pensar que tu enseñas mejor y gratis. de todo corazon un fuerte abrazo. haces que a uno le de ganas de ser programador.

[@rhodgsona]

De los videos más productivos que he encontrado para practicar. Mil gracias.

[@mariacristinaulloagarrido1224]

Cada minuto es una ganancia en el aprendizaje...que bien explicas. Muchas gracias, así da gusto aprender!

[@andresdecba]

Genio, maestro ! Muchas gracias en serio : ) Compré cursos en Udemi pero me la paso viendo los vídeos de Fazt acá xD

[@luismelgarejo2400]

Jajaja no eres el único xd

[@andymarinosrodriguez2170]

Andres Pugliese de victor robles? :v

[@gelintonx]

@@andymarinosrodriguez2170 si

[@jorgemiguelvacamendoza5584]

Qué tal son los cursos de Víctor Robles?

[@AlexGalo0]

@@andymarinosrodriguez2170 JAJAJAJAJA YO LITERAL, compre uno de Víctor Robles (El Full Máster de Javascript, re simple el curso) y termine conociendo a Fazt por eso

[@AlejandroGonzalez-wc5cf]

Estaría muy padre que enseñes a realizar mas ejercicios como este y que cada ves sean mas complejos

[@johnherrera5913]

Master! Realmente te felicito por estos magníficos vídeos, muy bien explicados. Es realmente difícil encontrar en youtube alguien que suba vídeos de esta calida

[@RafaelRodriguez-bw9tq]

como siempre, gracias por compartir conocimientos de distintos ámbitos, se agradece tanto para aprender nuevas cosas, repasar conocimientos o ver como otros programadores con experiencia escriben y organizan su código. Un saludo!!

[@nocmeocurre6833]

NADIE: ABSOLUTAMENTE NADIE: FAZT: "AHORA YA NO AGREGAREMOS UN "APPLE" SI NO POR EJEMPLO QUE SEA UNA MANZANA (*ESCRIBE ORANGE*)" jdsajsd buen video FAZT !!! dedito arriba :D

[@Sol_Y_Sk8]

jajajjajaja pense lo mismo cuando lo puso

[@joelventura76]

PA QUE :S :S

[@jotap4363]

39:27 ajja

[@adrianbanuelas8786]

Excelente vídeo, he aclarado muchas dudas, aunque intenté hacerlo completamente con clases empezando con Program como en C# y me gustó bastante el resultado

[@ariagnaalbuerne9890]

Son los tutoriales más claros que he visto! De hecho tus videos son siempre mi punto de partida y en cada tema no pueden faltar ! He aprendido mucho! Agradecida también!

Cada dia, haces la vida muchos mejor, enseñando programacion de esta forma tan sencillas, Excelente y muchas felicidades por este gran proyecto que llevas acabo de enseñar a programar de forma tan sensilla. Gracias.

[@victoria-exito]

Hola!! Tienes un canal SUPER COOOOOL!! No sé por dónde empezar! :D Por dónde me recomiendas que empiece? 1) Programar? Cuál-es lenguaje-s? 2)Desarrollador Web?Cuál-es lenguaje-s? 3)Con cuál puedo ofrecer servicios a futuros clientes más rápido? 4) Programador Back-end 5) Programador Front-end 6)Programador Fullstack .....Nunca he programado orientado a objeto :'(.....Gracias por tu VALIOSÍSIMO CONSEJO!

[@jesusgregoriosola5871]

Muy bien amigo. Sin duda eres uno de los mejores programadores. Gracias y saludos.

[@blackstrato2216]

Fazt... el mejor profesor que he encontrado en la web... Gracias!

[@lujot]

Amigo muchas felicidades, una vez más me he quedado sorprendido, gracias por compartir tus conocimientos.

[@yousseflehchiki1662]

Me gusta que subas cursos prácticos. Desgraciadamente la mayoria de cursos que hay en youtube son solo teoria y a la hora de practicar no se realmente que hacer para aplicar lo aprendido.

[@ivangonzalez823]

Gracias a este video he aprendido objetos en js.

[@10tronic]

Muchas gracias! Así se aprende, haciendo proyectos no importa que tan sencillo pueda parecer!

[@alfonsoluis1994]

Excelente curso de POO... Todo... todo muy bien clarito. ¡muchas gracias!

[@mauro21523]

Gracias infinitas Bro tienes una gran calidad humana y técnica, tenía un microproyecto y este ha sido genial para perfeccionar mi programa, algún day te lo compensaré Sr. Fazt de Nazareth.

[@nicolaxcs]

Genial Fazt, sería aún mejor si la sintaxis fuera 100% ES6. Merecido Like.

[@Jmontero1804]

Gracias Fazt , por favor sube mas contenido, tu canal es excelente!

[@isrraelortizc]

Mis respetos! Excelente vídeo! La verdad no me gustaba javascript pero luego de ver este vídeo me gusto full! Mil gracias por el apoyo y tus conocimientos!

[@maximilianocba07]

Sos un genio hermano.. vengo de c# y no vi nada de JavaScript y entendi bastante bien todo

[@yohanhumbertorijoastacio6514]

Muchas gracias, por tu aporte. El otro día quería hacer algo parecido, pero no sabia bien como crear los elementos HTML desde JavaScript, la verdad me sirvió mucho.

[@lazarocordies4531]

Lo mejor del Internet, sigue asi compa compartiendo el conocimiento, saludos desde Cuba, Gracias.

[@AlejoEduardoYT]

12:45 cuando el buen Fazt se tienta :) !!! Gracias fazt por compartir tu conocimiento

[@unedocencia1069]

Gran video, en one me puse al tanto. sólo me perdí (ya averigüé) eso de... 33:35 backtick, grave accent, backquote, backgrave, template literals, alt + 96 alt + 0180

[@arielcastillo7925]

Fua tremendo !! muchas gracias por compartir tu conocimiento, voy a repasar y practicar todo lo de este video!! muchisimos saludos

[@jesuscaicedo163]

Excelente!! Sería genial que hagas otro vídeo integrando está aplicación con una api rest y base de datos

[@segtian1133]

Aprendí e hice varios apuntes, gracias por subir este vídeo me ayudo mucho para entender varias cosas la verdad me sentía perdido en Javascript que solo sabia lo básico pero gracias a ti pude entenderlo mucho mejor(lo vi desde tu pagina xd)

[@estebansolis1593]

Excelente video bro. Hace poco estaba viendo tus vídeos de react.js y la verdad he aprendido mucho

[@dollarzin]

Sem dúvida um dos melhores videos que tem para aprender Javascript. Fiquei um dia inteiro buscando algo parecido e nada. Praticamente um curso inteiro em apenas uma aula. Valeu! Ganhou mais um inscrito sem sombra de dúvdas!

[@educaciondiy8881]

muy buena la info, seria bueno un segundo video contnuando este donde enseñes a guardar esta info en una BD y tambien llamar datos, ya que cerrando el explorer se borra todo

[@andymarinosrodriguez2170]

Educación & DIY localstorage

[@nogueraej]

Explicado de forma simple y muy clara, en una sola palabra Excelente.

[@dexter117]

Creo que todos tus suscriptores estamos de acuerdo que sigas trayendo contenido como este al canal!!!!!!!!!!! Me suscribiría 1000 veces si se pudiera, qué buen contenido

[@anitacanalis5382]

Muchas gracias por tus videos!! Excelente como explicás!!! Más claro imposible. Nueva suscriptora!

[@kenyajaquelineaviles9011]

Hermano eres el mejor html CSS javascrip

[@oscarclaros2225]

Que buen ejemplo, aprendí mucho. Muchas gracias Fazt

[@gortega882]

Gracias fazt, me encantan tus tutoriales y la forma en que explicas los ejercicios, sin duda estos si son creadores de contenido que necesito ver siempre en tendencias

[@EmOJaXuElPuNk]

MUCHAS GRACIAS POR TUS CONOCIMIENTOS CRACK, YA QUE ALGUNOS NO TENEMOS LA ECONOMIA PARA LLEVAR CURSOS CAROS PERO SI TENEMOS LA MOTIVACION

[@gplazass]

gracias y felicitaciones por la gran labor de enseñar, compartir el conocimiento y hacer de este mundo mejor para todos.

[@danimart69]

Muy buena logica. Quisiera tener maestros asi en el instituto. Gracias por la explicacion. 🤩🤩

[@Magistrado1914]

Excelente mini curso. Visto en 05/09/2019

[@ctrljean3467]

Si estos son los cursos gratis, abiertos a toda clase de público de fazt y son brutales , no me imagino entonces los de pago.

[@euribiadesbarrios1140]

Excelente tus videos como colocaste los comentarios automaticos GRacias por tus conocimientos

[@joserphandjaba]

Muchas gracias! Aprendí mucho con este video tutorial.

[@2014informatica]

Gracias por compartir tus conocimientos, tienes un suscriptor más, era exactamente lo que estaba buscando.👌

[@jesusrodriguez-vx5kn]

Excelente tutorial. Gracias por ser tan claro y conciso en la capacitación!!!

[@sebastianolivera3124]

Muy buenos ejemplos, de los mejores canales para entender!!

[@Jdomcanal_tutoriales]

Solo como aporte cuando trabajen la parte de crear elementos html desde el js, pueden cambiar la sintaxis de vs code a html para optimizar segundos. 🙂

[@Jblanco1989]

Interesante dato

[@jomaguz]

tambien hay una extensión html-in-template-string

[@guskit]

Estupendo mi loco, una vez mas felicitaciones, tienes todo lo que se requiere para ser un ink master.

[@moisessolano5855]

Siempre veo tus tutoriales recibo grandes aportes de ellos gracias...

[@msngabi95]

Excelente video! Aprendí un montón! Muchas gracias!!

[@karloojeda4811]

me enamoré de JS

[@bebo8889]

Te enamoras xq nunca terminas de conocerla y siempre te sorprende 😁👍

[@seguridadg-mail4442]

yo aprendi primero python y ahora con JS siento que es lo mismo pero mas complicado. me cuesta entender la sintaxis

[@nico6346]

Seguridad G-Mail vengo exactamente del mismo camino

[@seguridadg-mail4442]

@@nico6346 creo que fuera sido mejor aprender primero JS y luego Python

[@nico6346]

@@seguridadg-mail4442 por que? yo al comienzo vi que phyton es mucho mas facil en sintaxis y breve, ahora estoy algo trabado , pero me dijeron que JS era mas dificil, cuentame tu experiencia

[@oliveira1820]

Muchas gracias por este proyecto. Hay un grande aprendizaje de JavaScript aqui. :D

[@BYwIIK2]

Excelente vídeo. Por mas videos de crear un proyecto orientado a objetos, pero sin ningún framework o herramienta como webpack que sea puro ojalá puedas realizarlos, saludos desde Colombia

[@anthonycreativo6226]

Me a gustado muchísimo como explicas todo, ya he visto dos vídeos tuyos de javascript y me encantaron. pero estaba buscando otros y no encontré pero estaba tratando de ver una manera de que con este misma aplicacion para web editarla y ponerle que todos los productos de la lista se actualicen con una cantidad que uno ponga en un recuadro que se pueda multiplicar todos los datos de los price los precios.... haz una continuación porfavoooooor se te quiere bro

[@chimboterex]

gracias , aprendiendo muchas bendiciones por sus conocimientos , soy novato pero ganas de aprender

[@cristianjohanoterooviedo4881]

Aprendi mas en este video que en el bootcamp!!! que crack!!!

[@FaztTech]

Un gusto que te resultara util Cristian. Exitos :)

[@gustavoechenique7441]

Excelente vídeo, como todos los que subes. Lo que le agregaría es cómo hacer que los productos de la lista se muevan hacia arriba al remover alguno, y el almacenamiento en una base de datos.

[@marianogarmendia]

Pense lo mismo, estaria bueno intentar hacerlo, tal vez volviendo a renderizar el DOM llamando nuevamente a addProduct luego de borrar , para eso habria que ir guardando los productos en un arreglo global antes de agregarlos al DOM para enviarlo como parámetro .. se me ocurre

[@Mistik4l]

Mañana tengo una entrevista de trabajo para una empresa en Guadalajara, tenia 2 años sin desarrollar y con esto "aprendí" más que nunca jaja, a ver como nos va.

[@FaztTech]

Excelente, Mucha suerte Elías con tu entrevista

[@4927080avila]

Muy muy bueno...sin misterios...y muy didactico

[@ljbritocarrizo7485]

Wow fazt tu contenido es realmente de alto nivel, gracias por lo que haces!!!

[@maximilianoantonioechevarr4053]

Muchas gracias por tomarte el tiempo de hacer este ejercicio! Sos un crack! Saludos desde Argentina!

[@kodosensei]

Simplemente una maravilla lo bien que enseñas!!!

[@danielgonzalez-mt2ke]

En la parte donde eliminas el alert, ya tienes la referencia al éste, no necesitas hacer otro selector, con app.delete() es suficiente

[@cesaraugustopachecoariza4528]

Muchas gracias por este video Fazt

[@andres-mora-vanegas]

Muy buen tutorial, se aplica la programación orientada a objetos correctamente, muchas gracias

[@luisguzman9743]

Como siempre genial, Fazt. Aprend[i un mont[on de cosas. Por cierto, en el minuto 40:10 podríamos reiniciar el formulario dentro del evento del objeto form con this.reset(); creo que es mas practico. Un abrazo

[@davidtrokten]

hola Fazt code, podrias hacer mas cursos de este estilo, porfavor, me parece idoneo, ya que conecta los principios de la POO en el el desarrollo web.

[@cecisg6643]

Excelente vídeo gracias por compartir conocimientos de mucha importancia. Y siga compartiendo más sus conocimientos valiosos es de mucha ayuda.

[@oscarxaviervaroncruz5276]

Muy bien explicado felicitaciones.

[@gustavojuarez2763]

Excelente super claro y practico.. Gracias

Muchas gracias, por el aplicativo. Ha sido un éxito y he aprendido bastante. Saludos.

[@eduardorivas6959]

Genial! Muchas gracias.

[@vanniaerp]

Pues yo recomiendo el capitulo de Objetos con Sencha Extjs.. para iniciar la version 4.2. Un ejemplo hermoso de como implementar clases en JScript

[@andresxxx663]

Enseñas muy bien, sigue así esperamos más vídeos.

[@AlejandroGuerrero]

Vídeo BRUTAL! GRACIAS! Saludos desde Madrid!

[@luchodomizi]

Una info importante es que Javascript no posee classes como existen en Java por ejemplo, son solamente una vista amigable de funciones. De hecho si consologueamos el typeof class nos dice que es una función.

[@lacaverna9151]

gran clase como siempre!! mil gracias por el conocimiento compartido, tienes una manera muy clara de explicar las cosas.

[@dofer50]

Eres un duro bro, sigue asi... todo el apoyo y exitos !!! aprendo demasiado contigo, gracias

[@alejandroaguilar9581]

Buen video, solo una observación, el settimeout no es un método de javascript, es una API del navegador

[@josuediaz5604]

Min 27:57, Tenia 3 horas googleando porque no se me quedaban los mensajes de la consola y cuando decidi seguir colocandole un alert luego de console.log para que no borre los mensajes tan rapido, dices lo de "Perserve log" jaja. Mil gracias

[@312am3]

para quien lo vea del enero de 2022 en adelante, en el minuto 14:09, si ven que el botón no se ajusta como en el ejemplo, prueben creando un div unico para el botón, a este div le ponen esta clase class="d-grid gap-2" , y adentro ponen el input con esta clase, class="btn btn-primary", con esto deberia solucionarse, al parecer la forma en como lo hace en el video, dejo de funcionar hace mucho :s

[@e.s.4573]

LE FALTA EL SAVEEEE :(((((((((((

[@NatTecnologiaEFinancas]

Excelente!!!!! Fantástico!!!

[@armakaisen]

Después de muchos intentos para corregir un mensaje de error (Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.) en la sentencia - const app = document.querySelector('#App'); le saqué el numeral(#) y funcionó. Es solo para tenerlo en cuenta, solo que no se porque ocurre esto...Gracias Fast, buen tuto

[@jimenalucero3121]

GRACIAS, muy buen video.

[@youtubeuser5874]

Aprendi mucho con tu video y aun no lo termino :D gracias por compartir, que tengas muchos exitos!! y me suscribo.

[@yefweb3848]

Excelente Fazt, sencillo pero sustancioso :) Gracias Crack!

[@enriquesalazar2855]

Gracias hermano.

[@dariogregoriotejedasantanadgts]

gracias de verdad muy buen trabajo gracias por compartirlo

[@gatowebdeveloper]

explicas muy bien . gracias por todo :)

[@holmancun]

Excelente, muchas gracias.

[@josequenta7198]

Gracias crack! Acabo de replicarlo

[@astrixwr5662]

Como es posible que el método Fazt* sea el método que nunca pensé que seria el que entendiera como si de un rompecabezas armandose segundo por segundo fuera Gracias bro!! ⚡

[@luis96xd]

¡Genial video Fazt, muy bien explicado y quedó muy bonito! Ahorita estoy haciendo algo similar, pero al borrar el elemento usando e.target en el contenedor la función deleteProduct se me ejecuta dos veces Por ejemplo, dos productos, 1 click en un delete y se ejecuta dos veces Provocándome un error ¿Que puedo hacer? Ya que si quiero al borrar el primer producto, debe borrarse el ítem 1 de una lista y no el ultimo, y menos todos

[@Apio]

SUPER GRACIAS