Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Aplicar Estilos Dinámicos a Elementos del DOM | Manipulación del DOM para el Desarrollo Web Interactivo
Maestría Avanzada en JavaScript

bookDesafío: Aplicar Estilos Dinámicos a Elementos del DOM

Tarea

Se está construyendo una tarjeta interactiva que puede cambiar su apariencia según las acciones del usuario. Los usuarios pueden cambiar el color de fondo de la tarjeta, redimensionarla y alternar un estado de "resaltado" para aplicar estilos adicionales.

  1. Cambiar estilos en línea: Cuando se hace clic en el botón:
    • Cambiar el color de fondo del <div> con ID card a "lightblue";
    • Establecer el ancho de la tarjeta en "300px";
    • Añadir un borde de 2px solid #333 alrededor de la tarjeta.
  2. Alternar una clase de resaltado: Cuando se hace clic en el botón:
    • Añadir o quitar la clase highlight en el <div> con ID card.
  3. Añadir una clase de tema oscuro: Cuando se hace clic en el botón:
    • Añadir o quitar la clase dark-theme en el <body>, lo que debe cambiar el tema de la página.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilizar style.backgroundColor para cambiar el color de fondo del <div> con ID card a "lightblue";
  • Utilizar style.width para establecer el ancho de la tarjeta en "300px";
  • Utilizar style.border para añadir un borde de 2px solid #333 alrededor de la tarjeta;
  • Utilizar classList.toggle() para añadir o quitar la clase highlight en el <div> con ID card;
  • Utilizar classList.toggle() para añadir o quitar la clase dark-theme en el <body>, lo que debe cambiar el tema de la página.
index.html

index.html

index.css

index.css

index.js

index.js

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 13

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you show me how to implement the button that changes the card's appearance?

How should the CSS for the `highlight` and `dark-theme` classes look?

Can you provide a complete example with HTML, CSS, and JavaScript?

Awesome!

Completion rate improved to 2.22

bookDesafío: Aplicar Estilos Dinámicos a Elementos del DOM

Desliza para mostrar el menú

Tarea

Se está construyendo una tarjeta interactiva que puede cambiar su apariencia según las acciones del usuario. Los usuarios pueden cambiar el color de fondo de la tarjeta, redimensionarla y alternar un estado de "resaltado" para aplicar estilos adicionales.

  1. Cambiar estilos en línea: Cuando se hace clic en el botón:
    • Cambiar el color de fondo del <div> con ID card a "lightblue";
    • Establecer el ancho de la tarjeta en "300px";
    • Añadir un borde de 2px solid #333 alrededor de la tarjeta.
  2. Alternar una clase de resaltado: Cuando se hace clic en el botón:
    • Añadir o quitar la clase highlight en el <div> con ID card.
  3. Añadir una clase de tema oscuro: Cuando se hace clic en el botón:
    • Añadir o quitar la clase dark-theme en el <body>, lo que debe cambiar el tema de la página.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilizar style.backgroundColor para cambiar el color de fondo del <div> con ID card a "lightblue";
  • Utilizar style.width para establecer el ancho de la tarjeta en "300px";
  • Utilizar style.border para añadir un borde de 2px solid #333 alrededor de la tarjeta;
  • Utilizar classList.toggle() para añadir o quitar la clase highlight en el <div> con ID card;
  • Utilizar classList.toggle() para añadir o quitar la clase dark-theme en el <body>, lo que debe cambiar el tema de la página.
index.html

index.html

index.css

index.css

index.js

index.js

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 13
some-alt