Desafí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.
- Cambiar estilos en línea: Cuando se hace clic en el botón:
- Cambiar el color de fondo del
<div>
con IDcard
a"lightblue"
; - Establecer el ancho de la tarjeta en
"300px"
; - Añadir un borde de
2px solid #333
alrededor de la tarjeta.
- Cambiar el color de fondo del
- Alternar una clase de resaltado: Cuando se hace clic en el botón:
- Añadir o quitar la clase
highlight
en el<div>
con IDcard
.
- Añadir o quitar la clase
- 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.
- Añadir o quitar la clase
index.html
index.css
index.js
- Utilizar
style.backgroundColor
para cambiar el color de fondo del<div>
con IDcard
a"lightblue"
; - Utilizar
style.width
para establecer el ancho de la tarjeta en"300px"
; - Utilizar
style.border
para añadir un borde de2px solid #333
alrededor de la tarjeta; - Utilizar
classList.toggle()
para añadir o quitar la clasehighlight
en el<div>
con IDcard
; - Utilizar
classList.toggle()
para añadir o quitar la clasedark-theme
en el<body>
, lo que debe cambiar el tema de la página.
index.html
index.css
index.js
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
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
Desafí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.
- Cambiar estilos en línea: Cuando se hace clic en el botón:
- Cambiar el color de fondo del
<div>
con IDcard
a"lightblue"
; - Establecer el ancho de la tarjeta en
"300px"
; - Añadir un borde de
2px solid #333
alrededor de la tarjeta.
- Cambiar el color de fondo del
- Alternar una clase de resaltado: Cuando se hace clic en el botón:
- Añadir o quitar la clase
highlight
en el<div>
con IDcard
.
- Añadir o quitar la clase
- 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.
- Añadir o quitar la clase
index.html
index.css
index.js
- Utilizar
style.backgroundColor
para cambiar el color de fondo del<div>
con IDcard
a"lightblue"
; - Utilizar
style.width
para establecer el ancho de la tarjeta en"300px"
; - Utilizar
style.border
para añadir un borde de2px solid #333
alrededor de la tarjeta; - Utilizar
classList.toggle()
para añadir o quitar la clasehighlight
en el<div>
con IDcard
; - Utilizar
classList.toggle()
para añadir o quitar la clasedark-theme
en el<body>
, lo que debe cambiar el tema de la página.
index.html
index.css
index.js
¡Gracias por tus comentarios!