Javascript Quiz con Programacion Orientada a Objetos, Ejemplo Práctico

Aprende a crear una aplicacion web de encuestas usando Javascript y el paradigma de programación orientado a objetos. en este ejemplo vamos a crear una aplicacion simple que nos permita poner en práctica conceptos de POO como las clases, los contructores, las instancias de objetos y como se relacionan los objetos en Javascript.
Código del ejemplo práctico:
github.com/Faz...
Videos Recomendados:
Curso de React Native ➜ • React Native, Curso pa...
React Native, Nodejs y MySQL ➜ • React Native, Node & M...
Conda (Anaconda Python) ➜ • Anaconda - Python Pack...
Tu Primer sitio en Python ➜ • Tu Primer Página Web c...
Discord Python bot ➜ • Python Discord Bot, co...
Curso de Python ➜ • Curso Python para Prin...
PipEnv ➜ • Pipenv | Entornos virt...
Flask & React ➜ • Python Flask, React Ho...
Python Flask & MySQL ➜ • Python Flask & MySQL R...
🌐 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
#javascript #oop #quiz

[@jessi2399]

Aprendo más con este genio que en mi clase de la uni 😮

[@emersonVeronez74]

JavaScript és lo máximo para desarrollo web. Excelente vídeo explicativo, mis respeto. Gracias.. Fazt⛷🍃

[@jherodru]

"tildes y esas cosas que le gustan a ustedes" jejejejej buen tuto fazt

[@FaztCode]

jajaj solo lo digo de broma, es que a veces codeo algo y como estoy intentado explicar siempre no le presto atención a esos detalles de tildes y errores tipográficos. pero si son importantes y hay que aprender a usarlas. :) kzbin.info/www/bejne/oGLPmWOElqxqeqc

[@chydrwhtht]

Ey muchas gracias como siempre por el excelente contenido brother, un saludo desde Colombia, aunque conozco y manejo ambos conceptos por separado desde siempre, y en el trabajo los he juntado por mi cuenta, me encanta ver este tipo de contenido que nunca sobra para actualizarse y ver que se puede mejorar en el código y las buenas prácticas del paradigma aplicado en tan poderoso lenguaje, literal me siento como el meme de Patricio a las 3am, buscando el momento perfecto para uno de tus tutoriales, alias mi "cangreburger". Gracias Fazt =)

[@ivorguzman1736]

Como siempre Fazt explicado con claridad, con ese don que tienes de poder explicar las cosas en una forma tan clara y sencilla; Con temas de alto Interés Profesional.

[@carlosbritto32]

2 dias me tomo completar este curso y entenderlo, muy bien explicado y muy bueno, pero no dejo de sentirme mal cuando dice al final que este es un ejemplo sencillo, porque a mi me costo un poco entenderlo

[@FaztCode]

No te preocupes. Es porque aún quizás esté conociendo la orientación a objetos. Muy pronto voy a publicar un curso de POO y con eso aclaras muchas dudas. Felicidades por terminarlo. Éxitos Carlos.

[@carlosbritto32]

@@FaztCode gracias por tu respuesta fazt, estaré pendiente al nuevo curso de POO para seguir aprendiendo 🙏🏼

[@enoc_tech]

Tremendo tutorial, tengo mas de un año siguiendo tu canal y recién empecé aprender programación... Este tutorial me vino como anillo al dedo, conciso y potente. Me fascinó ver como resuelves los problemas que van surgiendo... Voy seguir viendo y practicando con tus videos, tu contenido es oro. Mil gracias😁😄

[@typecode6269]

Fazt mil gracias hermano!!! Justo mañana tengo mi primera entrevista de MERN Stack y me piden POO y estoy seguro de que tu video me va a ayudar muchísimo, saludos y un abrazo!!!

[@FaztCode]

Excelente, felicidades por la entrevista. Muchos exitos

[@jeanpinto8864]

@@FaztCode estoy realizando el tutorial de la red social. Me esta saliendo un error en el 4:40:00. Me podrias ayudar con la solución?

[@RuisuAr]

Excelente Fazt, puedo entender mejor la programación orientada a objetos gracias a tus proyectos. Seria genial poder hacer un tutorial de TypeScript actualizado contigo. Saludos desde Colombia!!

[@DPM-TI--MatheusAnalistadesiste]

mejor prof en tecnologia el trabajo mucho bueno. una imaje belissima.

[@JuanCarlos-ox3dc]

Como siempre dictando cátedra con mucho profesionalismo y humildad. Like.

[@jhontobon4918]

Qué duro. Como explicas muy claro en serio

[@edwarddk9007]

debo admitir que me perdí en el minuto 42 del video, de ahí en adelante no entendí mucho, por que por lo general yo uso mas programación funcional en js, lo básico de poo si lo se como clases, instanciamientos, constructores, métodos, etc, este video me cae perfecto ya que me permite estudiar mas cosas que no sabia y como construir un proyecto basado en poo

[@johansebastianpuentespulid1401]

Muchas gracias fazt, me gustan mucho estos vídeos, yo soy de que los veía completos los de orientación objetos, gracias bro

[@FaztCode]

Pronto voy a crear mas ejemplos orientado a objetos y se viene un curso bastante extenso :)

[@johansebastianpuentespulid1401]

@@FaztCode me muero por verlo, alguna vez piensas sacar un curso en alguna plataforma?, Apuesto a que te iría excelente

[@florenciarusso3830]

Me parece genial el video, muchas gracias por compartirlo! Muy bien explicado para aprender a programar! Si quisiera agregarle un boton para jugar de vuelta qué código le podría agregar?

[@oscarclaros2225]

Muchas gracias crack por compartir tu experiencia y conocimiento.

[@andhyralac5084]

Grande Fazt!! Saludos desde Guatemala 🤟🏽

[@FaztCode]

Saludos Andy :)

[@alejoopez]

Me gusto mucho, seria bueno que al selecionar una respuesta salga un alerta de bueno o malo.

[@jonathanmeza4141]

12:50 js-poo 35:59 .map 40:48 Quiz 48:47 saber cuándo termina Quiz 49:48 botones 1:01:20 ejecutar respuesta

[@lindltaylor4093]

Hey coders mis respetos fazt

[@jeisonsalazar71]

Excelente explicación. Saludos desde Colombia

[@FaztCode]

Saludos Jeison

[@shmarte]

excelente video, solo que me gustaria que lo pudieras dividir por linea de tiempo para poder movernos con mayor fluidez, al ser un video tan largo. Pero muy bien me sirve para hacer un Quiz de verbos en Ingles

[@danest029]

Gran tutorial. Me ha sido de mucha ayuda. Gracias

[@MGTRN-tw5uq]

Muy buen tutorial. Gracias por el buen contenido.

[@dory55s]

Saludos, te admiro, eres el mejor desarrollador

[@joaquin4108]

Fazt, eres crack! gracias!

[@sofiainesschenone]

Excelente video, muchas gracias por la explicación, siempre tan clara!

[@EnvDeveloper]

MUY BUEN VIDEO!! me gustaria que explicaras una forma de como crear un boton q de la opcion finalizar para deje de ejecutar el programa, soy nuevo en este mundo de programacion

[@difusal]

😭 Aun no acabo el proyecto de fastify, hoy no se duerme gracias Fazt 🤠👍

[@FaztCode]

A ti :)

[@FelipeGordillo]

Gran vídeo, amigo 👍

[@FaztCode]

Gracias Felipe

[@diegoparraguez4817]

Hola Fazt Code, una pregunta, es posible agregar imagenes al arreglo de preguntas en data.js?

[@CarlosRobles-gy9cl]

Gracias por el tutorial eres lo mejor

[@MiguelDuffy]

Gracias por compartir!

[@ak_d__]

Muchas gracias por crear este contenido

[@FaztCode]

a ti por verlos :)

[@matitk]

Consulta, porque casi nadie utiliza las keyword get y set separada para los getters y setters en javascript?

[@playmambo9573]

¡¡GRACIAS!!!

[@jhonhenrybernalrodriguez2510]

asi me gusta, poco tiempo y claro. tienes uno con angular 11

[@FaztCode]

Aun no, pero buena idea voy a elaborar un quiiz con angular.

[@mauricioguevara8423]

Hola me encanto tu video, una pregunta, como podria agregarle un color rojo al boton cuando se presione la respuesta incorrecta y un color verde cuando se presione la correcta?

[@Melissa-lc6tb]

¿Pudiste averiguarlo?

[@mauricioguevara8423]

@@Melissa-lc6tb Si, me toco crear una funcion de respuesta con la condicional de si es correecta o incorrecta luego hacer un js con las preguntas si es false incorrecta y si es true lo contrario, y en el css hacer un .correcta, .correcta:hover { igual para incorrecto y ponerle solo el colorsito background rojo y verde

[@diegohurtado9527]

Excelente tutorial, felicidades, ¿còmo podría adaptarlo a multiusuario en una red local?

[@FaztCode]

Tendrias que crear codigo de Backend que permita registrar usuarios

[@diegohurtado9527]

@@FaztCode Tienes algún tutorial parecido a lo que busco?o me podrías recomendar algún tutorial?

[@gonzalosuarez2923]

Muchas gracias!!

[@quarkc13]

Excelente tutorial, Gracias.

[@Holri]

Master 😎

[@ambiorixcastillocina2730]

Gracias Capitan! Dime, y como no te vamos querer?

[@victormanuelmartinezalvara5939]

Aquí esperando el review de los teclados 😜

[@dofepro]

hHola fazt, me encanta ver tus tutoriales, eres muy bueno en eso, muchas gracias. yo cree un formulario en HTML y CSS , tiene la opcion de ingresar nombre, usuario y contraseña, y tiene una opcion de crear cuenta y la opcion de entrar. pero me gustaria agregarle javaescript para que esas opciones funcionen, me puedes ayudar? si quieres te envio el codigo para que lo veas. muchas gracias.

[@fabianmartinez7645]

hola, como hiciste para la parte del score?

[@digitaltechbusiness]

increible

[@zzxp1]

Al momento de pasar el array de Questions solo me agarra una y de valor undeffined para los atributos questios, choices y answer.

[@DevBytes07]

genial!

[@sebastian-cruz-gomez]

si puedo hacer la parte del botones con Template Strings pero tú no hace eso espero su respuesta saludos

[@hermesramirez2398]

Saludos Fazt! vengo de los tutos de como crear paginas y he aprendido muchísimo. Estoy iniciando en la poo y con este tuto he aprendido un montón de cosas, pero hay algo que no entiendo en el código, ¿Cuál es el sentido que tiene crear un modulo aparte?, por ejemplo: questions.js en el cual importo el arreglo que esta en el modulo data.js y luego con el método map creo instancias con de la clase Question en donde solo me queda un arreglo nuevo con las nuevas instancias, pero con el método correctAnswer(). Es decir, por que no pasarle de una vez el arreglo data.js a la clase Quiz ya que este igual manipula el propio índice del arreglo que paso en el constructor y de esta manera crear el método correctAnswer() dentro de la misma clase Quiz para entonces crear el método de esta forma correctAnswer(choice){ return choice === this.questions[this.indexQuestions].answer } y así solo crear una sola clase con los métodos necesarios para manipular el arreglo de objetos.

[@davidjacobs7966]

existen muchs soluciones para un mismo problema. Al final creo que puedes hacer todo en un mismo objeto pero la idea viene siendo dividirlos en piezas mas pequeñas. Como fatz dijo es un ejemplo sencillo. pero al trabajar con mas codigo ya seria muy confuso. mas objetos, classes, funciones especificas. ayudan a entender mejor el codigo. y si algo sale mal editamos ese objeto esa clase, esa función, esa pie cita de codigo.. si dañar las estructuras que estan bien.

[@videosfisica2620]

Hola cuando defines data dices "voy a crear una variable", pero lo declara como una constante. hay alguna razón en especial?

[@xtremefull]

Que extension usas para que te ayude con las abreviaciones? busqu'e los emmet pero ninguno funciona.

[@FaztCode]

Si te refieres a las importaciones, uso esta: marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets Y para el autocompletado uso Github copilot: copilot.github.com/

[@josearmandogonzalesquintan6518]

Saludos desde cibertec XD , fazt enséñame base de datos que mi profesora recomienda ver youtube a qué escuchen su clase 😢

[@FaztCode]

xD, esta bien, voy a preparar un curso del tema :)

[@josearmandogonzalesquintan6518]

Muy agradecido con el de arriba c: @@FaztCode , cierto cual es el tema del vs que usas :C ?

[@mateosuarezcaballero4533]

Hola, que extensiones usas? temas, logos...

[@FaztCode]

Hola Mateo en este video los muestro: kzbin.info/www/bejne/aZikomloerCerJo

[@diegocastellanos9596]

Brilliant !

[@AlejandroRL868]

5to, saludos desde cuba

[@cristhianjhlcom]

En algún momento realizaras una aplicaciones orientada a objetos pero con typescript? una interfaz. Buen video me gusto

[@zzxp1]

Que forma hay para que las preguntas se presenten de manera aleatoria?

[@FaztCode]

Basado en este ejemplo sencillo, lo que puedes hacer es crear una funcion que genere un numero aleatorio y que basado en ese numero seleccione un item de tu lista de preguntas, y que ese sea mostrado. Creo que es buena idea para añadirle eso a este ejemplo, voy a actualizarlo pronto

[@isaacperezpavia5435]

amigo como hago para que las preguntas sean aleatorias ???

[@eltontico888]

En la introducción a este tutorial, no decía que para hacerlo se requieren conocimientos de html y css, aun no veo o no he llegado a la parte donde se usen los objetos, ingrese al tutorial por eso, seria bueno aclarar esas cosas para que uno no se vea solo copiando y pegando código sin entender, va demasiado rápido y ni siquiera explica que cambio hace cada linea en la apariencia

[@fernandofernando9292]

❤

[@miguel900030]

Nunca viene mal un proyecto vanilla para desintoxicarse de tanto framework locochón

[@FaztCode]

Ademas, practicar en conceptos básicos ayuda a entender muchas partes que los frameworks hacen por nosotros :)

[@SanchayanPackiyanathan]

Amigo esta Genial, puedes hacer esto mismo con formato funcion ? ya que no es optimo usar class en javascript , seria bueno si puedes aclarar por que es mejor usar formato funcional no en class.

[@FaztCode]

buena idea, voy a elaborar un video de paradigma funcional vs orientado a objetos :)

[@SanchayanPackiyanathan]

@@FaztCode muchas gracias!!!

[@ligthsonenigma4281]

Pues mmm a mi parecer se hace mas fácil al orientarse a objetos porque cuando es funcional me parece mas desordenado y de difícil mantenimiento (si es que fuera un proyecto grande hecho sin frameworks). Hice un carrito de compras elaborando una clase Cart y fue sencillo. A mi parecer si javascript se enfoca cada vez mas a POO se volvería mucho mas elegante y de fácil mantenimiento

[@davidjacobs7966]

@@ligthsonenigma4281 Creo que es todo lo contrario la programacion funcional es mas facil de leer, si declaras bien las funciones con nombres adecuados se acerca mucho al lenguaje natural, el codigo si es mas largo que la poo, pero no tiene por que ser caotico, es mas facil organizarlo. Javascript ya esta enfocado a objetos.

[@Tri-lime_Spanish]

me das corazón?,es mi sueño desde que era niño

[@FaztCode]

Concedido :)

[@desarrolloweb999]

Buenas... Me sale este error "Failed to load resource: the server responded with a status of 404 (Not Found)" ¿Alguien sabe a se puede deber?

[@danielaragon4108]

Buenas, ¿puedo meter esto a mi proyecto de laravel? ¿como seria?

[@FaztCode]

Lo que podrias hacer con Laravel es crear una REST API, que es en si un servidor que responde tan solo los JSON y este frontend los recibiria haciendo peticiones HTTP con la API llamada fetch. de esta forma podrias reutilizar el frontend.

[@bakugameplays]

Cual es el color theme que usas?

[@FaztCode]

Este tema se llama Material Theme :)

[@bakugameplays]

@@FaztCode Gracias bro!

[@alternativafsproduccionesc6649]

Gracias por el tutorial y el código FAZT eres el mejor!. Descargué el código y estoy tratando de sustituir la palabra "Total score" por "Total puntos" en el archivo UI.js pero no se actualiza. Alquien sabe como hacerlo ?

[@michellyanquizuniga1103]

Haces streem en una plataforma para suscripción me avisass

[@FaztCode]

Este domingo a las 20hrs (GMT-5) hago stream en Twitch. Aviso por Twitter o Instagram. :)

[@jam0106]

30:00

[@bull3045]

hay algo que este chico no haga bien?

[@ozzco4385]

Lol hola

[@FaztCode]

Hola :)