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

[@gustavoronzoni3450]

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

[@jonmircha]

👋🏻😉

[@federicoraulmaciasaparicio1339]

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

[@jonmircha]

Saludos

[@evalaya3832]

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

[@jonmircha]

👋🏻😉

[@Wiiiiizard]

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

[@jonmircha]

😉👋🏻

[@ronalddavidhernandezpadill8182]

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

[@TheAiron33]

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

[@jonmircha]

🤓👋🏻

[@tongastonga22]

Gracias Jon!

[@jonmircha]

Un saludo!👋🏻😉

[@imikepena]

He seguido con el curso y es muy bueno

[@jonmircha]

😉🙌🏻

[@danielMs694]

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]

Gracias. Saludos👋🏻😉

[@danielfabiani4468]

Gracias...totales.....

[@jonmircha]

😉👋🏻

[@z3r0krypt]

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); }; }); };

[@jonmircha]

🤓👌🏻

[@jasserblanco2805]

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

[@jonmircha]

😃🙌🏻

[@adrianmartinez2061]

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

[@jonmircha]

😅

[@leomax522]

Gracias Jon!! Muy bueno.

[@jonmircha]

Con gusto👋🏻😉

[@timawid]

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

[@jonmircha]

Excelente!👋🏻😉

[@boogiemusic5686]

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

[@juandiegooliverosvasquez1798]

Sería genial.

[@instintoimagen]

El mejor #curso de #javascript por el mejor profesor

[@jonmircha]

🥰🙌🏻

[@r.w.s.2402]

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

[@jonmircha]

Excelente

[@statuqo]

Excelente vídeo profesor, saludos

[@jonmircha]

De nada :) Saludos

[@alveiroceron]

Super Jon, mil gracias

[@jonmircha]

🙌🏻😎

[@addevmoises]

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

[@jonmircha]

;)

[@walterarriaza]

Estuvo increíble este ejercicio Jon, muchas gracias.

[@jonmircha]

👋🏻😃

[@antonioarias8489]

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

[@jonmircha]

😉👍🏻

[@KbitsR]

Genial, muy bueno profe

[@jonmircha]

Hola, muchas gracias

[@codemixer3565]

Gracias x el ejercicio.

[@jonmircha]

De nada!

[@josemurillo1977]

Muy buena clase profe

[@jonmircha]

Hola, muchas gracias

[@emirtirso842]

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.

[@isuiisui7352]

Cómo te fue?

[@yovanyescobarrojas2041]

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); } }) } }) }

[@jonmircha]

🤓👍🏻

[@emersonpalaciootalvaro2632]

excelente.

[@victormontivero1998]

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

[@jonmircha]

😉👍

[@luciogames2488]

El mejor 😀

[@jonmircha]

🥰🙌🏻

[@seica5561]

AMIGO JON MIRCHA.. PENDIENTE DE TUS VIDEOS..

[@jonmircha]

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

[@carlesbautista8293]

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

[@jonmircha]

Excelente!

[@tomasalvarez922]

Muy buen video!!

[@jonmircha]

Gracias!

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@sebastiandossantos7158]

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]

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

[@pilinchooo]

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

[@jonmircha]

Muchas gracias!

[@Juicio87]

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]

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

[@Juicio87]

@@jonmircha muchísimas gracias maestro

[@gabrielperdomo9329]

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

[@jonmircha]

;)

[@omarnjo]

Un video mas de aprendizaje, Gracias! Saludos!

[@jonmircha]

De nada, comparte para llegar a más gente

[@marcoscardozo6579]

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); }) } //

[@estebanoctaviopavezllanca2385]

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

[@alannm5414]

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

[@jonmircha]

Saber Posicionamiento CSS 🤭

[@helipalacio8772]

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

[@jonmircha]

😉👋🏻

[@christianosorio9239]

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

[@jonmircha]

😉👍🏻

[@heimancastro1954]

🎉🎉🎉🎉🎉

[@jonmircha]

👋🏻😉

[@imikepena]

Excelente video

[@jonmircha]

Gracias!

[@Anthony_Ger1996]

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

[@irving7653]

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

[@jonmircha]

🤭

[@kikemadrigalr]

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

[@jonmircha]

bien :) !!!

[@juanestebanvelezloaiza6144]

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

[@jonmircha]

😅

[@facundolavagnino6768]

Jonathan enciso te ganaste un viaje a Silicon Valley todo pago

[@angelicagarzon9726]

el ganador es javaScript eeeeeeee bumm😀

[@hellg1307]

13:34 🤣🤣🤣

[@jonmircha]

jejeje

[@franostuven]

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]

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

[@bryanortiz2098]

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); } }) }

[@jonmircha]

👍🏻

[@helipalacio8772]

👨

[@jonmircha]

👋🏻😉

[@martinbergesio1990]

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.

[@jonmircha]

:)

[@reactivoJS]

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.

[@jonmircha]

Sí

[@wilsonandia8290]

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]

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

[@braianrico4422]

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

[@jonmircha]

🙌🏻🙌🏻🙌🏻

[@matiasromera330]

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

[@jonmircha]

🤭

[@juansebastianobregoncuella8172]

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]

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

[@juansebastianobregoncuella8172]

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

[@drewsand8017]

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]

Muy bien :)

[@drewsand8017]

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

[@amb7399]

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]

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 kzbin.info/www/bejne/sInQont4itx1gaM

[@tonimurcianocervero7981]

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]

Sí, es mala práctica

[@cristianrosas8674]

que no giveaway es sorteo? jajaja gracias Jon buen video

[@jonmircha]

🤣🤣

[@fernandomoyano1339]

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]

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

[@fernandomoyano1339]

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

[@yamilcaceres9825]

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

[@fernandocaste6904]

Esta informacion vale millones

[@korinca78]

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]

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]

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

[@pimpwoo2418]

El mismo Error por aca alguna actualizacion?

[@pimpwoo2418]

@@jimmyroserovallejo encontraste la solucion?

[@jimmyroserovallejo]

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

[@alhnosre6944]

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

[@jonmircha]

ya no sería un sorteo 🤔

[@eduardojasso4506]

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

[@jonmircha]

😅

[@juancarloshernandezsanchez3596]

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

[@matiasgomez9416]

Este es el problema que presento al querer obtener los nombres de los comentarios de KZbin: 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]

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

[@mbassano]

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