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

Поделиться
HTML-код
  • Опубликовано: 15 дек 2024
  • НаукаНаука

Комментарии • 107

  • @emersonVeronez74
    @emersonVeronez74 3 года назад +3

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

  • @enoc_tech
    @enoc_tech 2 года назад

    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😁😄

  • @chydrwhtht
    @chydrwhtht 3 года назад +11

    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
    @ivorguzman1736 3 года назад +2

    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.

  • @jonathanmeza4141
    @jonathanmeza4141 2 года назад +7

    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

  • @jherodru
    @jherodru 3 года назад +23

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

    • @FaztCode
      @FaztCode  3 года назад +9

      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. :)
      ruclips.net/video/j1lh0NaG7DE/видео.html

  • @jessi2399
    @jessi2399 3 месяца назад

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

  • @carlosbritto32
    @carlosbritto32 3 года назад +5

    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
      @FaztCode  3 года назад +8

      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
      @carlosbritto32 3 года назад

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

  • @typecode6269
    @typecode6269 3 года назад +5

    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
      @FaztCode  3 года назад +2

      Excelente, felicidades por la entrevista. Muchos exitos

    • @jeanpinto8864
      @jeanpinto8864 3 года назад

      @@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
    @RuisuAr 2 года назад +2

    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
    @DPM-TI--MatheusAnalistadesiste 3 года назад

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

  • @JuanCarlos-ox3dc
    @JuanCarlos-ox3dc 3 года назад +1

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

  • @jhontobon4918
    @jhontobon4918 2 года назад

    Qué duro. Como explicas muy claro en serio

  • @johansebastianpuentespulid1401
    @johansebastianpuentespulid1401 3 года назад +1

    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
      @FaztCode  3 года назад +1

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

    • @johansebastianpuentespulid1401
      @johansebastianpuentespulid1401 3 года назад

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

  • @florenciarusso3830
    @florenciarusso3830 11 месяцев назад

    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
    @oscarclaros2225 Год назад

    Muchas gracias crack por compartir tu experiencia y conocimiento.

  • @edwarddk9007
    @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

  • @andhyralac5084
    @andhyralac5084 3 года назад +1

    Grande Fazt!!
    Saludos desde Guatemala 🤟🏽

  • @shmarte
    @shmarte 2 года назад +1

    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

  • @jeisonsalazar71
    @jeisonsalazar71 3 года назад

    Excelente explicación. Saludos desde Colombia

  • @diegoparraguez4817
    @diegoparraguez4817 2 года назад +1

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

  • @MGTRN-tw5uq
    @MGTRN-tw5uq Год назад

    Muy buen tutorial. Gracias por el buen contenido.

  • @danest029
    @danest029 2 года назад

    Gran tutorial. Me ha sido de mucha ayuda. Gracias

  • @diegohurtado9527
    @diegohurtado9527 Год назад

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

    • @FaztCode
      @FaztCode  Год назад

      Tendrias que crear codigo de Backend que permita registrar usuarios

    • @diegohurtado9527
      @diegohurtado9527 Год назад

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

  • @matitk
    @matitk 2 года назад

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

  • @mauricioguevara8423
    @mauricioguevara8423 2 года назад +1

    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
      @Melissa-lc6tb 2 года назад +1

      ¿Pudiste averiguarlo?

    • @mauricioguevara8423
      @mauricioguevara8423 2 года назад +1

      @@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

  • @fabianmartinez7645
    @fabianmartinez7645 2 года назад

    hola, como hiciste para la parte del score?

  • @lindltaylor4093
    @lindltaylor4093 3 года назад +1

    Hey coders mis respetos fazt

  • @sofiainesschenone
    @sofiainesschenone 2 года назад

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

  • @bryancastillo7939
    @bryancastillo7939 2 года назад

    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

  • @alejoopez
    @alejoopez Год назад

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

  • @mateosuarezcaballero4533
    @mateosuarezcaballero4533 2 года назад

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

    • @FaztCode
      @FaztCode  2 года назад +1

      Hola Mateo en este video los muestro: ruclips.net/video/3gAq62EKkv8/видео.html

  • @dory55s
    @dory55s 3 года назад

    Saludos, te admiro, eres el mejor desarrollador

  • @xtremefull
    @xtremefull 2 года назад

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

    • @FaztCode
      @FaztCode  2 года назад

      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/

  • @zzxp1
    @zzxp1 2 года назад

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

  • @sebastian-cruz-gomez
    @sebastian-cruz-gomez Год назад

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

  • @jhonhenrybernalrodriguez2510
    @jhonhenrybernalrodriguez2510 3 года назад +1

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

    • @FaztCode
      @FaztCode  3 года назад

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

  • @desarrolloweb999
    @desarrolloweb999 2 года назад

    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?

  • @zzxp1
    @zzxp1 2 года назад +1

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

    • @FaztCode
      @FaztCode  2 года назад +1

      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

  • @dofepro
    @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.

  • @videosfisica2620
    @videosfisica2620 3 года назад

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

  • @difusal
    @difusal 3 года назад

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

  • @isaacperezpavia5435
    @isaacperezpavia5435 2 года назад

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

  • @joaquin4108
    @joaquin4108 2 года назад

    Fazt, eres crack! gracias!

  • @MiguelDuffy
    @MiguelDuffy 2 года назад

    Gracias por compartir!

  • @CarlosRobles-gy9cl
    @CarlosRobles-gy9cl 2 года назад

    Gracias por el tutorial eres lo mejor

  • @hermesramirez2398
    @hermesramirez2398 3 года назад

    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
      @davidjacobs7966 2 года назад

      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.

  • @quarkc13
    @quarkc13 3 года назад

    Excelente tutorial, Gracias.

  • @danielaragon4108
    @danielaragon4108 3 года назад

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

    • @FaztCode
      @FaztCode  3 года назад +1

      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.

  • @FelipeGordillo
    @FelipeGordillo 3 года назад +1

    Gran vídeo, amigo 👍

  • @ak_d__
    @ak_d__ 3 года назад

    Muchas gracias por crear este contenido

    • @FaztCode
      @FaztCode  3 года назад

      a ti por verlos :)

  • @bakugameplays
    @bakugameplays 3 года назад

    Cual es el color theme que usas?

    • @FaztCode
      @FaztCode  3 года назад +1

      Este tema se llama Material Theme :)

    • @bakugameplays
      @bakugameplays 3 года назад

      @@FaztCode Gracias bro!

  • @ambiorixcastillocina2730
    @ambiorixcastillocina2730 2 года назад

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

  • @victormanuelmartinezalvara5939
    @victormanuelmartinezalvara5939 3 года назад

    Aquí esperando el review de los teclados 😜

  • @cristhianjhlcom
    @cristhianjhlcom 3 года назад

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

  • @gonzalosuarez2923
    @gonzalosuarez2923 2 года назад

    Muchas gracias!!

  • @playmambo9573
    @playmambo9573 7 месяцев назад

    ¡¡GRACIAS!!!

  • @eltontico888
    @eltontico888 2 года назад

    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

  • @SanchayanPackiyanathan
    @SanchayanPackiyanathan 3 года назад

    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
      @FaztCode  3 года назад +1

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

    • @SanchayanPackiyanathan
      @SanchayanPackiyanathan 3 года назад

      @@FaztCode muchas gracias!!!

    • @ligthsonenigma4281
      @ligthsonenigma4281 3 года назад +2

      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
      @davidjacobs7966 2 года назад

      @@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.

  • @miguel900030
    @miguel900030 3 года назад +1

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

    • @FaztCode
      @FaztCode  3 года назад +3

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

  • @michellyanquizuniga1103
    @michellyanquizuniga1103 3 года назад

    Haces streem en una plataforma para suscripción me avisass

    • @FaztCode
      @FaztCode  3 года назад

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

  • @alternativafsproduccionesc6649
    @alternativafsproduccionesc6649 2 года назад

    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 ?

  • @digitaltechbusiness
    @digitaltechbusiness Год назад

    increible

  • @josearmandogonzalesquintan6518
    @josearmandogonzalesquintan6518 3 года назад

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

    • @FaztCode
      @FaztCode  3 года назад +1

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

    • @josearmandogonzalesquintan6518
      @josearmandogonzalesquintan6518 3 года назад

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

  • @jam0106
    @jam0106 2 года назад

    30:00

  • @DevBytes07
    @DevBytes07 2 года назад

    genial!

  • @diegocastellanos9596
    @diegocastellanos9596 2 года назад

    Brilliant !

  • @AlejandroRL868
    @AlejandroRL868 3 года назад

    5to, saludos desde cuba

  • @Tri-lime_Spanish
    @Tri-lime_Spanish 3 года назад

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

  • @Holri
    @Holri 3 года назад

    Master 😎

  • @fernandofernando9292
    @fernandofernando9292 3 года назад

  • @bull3045
    @bull3045 Год назад

    hay algo que este chico no haga bien?

  • @ozzco4385
    @ozzco4385 3 года назад

    Lol hola