Curso JavaScript: 88. DOM: Ejercicios Prácticos | Tema Dark/Light -

[@MX7681]

La verdad que llegué al canal cuando ya habia empezado mi portfolio, pero decidí pausarlo para formarme con este maestro maravilloso. Creo que ha sido buena idea porque ya sólo con este curso y lo que llevo de css se están tocando muchos puntos de las ideas que tenía-tengo para mi portfolio pero, yo creo que con mayor comprensión de base que si hubiera ido buscando las ideas una por una, además de que comprendo mejor como engarzarlas entre sí. Son muchas las sorpresas que me estoy llevando con todo este mundo de la programación, y una de ellas, es que la difusión del conocimiento y muchos recursos se van compartiendo gratuitamente y eso me encanta. Por supuesto hay que agradecer de forma concreta cuando ya se puede, pero lo cierto es que se da de forma generalizada y luego ya cada uno devuelve como y cuando puede y eso me fascina. Es como si entre todos estuvieran erigiendo un mundo a base de solidaridad, aportando lo que se tiene a cambio de lo que pueden.💓💓💓

[@jonmircha]

👋🏻😉

[@nickrodriguez7758]

Un dev me recomendó tu canal, no le había prestado tanta atención, luego youtube simplemente me muestra tu contenido y me ha ayudado mucho a progresar, gracias por enseñar!

[@jonmircha]

👋🏻😉

[@srgiochu8936]

Buena explicacion !! cosas interesantisimas, la verdad que tiene pocas reproducciones ,para este tipo de conocimientos , somos pocos los afortunados que ya te conociamos desde hace años !! he navegado por varios cursos hasta de pagos... y estas cosas interesantes no las habia visto , ojala siempres sigas enseñando !GRacias!

[@jonmircha]

Comparte para que seamos más :)

[@Ni_idea_de_tecnologia]

Es increible lo fácil que hace la programación con sus explicaciones Sr. Mircha. Muchas gracias

[@jonmircha]

Hola, muchas gracias👋🏻😉

[@pedrotarazona9505]

!boom!, hay buen contenido para un aprendiz como yo, excelente, gracias saludos desde cooolombia!!😁

[@jonmircha]

Gracias, saludos!

[@braianrico4422]

Es tan emocionante cuando se van dando las cosas y además entiendes.... Gracias Jon por tu dedicación y gracias a Dios por darte el don de la enseñanza! Bendiciones, saludos a Batman y a Kenay!!!! 🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

😉🙌🏻🙌🏻🙌🏻🦇🦊

[@brandonmunozmazariegos1555]

buen video, yo lo realize con 2 botones, y quedo asi: const $body = document.getElementById('body'); const d = document; d.addEventListener('click',(e)=>{ if(e.target.matches('#dark')){ $body.style.backgroundColor='black'; } if(e.target.matches('#light')){ $body.style.backgroundColor='white'; } }) es valido, lo realize antes de darle play a tu video. y fue la unica manera que se me ocurrio, queria realizarso solo con un boton pero no supe como, ahora que veo tu video es facil, eres buenisimo

[@jonmircha]

👍🏻

[@giovannyvanegas88]

Bastante interesante, el trabajo que se ahorra usando los data atributs. Lo hice de otra forma usando toggle, pero solo lo aplique al body. Muy buena explicacion!

[@jonmircha]

👋🏻😉

[@ricardorivera1762]

yo también usé toggle. La ventaja de los data, es que supongo que en proyectos grandes, la asignación y modificación de estilos mediante clases (referenciando los data) te dan mucha eficiencia.

[@Wiiiiizard]

🧙‍♂Muchas gracias, muy bueno el curso!!!

[@jonmircha]

👋🏻😉

[@emilianonegro5179]

Genail!!!! Ahora se como reducir tantas lineas de codigo que hice para hacer mi DarkMode

[@jonmircha]

😉👌🏻

[@eliam9461]

Gracias maestro!!! Estoy consumiendo su canal como un desquiciado jajaja :)

[@jonmircha]

Muchas gracias :) espero te sirve el contenido

[@tongastonga22]

Gracias Joon, que gran profesor!

[@jonmircha]

Con mucho gusto 👋🏻😉

[@carlosjavierorozco8418]

Estupendo, bastante util este tema! muchas gracias!

[@jonmircha]

Con gusto

[@leonardoprone5967]

Excelente, Jon!! muchas gracias

[@jonmircha]

Con mucho gusto

[@timawid]

Estoy haciendo cada uno de los ejercicios y cada vez estoy más motivado 🤩 excelente contenido ❤️

[@jonmircha]

Excelente!👋🏻😉

[@denncriss3082]

Genial profe se ve muy bien voy a empezar a ver todo el Playlist ponerme al dia

[@jonmircha]

Excelente! :) comparte para llegar a más gente

[@mundomagupe6088]

Muy inteligente utilizar DataAtribute .. 😃

[@jonmircha]

😉👍🏻

[@elweonweandolaweafome]

Profe dios me lo bendiga, un dìa aportarè a su canal algo màs que bendiciones, se lo prometo u.u

[@jonmircha]

😉👋🏻

[@johnherrera5913]

Master! Excelente Tutorial, muchas gracias

[@jonmircha]

😉👍🏻

[@lauradillonar]

Qué interesante Jon el próximo video también. Gracias por tanto! Saludos desde Buenos Aires!!!

[@jonmircha]

🤗

[@rutita]

🍎🍎🍎Muy claro todo, ya me siento súper pro 😎 poniendo tema oscuro en la página. muchas gracias!!! Que pases unas excelentes fiestas!!🎅

[@jonmircha]

igualmente !!!

[@ronalddavidhernandezpadill8182]

ya hice el botón dark light ahora vere su solucion profe

[@jonmircha]

👋🏻😉

[@javi_el_dinamico1023]

Amo y amaré esta clase. Creo que le prenderé velas y la haré santa de mi devoción. ¡Gracias, profe! 💪

[@jonmircha]

😉🙌🏻

[@olimpomacea5279]

Genial como siempre muchas gracias Jhon. Sin embargo me queda la duda de porque aplicando el data al body el header no toma los cambios de forma automática como los demás elementos ???. Me gustaría que me ayudaras a despejar esa duda por favor, gracias.

[@wilderquispecondori3216]

estas clases valen oro, gracias sensei

[@jonmircha]

Gracias!

[@sathonyNakamotolml]

Uff, que buen video profe, 10/10

[@jonmircha]

Gracias. Saludos

[@manuelcobasguerra5688]

Mil Gracias Siempre e Querido Saber Como se hace el cambio de tema claro a oscuro Mil Gracias Por Tu Aporte y la Calidad De Tus Enseñanzas

[@nachosanabria6942]

gracias n excelente video

[@jonmircha]

Gracias por comentar

[@walterjosesuarezdelacruz1495]

Eres un crack, hasta explicas brevemente como funciona bootstrap, como dirías TRAS BAMBALINAS.

[@jonmircha]

;) jejeje

[@martinbergesio1990]

Buenos días, Aquí te dejo mis ejercicios. Lo había resuelto de una manera bastante parecida. Lo único es que para seleccionar los selectores a los que aplicar los estilos dark en lugar de utilizar los data attributes utilize una clase que ya tenia aplicada a todas las secciones principales de la "web". Luego si que he corregido el método con el que seleccionaba los botones, ya que estos los hacia uno por uno, y aquí si que lo corregí y aplique tu método de usar los data attributes con lo que me quedaba un código más limpio. github.com/Dachi90/Curso-Jon-MirCha/tree/master/Video%2080%20al%20104 Muchas gracias, un saludo.

[@davidavellaneda133]

Jon una pregunta, en algún momento veremos ejercicios de asincronía? Es que estaba viendo tu sitio web y miré el JS index.js?v=2021-04-01 veo que inicias todo con una función asíncrona (async (d) => {}); ENTONCES ME PARECE INTESANTE YA QUE NO ME QUEDÓ CLARO CLARO EN QUÉ MOMENTO IMPLETAR LA ASÍNCRONÍA O SI SIEMPRE HACER FUNCIONES ASÍNCRONAS ETC, gracias Jon espero tu pronta respuesta eres un profe genial, muy Dios la verdad ajjajaj

[@jonmircha]

Sí, en la sección de ejercicios de AJAX

[@adrianfigueroa7735]

Sos un maestro de los maestros Jon!! muchísimo mejor contenido que la mayoría de curos pagos. Te hago una consulta: ¿Por qué el header con el encabezado que dice "Ejercicios del DOM" no toma los colores del modo dark? No debería tomarlos por ser hijo de HTML y de BODY?

[@jonmircha]

Tiene sus propios estilos y por especificidad no los toma

[@ethelfernandez5633]

Gracias hare tu curso completo desde mañana hoy estoy terminando un curso pero q me enseña la matemática d javascript xq eso basico no me lo sabia para poder entender y emoezar el curso practico es q lo siento muy complejo y si o si tengo q aprenderlo para recibirme

[@jonmircha]

👋🏻😉

[@marcosMartinez-wm7bd]

Clase excelente!

[@jonmircha]

Hola, muchas gracias

[@facundogutierrez1132]

Otra forma que se me ocurrio tambien, fue cambiar el href de la hoja de estilos css de lithg a dark, capturando el href en javascript y cambiandoselo, me parecio mas rapido.

[@jonmircha]

🤓👍🏻

[@miguelantonioescuderoperal7485]

buen video maestro yo lo pude hacer pero aplicando todo al body, ahora aprendi como hacerlo a alguna etiqueta especifica , muchas gracias, una consulta disculpe la molestia esque no me quedo tan claro cunado en la funcion darkTheme al ingresar los selectores a dark-mode no le puso el "."

[@jonmircha]

en que parte ?

[@miguelantonioescuderoperal7485]

@@jonmircha en el minuto 7:55 como que no me quedo claro

[@jonmircha]

Es por la manera en que construyo los parametros de mi función en el primer parametro si uso punto por que esa valor termina usandose para el querySelector, pero el segundo simplemente es nombre de la clase para usarlos con los métodos de classList ;)

[@miguelantonioescuderoperal7485]

@@jonmircha al momento de usar el metodo classList ya se entiende entonces que ese parametro que no uso punto es una clase o me equivoco ?

[@jonmircha]

@@miguelantonioescuderoperal7485 exacto

[@alvaromorales3310]

Grande máster! :D

[@jonmircha]

;)

[@AkselJavier]

Hola Jon como estas? excelente curso, gracias por aportar tanto valor, tengo una pregunta porque cuando selecciono darkmode en body me cambia el estilo en los h1,h2, etc por ejemplo pero no en el boton de la flechita.. o porque no me lo cambia en el texto del header, porque deberia agregar el el data atribute en el header para que me lo tome pero no en los h1? Gracias

[@jonmircha]

Seguraente es por que heredan los estilos del body

[@eduardflores8420]

Buen video Jon !! pero añadirle el atributo data-dark de manera manual a cada elemento html no seria ineficiente ? hablando de una web grande, no seria mejor que desde JS hacer una comprobación y añadirle el atributo data-dark a los elementos que cumplen la condicion que queremos? por que no siempre vamos a tener todas letras de un solo color ,a veces hay titulos ,formularios y botonos con colores distintos

[@lautarodisalvo8360]

claro, con un setAttribute ponerle al elemento html data dark como atributo, es cierto

[@Anthony_Ger1996]

hice el ejercicio pero de la manera como dijiste que no se hacia jejeje aunque falle porque solo me falto cambiar el icono pero bueno luego de ver como lo haces tu totalmente diferente ya que es mas eficiente. Saludos :D

[@marcosMartinez-wm7bd]

24:08

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@antonioarias8489]

Wow buena explicacion, creo que en css hay uuna media querie que segun el tema de tu navegador la pagina se acopla

[@jonmircha]

😉

[@antonioarias8489]

@@jonmircha es recomendable usar ambos?, osea el media querie y el archivo js o por separado dependiendo del proyecto

[@chambers4222]

Muy buenos aportes Jon! De igual forma me gustaría saber que libros de JS me recomiendas? Recuerdo que en un video de los anteriores lo mencionaste pero no recuerdo en cual fue:c Muchisimas gracias y saludos ☺️

[@jonmircha]

eloquentjavascript.net/

[@facundogutierrez1132]

Yo al contrario, no se si esta equivocado o no se acostumbra asi en distintas plataformas, pero deje el sol por defecto en el modo light, y si te posicionas sobre el boton con un hover se pone el icono en negro y se ve la luna en amarillo. Y si estas en modo dark, queda la luna por defecto y con un hover si estas encima se ve el sol. Que opinas Jon?. Otra cosa, estuve queriendo usar eventos de mouseenter y mouseleave, pero me decidi por el hover al final, que conviene mas?

[@jonmircha]

Pues depende de la interacción que pretendas

[@davidsalvador3855]

este es el curso mas completo que haya encontrado. hasta ahora no me creo lo que he aprendido

[@jonmircha]

:) comparte para llegar a más gente :)

[@naqzher]

Profe una consulta, si el e.target.matches("BUTTON") tiene un icono en el boton o span, el evento no matchea aunque este dentro, como se puede solucionar esto? saludos y like

[@jonmircha]

hay que agregar los selectores de adentro

[@RobertCastilloC]

yo lo hice modificando las variables que tenia definidas en :root

[@jonmircha]

👍🏻😉

[@abelsilvasantacruz9584]

x2

[@hernangarcia77]

Podria usarse clssslist.toggle tambien?

[@jonmircha]

si

[@percycordova1994]

Porfesor buenas noches, una consulta: Cuando corro el proyecto en el visaulCode no tengo ningun problema pero cuando abro el index con mi navegador me sale el siguiente error: ' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. sabe a que se debe ese error?

[@jonmircha]

Tienes que ejecutarlo en un entorno de servidor, si lo abres dandole clic no funcionará

[@ronaldm.r]

Yo hice algo parecido pero solo mande a llamar al contenedor padre, y con el dom transversing pues fui agregando los colores correspodientes con un forEach, es más lento asi?

[@jonmircha]

Pues yo creo que es otra forma, recuerda que la programación no tiene solución absoluta

[@abelsilvasantacruz9584]

Emojipedia o fontAwesome?

[@jonmircha]

Las 2

[@syberiaok]

El dark mode es el mejor invento después de internet jajaja

[@jonmircha]

😜

[@edilymora125]

Buenos dias profesor, tal vez mi pregunta sea tonta, pero no entiendo porque sí a la tag

[@jonmircha]

No hay preguntas tontas, bueno sí, las que no se hacen ;) para este ejemplo me fue más fácil aplicarle el color al tag HTML pero deberías aplicarlo a todo lo que quieras que cambie con el dark mode ;)

[@edilymora125]

@@jonmircha Entendido, muchas gracias !!

[@heimancastro1954]

🎇🎇🎇🎇🎇🎇🎇🎇

[@jonmircha]

👋🏻😉

[@carlesbautista8293]

Hola Jonathan, he intentado contactar contigo por mail, solo es para dar-te las gracias por todo, y desear-te una feliz Navidad y una buena entrada de año 2021 :)

[@jonmircha]

;)

[@jsfdz]

Hola profesor jon, quisiera preguntarle si hacerlo de esta forma está bien o es una mala práctica codepen.io/CrisanFdez/pen/gOMbgXK, no se pq no me funciona el código en codepen.io parece que tiene algo q ver con los permisos de localstorage en esa ventana.

[@jonmircha]

Te sugiero usar nombres más descriptivos en tus variables

[@helipalacio8772]

👨

[@jonmircha]

👋🏻😉

[@Munoz-in1ew]

Alguien sabe como hace el profesor para borrar desde donde esta la rayita de escribir hacia la derecha? en el minuto 2:48

[@miktl]

Profe sabe por que no hay borde negro es mis emojis? puse las mismas clases y todo pero nada, le cambie de color al background para que se note la luna y el sol xd

[@jonmircha]

😮

[@matiasromera330]

aguante el modo oscuro de todo!! (inclusive el lado oscuro de la fuerza 😈)

[@jonmircha]

🤭

[@albertomunoz964]

No seria mas facil hacer uso de variables CSS y cambiarlas desde Js??? o es mala practica?

[@jonmircha]

Pero se tiene que guardar en el storage del usuario, si puedes usar variables de css pero tendría que guardar el valor en el localstorage de eso no te salvas

[@armandoalvarez8314]

Me salta la duda de ¿Por qué? al llamar la función darkTheme (".clasedelboton", "clasecambiodetema"), no se le pone el punto para que identifique que es una clase. Sería su función igual por que se están aplicando data atributes?

[@terras06233]

Muy buen video pero no encuentro los codigos de este ejercicio en github. Esta el archivo vacio . Si no es mucha molestia lo podrias subir?

[@jonmircha]

github.com/jonmircha/youtube-js#repositorio-premium

[@estebanoctaviopavezllanca2385]

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

[@kunjilee9810]

Aqui esta mi solucion !!! , el darkMode codepen.io/Kunjo_/pen/jOMjyGE

[@TheDawnBreaker9146]

Buenas Jon, no se que pasa, pero no me cambia la luna y el sol, solamente se queda estática la luna

[@jonmircha]

Revisa que tengas correcta la lógica de la programación para el cambio

[@TheDawnBreaker9146]

@@jonmircha Lo volví a hacer desde cero y me funcionó. Gracias

[@kikemadrigalr]

Saludos Jon, saludos Compañeros. Paso a dejar por acá mi solución al ejercicio propuesto. Lo hice utilizando algo que aprendí hace poco en un tutorial, con el que hice algo parecido. Espero sea de su agrado y que le pueda servir a alguien mas. codepen.io/kikemadrigalr/full/MWydQKw

[@jeancarloscorrea3485]

localstorage

[@joansoldevilasolsona777]

Al igual que en el ejercicio anterior, una vez clicado el botón, ya no responde a ese evento y por tanto solo cambia una vez. Soy bastante nuevo en JS y no sé si ha evolucionado el lenguaje de forma que este código ya no funciona exactamente así.

[@peter-jb]

debes usar el toggle

[@ryuzakibakura8229]

@@peter-jb tengo el mismo problema que joan y no encuentro solución, aún usando toggle, solo funciona al primer click, y ya no regresa a light mode volviendo a dar click, me pasa lo mismo con el ejercicio anterior, solo se puede usar el boron de hacer scroll hacia arriba una sola vez ={

[@Ni_idea_de_tecnologia]

Quizá se no se ejecute porque está fuera de las llaves de la función? Sin el código no se puede comprobar@@ryuzakibakura8229

[@Ni_idea_de_tecnologia]

Quizá se no se ejecute porque está fuera de las llaves de la función? Sin el código no se puede comprobar

[@PROGAMERXable]

Porque utilizas datas en vez de clases? no entiendo cuando utilizar los datas :c

[@jonmircha]

Puedes usar lo que gustes

[@monsterleagueescritas]

Me sigue pasando lo mismo con los botones 😭 xd no entiendo porque jaja ya solo uso divs sino no jala xd

[@blueblockgrape4009]

Excelente video :) estoy siguiendo todos los ejercicios, solo tengo una duda en este ejercicio, alguien me podría ayudar? lo que pasa es que al dar el primer clic en el botón de la luna me regresa undefined en la consola, despues si cambia el tema pero el contenido del botón sigue siendo la luna, ¿a alguien más le pasó? ¿alguien sabe cómo solucionarlo? gracias :)

[@jonmircha]

😮

[@mykidneyhurts]

Yo tengo que darle dos clicks para que funcione la primera vez

[@yovanyescobarrojas2041]

buenas yo se que por acá no es el medio pero quisiera que alguien me ayudara, lo que pasa es que quiero guardar en la variable result el resultado de la ejecución de la función pero me da undefined cual puede ser el error muchas gracias comunidad ka les pego el codigo : export function changeColor(bodycolor,selectColor){ let printcolor = document.querySelector(bodycolor); let colores = document.querySelectorAll("[data-color]"); let fondo = ()=>{ colores.forEach(element => { return element.textContent; }); } let result = fondo(); console.log(result); aka me sale undefined }

[@jonmircha]

es más fácil si lo subes a un codepen

[@yovanyescobarrojas2041]

@@jonmircha bueno profe muchas gracias mañana lo hago

[@luisp0160]

@@yovanyescobarrojas2041 y nunca lo subió XD

[@jota4894]

jhostinosorio.github.io/API_countries/ Yo habia desarrollado un dark mode pero el valor de este lo guardaba en el localstorage ya que contenia mas de una pagina

[@jota4894]

Jeje luego de acabar de ver el video, veo que estuvo bien lo que hice xd

[@jonmircha]

:)