Curso JavaScript: 65. DOM: Clases CSS -

En este video te enseño como funcionan las clases #CSS en el #API del #DOM de #JavaScript.
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/...
📖 Mis notas sobre JSON jonmircha.com/...
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal kzbin.info... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
📫 Suscríbete a mi lista de correo tinyletter.com...

[@WillyAntunezVlogs]

Para los compañeros que miren el curso en el futuro les dejo el código css del inicio para que lo copien jeje: .card{ display: inline-block; } .card figcaption{ padding: 1rem; } .rotate-45{ transform: rotate(45deg); } .rotate-135{ transform: rotate(135deg); } .opacity-80{ opacity: .8; } .sepia{ filter: sepia(1); }

[@markocamargobarcenas5178]

Gracias hermano jajaj

[@idaovalle1003]

Gracias!!!!!!!!!!!!!!!11

[@luisvonderbrelje9442]

Vengo del futuro, gracias amigo

[@alexanderg3764]

heroe :)

[@javieralvarez9571]

Grande Willy!

[@ivangerardochilo9837]

Comparto el código CSS del inicio .card{ display: inline-block; background-color: var(--dark-color); color: var(--yellow-color); } .card figcaption{ padding: 1rem; } .rotate-45{ transform: rotate(45deg); } .rotate-135{ transform: rotate(135deg); } .opacity-80{ opacity: .8; } .sepia{ filter: sepia(1); }

[@antonioarias8489]

sos el heroe bro

[@heferh4320]

lo vi muy tarde xd

[@terras06233]

Hasta ahora es el mejor curso de js que he visto. Inclusive es mejor que uno que pague =D

[@jonmircha]

😎✌🏻

[@nachosanabria6942]

sept 11 1969**Nov 14 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

Gracias, saludos👋🏻😉

[@ronaldm.r]

Que bueno que encuentro esta forma de cambiar las clases, anteriormente usaba mucho setAttribute y reescribía la clase que ya tenia un elemento junto a la que le agregaria, buen video Jon!

[@jonmircha]

Gracias :) comparte para llegar a más gente

[@nataliahilarion426]

Wow! definitivamente es el mejor curso de Javacript, siempre veía el toogle, pero no sabía bien como funcionaba, ahora ya me quedo claro, lo usan mucho en los iconos de los menú de las páginas.

[@jonmircha]

😉👍🏻

[@Wiiiiizard]

🧙‍♂Muchas gracias !!!!

[@jonmircha]

Un saludo

[@timawid]

Se ve muy simple, pero es mucho lo que se puede hacer con estos métodos 🙌👏✅

[@jonmircha]

👋🏻😉

[@benjassanchez6699]

El mejor curso :)

[@jonmircha]

👋🏻😉

[@heimancastro1954]

excelente 🤩🤩🤩🤩

[@williamalexanderpineda6098]

Muchas gracias profesor! Excelente vídeo!

[@jonmircha]

Con mucho gusto

[@carlosjavierorozco8418]

Muy bien bastante útil esta clase. Muchas gracias todo me quedo super claro.

[@jonmircha]

Con mucho gusto

[@Ni_idea_de_tecnologia]

Esto si que va cogiendo carrerilla. Muchas gracias Sr. Mircha

[@jonmircha]

Un saludo👋🏻😉

[@cumpaMira]

Gracias profe!

[@elweonweandolaweafome]

muy buena la clase de las clases

[@leonardoprone5967]

Otro gran video Jon !

[@jonmircha]

😉👍🏻

[@ellocote5975]

Nada como un vídeo de tu gran curso después de un día de trabajo Jon; es hasta relajante ya sjasjaj. Saludos máster

[@jonmircha]

👋🏻😉

[@johnherrera5913]

Master! gracias por compartir con nosotros tus conocimientos!

[@jonmircha]

🤗

[@edgarzambrano3505]

Siempre me pregunte como se cambiaba la lunita y el sol en dark y Light, ahora entiendo el metodo toggle muchas gracias profe, como siempre exelente contenido

[@jonmircha]

😉👌🏻

[@instintoimagen]

el mejor curso de #JavaScript

[@jonmircha]

😉🙌🏻

[@nachosanabria6942]

gracias excelente video

[@jonmircha]

😉👍🏻

[@javierovallea3836]

bien buen video.

[@jonmircha]

😉👍🏻

[@davidlionheart2875]

Un detalle profe, al final del video usaste un toggle usando dos parametros "$card.classList.toggle("opacity-80", "sepia");" Sin embargo solo la clase Opacity se agrego y la sepia no se actualizo. Lo que indica que toggle solo se utiliza una por una . No es asi?

[@jonmircha]

sí 😉👍🏻

[@oscarivanguarindiaz1552]

Hola para quienes depronto les guste poner punto y coma (;) después de las llaves {} en css, no lo hagan dentro de la etiqueta porque no les va a funcionar el código... Me paso... Lo siento si es un error de principiantes pero no sabía... Entonces ahi les dejó por si les pasa lo mismo... Buen dia y bendiciones

[@jonmircha]

😉👍🏻

[@carlesbautista8293]

Muchisimas gracias Jonathan, bien explicado y bien entendidio.

[@jonmircha]

De nada!

[@giovannyvanegas88]

Se me ocurren ideas usando toogle y el metodo replace para las clases desde el DOM, simpmenete el mejor instructor y curso de JS. Esto es oro definitivamente

[@jonmircha]

👋🏻😉

[@heferh4320]

setInterval(() => { $card.classList.toggle("rotate-45") },2000); no creo ser el unico en usar toggle y el set interval para cambiar el fondo o estado de un elemento xd buen video como siempre Jon ;)

[@jonmircha]

😉👍🏻

[@GAST0N]

¿Se podría resumir que la forma más práctica para trabajar los estilos dinámicos de CSS con JS, es escribiendo todos los estilos en su hoja (style.css) y con JS solo modificar el nombre de la clase de los elementos? Pongo un ej de código simple para que se entienda. HTML: Texto de ejemplo CSS: .white-title { color: white; } JS: const $LIGHT_TITLE = document.querySelector(".blue-title"); $LIGHT_TITLE.ClassName = "white-title"; ¿Así se hace normalmente en un desarrollo real?

[@jonmircha]

😉👋🏻

[@edgarzambrano3505]

Que buen video

[@jonmircha]

😉👌🏻

[@IsaacGarcia-qq8oq]

💁‍♂💁‍♂muy buena la clase Jon, en la clase mencionas el mode light y mode dark, tu pagina igual la tiene, eso lo hiciste con Js puro? o usaste algo mas??

[@jonmircha]

Mi sitio es Frontend libre de frameworks y librerías jejejeje

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@unciudadanoejemplar816]

Te falto classList.item(), pero creo que lo mencionaras en los futuros videos

[@jonmircha]

🤓👍🏻

[@braianrico4422]

Yo creo que Batman debe saber más de programación que todos nosotros jajaja no se pierde ninguna clase! Bendiciones...🧙‍♂️🧙‍♂️🧙‍♂️🧙‍♂️ posdate: extraño a Kenia jajaja

[@jonmircha]

🤭🦇

[@luis8368]

Hola Jon, gracias por los videos, una consulta como podria cambiar las clases a todos los elementos, xq cuando uso querySelectorAll no me deja usar los metodos add, ni remove

[@jonmircha]

ejecuta un forEach a tu querySelectorAll

[@ishtarandseth]

Hola, yo hice esto, const $cards = document.querySelectorAll(".card"); y para rotarlos todos puse $cards.forEach(a => a.classList.add("rotate-45")); o dejarlos en sepia con opacidad $cards.forEach(a => a.classList.add("opacity-80", "sepia")); Supongo que no es lo mas elegante, pero no supe como aplicar el forEach directamente en el querySelectorAll.

[@matiasromera330]

excelente video Jon de Géminis!

[@jonmircha]

🤣🙌🏻♊

[@sebastianmorales823]

Gracias por el video, profe jon $card.classList.toogle() no admite que hayan varios parametros, solo ejecuta la funcion con el primero, como se puede usar el interruptor con varias clases al tiempo?

[@sebastianmorales823]

profe me di cuenta que toogle tiene es un segundo parametro que es false o true, pero no admite un switcheo multiple

[@jonmircha]

Tienes que hacer un toggle por clase

[@sebastianmorales823]

@@jonmircha exacto profe eso me di cuenta, tal vez deberia hacer un comentario y fijarlo aclarando eso que al final quedo en el video, gracias igualmente profe por la explicacion del video

[@benitoalvarez8032]

Una pregunta queridisimo jonmircHa, NO se pueden usar estos metodos manejando un querySelectorAll? Me manda error en todo

[@jonmircha]

querySelectorAll te trae un NodeList con todos los elementos que coincidan con el selector que le has dato por lo que tendrías que aplicarlo dentro de un forEach para aplicarselo a cada elemento del NodeList o en su defecto indicar el elemento del querySelectorAll al que se lo quieres aplicar algo asi como document.querySelector("a")[2] así le estaríamos diciendo que al tercer enlace le aplique estos métodos

[@benitoalvarez8032]

@@jonmircha Tene verda joncito, muchas gracias mi rey

[@eduardomegoguevara3181]

En mi caso cuando agrego mas elementos a la clase, no se cambie en el DOM

[@jonmircha]

😮

[@christianosorio9239]

Profe, el método toggle solo quita una propiedad a la vez? Estuve probando agregar dos clases y luego quitar las dos clases y no funcionaba pero, de una en una si funciona

[@jonmircha]

Sí, de una en una

[@jackyactayo7375]

Profesor una consulta espero que me responda , me salió todo bacán las clases en HTML, pero cuando pongo las clases en css ya no me funciona ,a qué se debe ,gracias por el video .

[@jonmircha]

Ni idea, así platicado es dificil saber, súbelo a un codepen

[@tongastonga22]

Gracias Jon!! La pagina de las imagenes ya no existe, como puedo buscar paginas similares? Intente buscar pero no me doy cuenta como 😅 gracias nuevamente!

[@jonmircha]

googlea imagenes dummy o algo así, seguro hay sitios

[@tongastonga22]

@@jonmirchaGracias Sensei!

[@rafaelmendez718]

gran vídeo pero tengo una pregunta , en la clase sólo se estuvo modificando la primera imagen la de tecnología ¿ como sería para modificar las demás?, gracias por el contenido

[@jonmircha]

Con calma, vamos paso a paso, sigue el curso ;)

[@rafaelmendez718]

@@jonmircha jeje esta bien , gracias

[@julianpinzon]

misma pregunta ejje

[@julianpinzon]

trate de hacerlo con querySelectorAll(".card") pero no lo logre

[@DiegoGonzalez-ju2xh]

Tengo una pregunta profe, de que manera se considera mejor manejar las css? de esta manera o directamente en los archivos css?, es mas optimo en cuanto a rendimiento?

[@jonmircha]

No te confundas, esto no reemplaza a una hoja CSS, esto es para crear estilos dinámicos, es decir generados por interacciones del usuario

[@emanuelgauna222]

me pasa algo rato en la parte rotate-45 cuando lo añado. y pongo el console.log. me sigue saltando false pero en el html se ve rotada la card a 45 grados

[@emanuelgauna222]

ahi me fije me falto el guion medio. en rotation-45.. lo q el el mundo de la programacion

[@jonmircha]

😉👍🏻

[@martinsaldana3507]

Buenas, tengo una duda, capaz que es muy básica, pero ¿Por qué los cambios se hacen sólo en el primer cuadrito si todos tienen como clase card?

[@jonmircha]

Por que sólo estoy afectando al primero, no a todos

[@martinsaldana3507]

@@jonmircha Está bien, pero ¿Cómo hago para afectar a todos?

[@kikemadrigalr]

@@martinsaldana3507 se me ocurre que esta podría ser una solución a tu duda: const $cards = document.querySelectorAll(".card"); $cards.forEach((card) => card.classList.add("opcity-80", "sepia")); el la primera linea selecciono todos los elementos con la clase card, por eso el nombre de la variable esta en plural. Luego cada elemento y agrego las clases que quieras con el método add

[@martinsaldana3507]

@@kikemadrigalr Genial, me funcionó, había probado algo parecido pero no había funcionado, pero ahora si. Muchas gracias por tu aporte. Saludos.

[@kikemadrigalr]

@@martinsaldana3507 estamos para apoyarnos y aprender.. saludos

[@ratasobreviviendoenlascloa4847]

No pos asi si aprendo orale wey.

[@RochaNahuel]

Mi duda sobre toda esta información a adquirir y aprender , si es tan necesaria , gastar tiempo y memoria ram cerebral ajaja , por que luego me voy a ver maquetando una web y capas que no voy a necesitar nada de esto pero no se ya estoy mareado.

[@davidsalvador3855]

las clases que ponen son como propiedades del css?...vole con eso

[@jonmircha]

;)

[@Xipo_hym]

easy papaaaaa

[@ratasobreviviendoenlascloa4847]

Esta easy poo.

[@ac.developer4459]

Pobre Jquery.

[@jonmircha]

🤭

[@gaytanlugo4821]

a alguien le funcionó el toggle para remover mas de una clase "$card.classList.toggle('opacity-80','sepia')"?

[@Karen-fy7mq]

No! En realidad solo recibe una clase, y el segundo parametro recibe un boolean (puede ser una funcion que retorne verdadero o falso) Ejemplo $card.classList.toggle('text-uppercase', window.innerWidth < 500)