Curso JavaScript: 97. DOM: Ejercicios Prácticos | Sorteo Digital -

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

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

  • @gustavoronzoni3450
    @gustavoronzoni3450 6 месяцев назад +2

    simplemente la rompe este profe, es un genio, groso, capo enseñando y explicando. el contenido que hace es el mejor de todo lo que he buscado

  • @federicoraulmaciasaparicio1339
    @federicoraulmaciasaparicio1339 4 года назад +60

    Wow. Muchísimas gracias, Jon. No pensé que fuera a salir tan rápido el slider, jeje. Va a estar muy interesante la clase de mañana. Obviamente no me la pierdo

  • @evalaya3832
    @evalaya3832 6 месяцев назад +1

    super....me sentí como un hacker ...el código de youtube esta actualizado claro han pasado 4 años modificaciones hicieron es lógico solo debo hacer mas scraping es todo ...igual esta demasiado bueno el ejercicio ...gracias profesor

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

    🧙‍♂ Muchas gracias, muy buen curso!!!!

  • @tongastonga22
    @tongastonga22 11 месяцев назад +1

    Gracias Jon!

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

      Un saludo!👋🏻😉

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

    Gracias...totales.....

  • @danielMs694
    @danielMs694 Год назад +1

    Excelente contenido, saludos del futuro año 2023 septiembre 5 , e aprendido mucho con tu contenido y eres excelente profe 😎😎👍👍 Muchas Gracias porfe Mircha

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

      Gracias. Saludos👋🏻😉

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

    He seguido con el curso y es muy bueno

  • @leomax522
    @leomax522 Год назад +2

    Gracias Jon!! Muy bueno.

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

    Usando lo aprendido en este ejercicio, he hecho un script para dar Like a todos los comentarios que hay hasta el momento!
    Gracias Jon! :D

  • @ronalddavidhernandezpadill8182
    @ronalddavidhernandezpadill8182 8 месяцев назад

    I already did the exercise, now I’m going to watch you solution

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

    Excelente explicación✅!! he aprendido mucho que he logrado hacer las mayorías de los ejercicios antes de ver la solución ⭐️⭐️⭐️

  • @adrianmartinez2061
    @adrianmartinez2061 Год назад +1

    JAjaja es el mejor profe! nueva frase agregada a mi diccionario.. "ya se desconchinflo aqui"..

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

    Esdte canal merece Tener Mas del Millon de SUBS no me cansare nunca de decirlo, gracias por todo jon

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

    Super Jon, mil gracias

  • @heimancastro1954
    @heimancastro1954 6 месяцев назад +1

    🎉🎉🎉🎉🎉

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

    El mejor #curso de #javascript por el mejor profesor

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

    Genial, muy bueno profe

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

      Hola, muchas gracias

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

    Por si a alguien pudiera ayudar aquí dejo una pequeña implementación que hice que crea una nueva lista con los ganadores y los elimina del pool inicial para que así no puedan volver a salir elegidos, así se podrían elegir varios ganadores y que quede constancia de los anteriores, es muy sencillo pero funciona. Gracias por tanto Jon :)
    const d = document;
    export default function sorteo(btn, selector, padre) {
    const $padre = d.querySelector(padre);
    $padre.insertAdjacentHTML("afterend", ``);

    const sacarGanador = (selector) => {
    const $jugadores = d.querySelectorAll(selector),
    aleatorio = Math.floor(Math.random() * $jugadores.length),
    ganador = $jugadores[aleatorio];
    if($jugadores.length === 0) {
    alert("No quedan mas jugadores");
    }
    else {
    $padre.removeChild(ganador);
    d.querySelector(".seleccionados").appendChild(ganador);
    ganador.classList.remove("jugador");
    ganador.classList.add("ganadores");

    return ganador.textContent;
    };
    };
    d.addEventListener("click", (e) => {
    if(e.target.matches(btn)) {
    let resultado = sacarGanador(selector);
    // console.log(resultado);
    };
    });
    };

  • @statuqo
    @statuqo 4 года назад +3

    Excelente vídeo profesor, saludos

  • @r.w.s.2402
    @r.w.s.2402 3 года назад +1

    Me encantan todos los ejercicios, muy útiles en la vida real

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

    profe quiero decirle que este ejercicio lo pude resolver yo solito sin ayudas , solo tuve un pequeño fallo en el numero aleatorio lo multiplique por la cantidad de cursos que yo puse , pero estoy feliz por que lo realice yo solito saludos desde colombia, profe gracias por compartir tus conocimientos aqui le dejo el codigo:
    export default function randomDraw(btngenerar,listas){
    let list = document.querySelectorAll(listas);

    document.addEventListener('click',(e)=>{
    if(e.target.matches(btngenerar)){

    let numero = Math.floor(Math.random()*8);

    list.forEach((elemento,index)=>{

    if(numero === index){

    alert(elemento.textContent);
    }
    })


    }
    })

    }

  • @emersonpalaciootalvaro2632
    @emersonpalaciootalvaro2632 4 года назад +1

    excelente.

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

    Corto el ejercicio pero muy útil para proyectos, muchas graciaas

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

    Estuvo increíble este ejercicio Jon, muchas gracias.

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

    El mejor 😀

  • @emirtirso842
    @emirtirso842 4 года назад +1

    Solo quiero decir que muchas gracias por este curso, me ha servido bastante. Mi meta es aprender TS, SASS y Angular para que finalmente aprenda Ionic y poder hacer aplicaciones para moviles con las tecnologias de la web, apenas voy en prepa y considero que muchos temas a partir de aqui no me serviran mucho, tal vez si al final mi conocimiento de js es poco, volvere. Fueron 2 meses de ver tus cursos, ver mas videos de js y leer un monton de documentacion, gracias, sigue asi.

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

    Yo ya habia hecho un bingo con numeros que no se repitiesen esto no fue nada , pero siempre hay algo que aprender Jon muchas gracias Jon

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

    John, por ahora voy sacando lo es ejercicios, el tema es que siempre hay una forma más óptima...de momento me estoy enfocando en entender bien el lenguaje y hacer que las cosas funcionen sea más óptimo o no. Por ejemplo he visto que la gente en vez de hacer condicionales con if else, utiliza objetos literales...y como este ejemplo mil cosas más. Al final me da la sensación de haber hecho que algo funciones pero con malas prácticas ¿es esto correcto? ¿debería enfocarme en optimizar el código o mejor aprendo las bases bien primero?
    Gracias por toda la generosidad al darnos estos tutoriales de forma totalmente altruista
    En el ejemplo final precisamente quise trabajar desde la clase players accediendo a los childNodes para habituarme a inspeccionar las propiedades del objeto y acceder a los nodos que me interesan

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

      Preocupate por resolver los problemas, el optimzar código llega con la experiencia y la práctica

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

      @@jonmircha muchísimas gracias maestro

  • @boogiemusic5686
    @boogiemusic5686 4 года назад +5

    Espectacular como siempre ! Sería bueno un video explicando Scraping en JavaScript . Saludos !

  • @codemixer3565
    @codemixer3565 4 года назад +1

    Gracias x el ejercicio.

  • @josemurillo1977
    @josemurillo1977 4 года назад +1

    Muy buena clase profe

    • @jonmircha
      @jonmircha  4 года назад

      Hola, muchas gracias

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

    Muchisimas Gracias Jonathan, me ha gustado mucho la clase!!!

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

    Muy buen ejercicio, este si me salió, retome el curso por una pausa forzada, ahora si todo sale bien espero terminarlo pronto :D

  • @tomasalvarez922
    @tomasalvarez922 4 года назад +1

    Muy buen video!!

  • @gabrielperdomo9329
    @gabrielperdomo9329 4 года назад

    Excelente como siempre! te felicito muy buena clase jon! saludso-

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

    Gracias Jon Excelente clase como siempre!! Un muy buen ejercicio y además es muy útil me gusto mucho esta clase

  • @omarnjo
    @omarnjo 4 года назад

    Un video mas de aprendizaje, Gracias! Saludos!

    • @jonmircha
      @jonmircha  4 года назад

      De nada, comparte para llegar a más gente

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

    La verdad que cuando avances esto se vuelve un paseo. Mi única observación es que el uso de los mismos parámetro dentro de la función a exportar no eran necesarios, porque la función que envuelve ya los recibe. Después de ver el vídeo cambie todo porque estaba usando setTimeOut para darle más suspenso. Gracias Profe por tan buenas clases y ejercicios

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

    Hola, muchas gracias por estas clases!. Dejo mi codigo y perdon por escribirlo aqui.
    //
    export function azar(lista, btn){
    const $lista = d.querySelector(lista).children;
    const $btn = d.querySelector(btn);
    $btn.addEventListener('click', e=>{
    const azar = Math.floor(Math.random() * ($lista.length - 0)) + 0;
    alert($lista[azar].textContent);
    })
    }
    //

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

    Que buen video Jon. Muchas Gracias!! Una consulta: dentro de la función a exportar tienes una arrow function que contiene el listener.. ¿cuando es conveniente usar una función dentro de otra? Te lo comento porque mi código quedó similar, pero con esa diferencia; que ejecuto todo directamente en la función principal..

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

      Depende de si necesitas pasarle parámetros o no a la función asociada al evento

  • @helipalacio8772
    @helipalacio8772 Год назад +1

    👏👏👏 🙏🙏🙏

  • @facundolavagnino6768
    @facundolavagnino6768 4 года назад +2

    Jonathan enciso te ganaste un viaje a Silicon Valley todo pago

  • @seica5561
    @seica5561 4 года назад +2

    AMIGO JON MIRCHA.. PENDIENTE DE TUS VIDEOS..

    • @jonmircha
      @jonmircha  4 года назад

      Gracias, comparte para llegar a más gente ;)

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

    Hola Jon, algun tip para poder hacer el slider? que voy a necesitar usar?

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

      Saber Posicionamiento CSS 🤭

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

    Excelente video

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

    "En que momento va a salir JavaScript ehhh!, maldito random".
    Me hizo el día JAJAJAJAJA

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

    Jon a mí me pasa lo mismo con youtube, empieza a reproducir el video pero no me deja pausarlo hasta que carga los botones y como aveces mi internet está lento me enferma jaja pensé que era el único al que le pasaba

  • @angelicagarzon9726
    @angelicagarzon9726 10 месяцев назад

    el ganador es javaScript eeeeeeee bumm😀

  • @Anthony_Ger1996
    @Anthony_Ger1996 4 года назад +1

    We me esta olvidando algunos conceptos basicos pero tuve que ver de nuevo y ya estamos, resolvi el ejercicio solo con el evento submit, Jon tengo una pregunta porque la funcion tiene que estar ejecutandose dentro del evento, por lo que vi si lo ejecuto siempre en el evento se actualizara lo valores, estoy en lo correcto? ya que lo puse fuera del evento y no actualizaba. Gracias por todo :D

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

    👏🏻👏🏻👏🏻 🙏🏻🙏🏻🙏🏻

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

    Hola Jon, esta funcion se puede hacer en una extension de crhome y tomar el document.body y escarbar para sacar lo que uno quiere de ahi ?, tendras algun video de como hacer una extension !! gracias

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

      Supngo que sí, no no tengo nada de creación de extensiones

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

    Me encanto el "¿Y en qué momento va a salir Javascript?!! Maldito Random" #MomentosConMirCha 13:34

  • @estebanoctaviopavezllanca2385
    @estebanoctaviopavezllanca2385 4 года назад +1

    Estimado adjunto ejercicio
    github.com/Stev-189/Ejercicio_DOM
    Gracias Profe.-

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

    13:34 🤣🤣🤣

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

    buen dia, apenas voy en este video, y soy principiante, me sale el siguiente error en la consola Cannot read property 'textContent' of undefined, lo curioso es que si me funciona bien en el navegador local, solo en el de otra pagina como youtube o ya intente con otras y sale ese error de textContent

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

      cuando te dice que algo es undefined es por que tienes error de dedo seguramente que por ahí se te fuel alguna letra de mas o menos al definir o usar la variable

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

      A mi igual, y ya verifique error de dedo y nada jaja esta igual

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

      El mismo Error por aca alguna actualizacion?

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

      @@jimmyroserovallejo encontraste la solucion?

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

      @@pimpwoo2418 si Bro pero no recuerdo que fue que hice...

  • @reactivoJS
    @reactivoJS Год назад +1

    Supongo que me estoy adelantando a los acontencimientos, pero... y si hay más comentarios de los que se muestranen pantalla, es decir hay un botón de cargar más, esos comentarios también entrarían o lo suyo sería acceder a una API que nos devuelva los comentarios de la publicación? Gracias.

  • @drewsand8017
    @drewsand8017 4 года назад

    Está fácil carousel .
    Solo necesita un contenedor con position relative y dentro del contenedor hay que colocar las img posicionadas absolutas, y la animación se obtiene cambiando el opacity de la img y colocándole una transition a las img ...
    De la parte de Js ya sería capturar el evento de click para ver si el click fue a siguiente o anterior "Sería bueno hacer haciendo traversing" creando una botonera y consultando la clase , el id o el atributo que ustedes quieran . Luego de hacer click en siguiente o anterior hay que seleccionar todas las img y mediante un forEach colocarle una opacity : 0 , con esto ocultaremos todas las img y solo nos quedaría agg opacity a la img que queremos mostrar.
    Para hacerlo infinito sería tan sencillo como colocar un contador e ir mostrando la img que nos indique el contador, asi tendríamos un problema porque si por ejemplo son 4 img y ya hemos mostrado las 4 img el contador ahora sería 5 pero no hay img , eso se solucionaría colocando una condicional en el momento en que hacemos click . SI YA LLEGAMOS A LA IMG 4 (debemos reiniciar el contador).
    Esta es solo una manera, de hacerlo ya les digo que hay muchas manera de hacerlo

    • @jonmircha
      @jonmircha  4 года назад +1

      Muy bien :)

    • @drewsand8017
      @drewsand8017 4 года назад +1

      @@jonmircha Excelente contenido.
      Voy hacer su curso de node js

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

    Buenas Excelente video , me gusto pero tengo una duda que pasa si Math.random da 1 ahi no encontraria algun lenguaje? o Nunca Puede Salir 1?

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

      Math.random excluye el valor de 1 ;) developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math/random

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

    Hola Jon ,copié textual el código y me aparece el error : "Uncaught TypeError: Cannot read property 'textContent' of undefined",a que se puede deber?

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

      Eso significa que el nombre de la variable que usas con la propiedad textContent no existe, seguro tienes un error de dedo

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

      @@jonmircha gracias por la respuesta Jon ,lo voy a revisar nuevamente

  • @junse99
    @junse99 4 года назад +1

    Jhon, una pregunta, en el caso de Facebook que no todos los comentarios se cargan de una, sino que a medida que baja el scroll van a apareciendo, funciona? Es decir, con el querySelectorAll si traería todos los comentarios o solo los que se ven?

    • @jonmircha
      @jonmircha  4 года назад +2

      Habría que hacer pruebas, yo apuesto por que se trae sólo los que están cargados

    • @junse99
      @junse99 4 года назад

      @@jonmircha Muchas gracias por aclarar la duda! :D

  • @kikemadrigalr
    @kikemadrigalr 4 года назад +1

    Saludos Jon, Saludos compañeros.. Por acá a compartir mi solución. Utilice una tematica de equipos de futbol. Al momento de sortear al ganador agrego un pequeño spinner nada fuera de lo común solo utilice un icon de fontawesome y luego en un alert de swettAlert muestro mi ganador, pasado unos segundos.. El listado de participantes lo agrego desde un array de JS. Me deje llevar con los del array cuando lo comentaste en el vídeo aterior y literalmente lo hice así. Acá les dejo el enlace para que desee ojearlo un poco.
    De nuevo Jon gracias y Felicidades por este curso.
    codepen.io/kikemadrigalr/pen/MWydQKw

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

    Llegue tarde, bueno aqui dejo mi codigo (le agregue unas cositas mas), gracias Jon.
    HTML
    Sorteo Digital
    Python
    JavaScript
    C++
    C
    PHP
    Java
    HTML
    CSS
    Matlab
    Swift
    SQL
    Perl
    Basic
    Haskell
    Obtener Ganador
    CSS
    .lista-selector{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 0;
    }
    .lista-selector .item{
    background-color: #1b5e20;
    margin: 2px;
    padding: 1rem;
    }
    .button-random{
    margin-top: 5rem;
    border: 0;
    line-height: normal;
    cursor: pointer;
    padding: 1rem !important;
    background-color: rgb(0, 170, 156);
    color: black;
    font-size: 0.9rem;
    transition: .3s ease-out;
    }
    .button-random:hover{
    background-color: white;
    color: black;
    }
    .ganador{
    background-color: rgb(68, 0, 0) !important;
    color: white;
    font-weight: bold;
    }
    JAVASCRIPT
    const d = document;
    export default function sorteoAzar(button, item){
    const $lista = d.querySelectorAll(item),
    itemsSelector = [];
    $lista.forEach(el => {
    itemsSelector.push(el.textContent)
    });
    d.addEventListener("click", (e) => {
    if(e.target.matches(button)){
    let randomRanM = setInterval(() => {
    let aleatory = itemsSelector[Math.floor(Math.random()*itemsSelector.length)]
    $lista.forEach(element => (element.textContent === aleatory)
    ? element.classList.add("ganador")
    : element.classList.remove("ganador")
    );
    }, 50);
    setTimeout(() => {
    clearInterval(randomRanM)
    }, 3000);
    }
    })
    }

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

    🧙‍♂️🧙‍♂️🧙‍♂️

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

      🙌🏻🙌🏻🙌🏻

  • @amb7399
    @amb7399 4 года назад +1

    Jon una consulta. Como hago para que mediante una URL que me pase el usuario, yo identifique el vídeo y extraiga todos los comentarios de ese vídeo para hacer el sorteo??

    • @jonmircha
      @jonmircha  4 года назад +1

      mmm ahí necesitarias hacer un sniffer de código pero para ello requieres lenguajes del lado del servidor, tengo algo parecido a eso en mi curso de Node.js ruclips.net/video/zXmqHBUwBKA/видео.html

  • @helipalacio8772
    @helipalacio8772 3 месяца назад +1

    👨

  • @martinbergesio1990
    @martinbergesio1990 4 года назад +1

    Bueno yo estaba tan contento porque había resuelto este ejercicio bastante rápido y con 0 ayudas, pero claro no lo resolví de la misma manera que tu, pero bueno eso era demasiado pedir xD. De todas formas si que veo que algunos razonamientos son muy parecidos, lo que tu lo tienes más ordenado y con la programación encapsulada en una función y luego en el evento click solo muestras la información. Pero bueno creo que voy avanzando y sobre todo ganando confianza y practica.
    Aquí te dejo mi código: github.com/Dachi90/Curso-Jon-MirCha/tree/master/Video%2080%20al%20104
    Un saludo y muchas gracias crack.

  • @tonimurcianocervero7981
    @tonimurcianocervero7981 4 года назад

    Gracias Jon, buen video, una pequeña consulta, me quedé un poco sorprendido cuando vi que youtube usa el mismo id para identificar distintos elementos del DOM (en este caso el id="author-text"), no sé supone que un id debe ser único en toda la página? Parece una mala práctica, no?
    Un Saludo.

    • @jonmircha
      @jonmircha  4 года назад +1

      Sí, es mala práctica

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

    Gracias maistro por su conocimiento...................
    Nadie,
    absolutamente nada:
    El pide que acosa a su crush: "Esta informacion vale millones"

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

    que no giveaway es sorteo? jajaja gracias Jon buen video

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

    Hay alguna manera de hacer que el resultado siempre sea un ganador en especifico?

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

      ya no sería un sorteo 🤔

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

    ¡Javascript gano después de 15,000 intentos! Aquí hay gato encerrado con los del sorteo. Está arreglado me cae

  • @juancarloshernandezsanchez3596
    @juancarloshernandezsanchez3596 4 года назад

    Hahahahaha y cuando saldrá javascript, M..... Randon 😂

  • @matiasgomez9416
    @matiasgomez9416 4 года назад

    Este es el problema que presento al querer obtener los nombres de los comentarios de RUclips:
    Uncaught TypeError: Cannot read property 'textContent' of undefined
    const getWinnerComment = (selector) => {
    const $players = document.querySelectorAll(selector),
    random = Math.floor(Math.random() * $players.lenght),
    winner = $players[random];
    return `El ganador es: ${winner.textContent}`;
    };
    getWinnerComment("ytd-comment-thread-renderer #author-text span");

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

      ya paso 1 año xD pero esta mal escrito "lenght" . es length

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

      @@tomasarcostanzo Bueno, no yo si lo tengo bien escrito, pero es que desde $players, me detecta un node list vacio y por eso no puedo generar un ganador