## 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.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0iY2FyZCI+CiAgICAgIDxoMj5JbnRlcmFjdGl2ZSBDYXJkPC9oMj4KICAgICAgPHA+VGhpcyBjYXJkIGNoYW5nZXMgaXRzIHN0eWxlIGR5bmFtaWNhbGx5ITwvcD4KICAgIDwvZGl2PgogICAgPGRpdiBjbGFzcz0iYnV0dG9uLWNvbnRhaW5lciI+CiAgICAgIDxidXR0b24gaWQ9ImNoYW5nZS1zdHlsZS1idG4iPkNoYW5nZSBTdHlsZTwvYnV0dG9uPgogICAgICA8YnV0dG9uIGlkPSJ0b2dnbGUtaGlnaGxpZ2h0LWJ0biI+VG9nZ2xlIEhpZ2hsaWdodDwvYnV0dG9uPgogICAgICA8YnV0dG9uIGlkPSJ0b2dnbGUtdGhlbWUtYnRuIj5Ub2dnbGUgVGhlbWU8L2J1dHRvbj4KICAgIDwvZGl2PgogICAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmN2Y5ZmM7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWFyZ2luOiAwOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpoMiB7CiAgY29sb3I6ICMzMzM7CiAgZm9udC1zaXplOiAxLjVyZW07Cn0KCnAgewogIGNvbG9yOiAjNjY2OwogIGZvbnQtc2l6ZTogMXJlbTsKfQoKI2NhcmQgewogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmMGYwZjA7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7CiAgbWF4LXdpZHRoOiA0MjBweDsKICBtYXJnaW46IDIwcHggYXV0bzsKICBib3JkZXI6IDFweCBzb2xpZCAjZGRkOwp9CgouYnV0dG9uLWNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDE1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbjogNXB4OwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwNTZiMzsKfQoKI2NoYW5nZS1zdHlsZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMxN2EyYjg7Cn0KCiNjaGFuZ2Utc3R5bGUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMTM4NDk2Owp9CgojdG9nZ2xlLWhpZ2hsaWdodC1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICNmZmMxMDc7CiAgY29sb3I6ICMzMzM7Cn0KCiN0b2dnbGUtaGlnaGxpZ2h0LWJ0bjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UwYTgwMDsKfQoKI3RvZ2dsZS10aGVtZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7Cn0KCiN0b2dnbGUtdGhlbWUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjE4ODM4Owp9CgouaGlnaGxpZ2h0IHsKICBib3gtc2hhZG93OiAwcHggMHB4IDE1cHggcmdiYSgyNTUsIDE2NSwgMCwgMC44KTsKICBib3JkZXItY29sb3I6ICNmZmE1MDA7Cn0KCi5kYXJrLXRoZW1lIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiB3aGl0ZTsKfQ==

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuX19fX18gPSAnbGlnaHRibHVlJzsKICBjYXJkLl9fX19fLl9fX19fID0gX19fX187CiAgY2FyZC5fX19fXy5fX19fXyA9IF9fX19fOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0Ll9fX19fKCdoaWdobGlnaHQnKTsKfSk7CgovLyBUb2dnbGUgdGhlIGRhcmsgdGhlbWUgY2xhc3Mgb24gdGhlIGJvZHkKY29uc3QgdG9nZ2xlVGhlbWVCdG4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndG9nZ2xlLXRoZW1lLWJ0bicpOwoKdG9nZ2xlVGhlbWVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgZG9jdW1lbnQuYm9keS5fX19fXy5fX19fXyhfX19fXyk7Cn0pOw==

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

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gJ2xpZ2h0Ymx1ZSc7CiAgY2FyZC5zdHlsZS53aWR0aCA9ICczMDBweCc7CiAgY2FyZC5zdHlsZS5ib3JkZXIgPSAnMnB4IHNvbGlkICMzMzMnOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0LnRvZ2dsZSgnaGlnaGxpZ2h0Jyk7Cn0pOwoKLy8gVG9nZ2xlIHRoZSBkYXJrIHRoZW1lIGNsYXNzIG9uIHRoZSBib2R5CmNvbnN0IHRvZ2dsZVRoZW1lQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RvZ2dsZS10aGVtZS1idG4nKTsKCnRvZ2dsZVRoZW1lQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnRvZ2dsZSgnZGFyay10aGVtZScpOwp9KTs=

Domina los conceptos esenciales de JavaScript, incluyendo clases, manipulación del DOM, manejo de eventos y programación asíncrona. Aprende a crear aplicaciones web dinámicas e interactivas gestionando interacciones de usuario, obteniendo y mostrando datos, y manejando operaciones asíncronas de manera eficiente. A través de una combinación de teoría, desafíos prácticos y ejemplos del mundo real, este curso te proporciona las habilidades prácticas necesarias para el desarrollo web moderno.

Aprenda los fundamentos de las clases en JavaScript, desde las declaraciones de clases hasta la definición de métodos que mejoran la funcionalidad. Descubra cómo utilizar objetos de parámetros de manera eficaz, gestionar propiedades privadas y controlar el acceso mediante getters y setters. Domine las propiedades y métodos estáticos y aproveche el poder de la herencia de clases utilizando "extends" y "super()" para construir código escalable y reutilizable.

Domina la manipulación del DOM para crear aplicaciones web dinámicas e interactivas. Navega y modifica la estructura del DOM, actualiza el contenido de forma dinámica e implementa las mejores prácticas de seguridad y rendimiento. Diferencia entre propiedades y atributos para optimizar tu código.

Desbloquee la interactividad de sus aplicaciones web dominando los eventos en JavaScript. Comprenda la propagación de eventos, controle el comportamiento de los eventos e implemente una gestión eficiente de eventos para las interacciones de usuario. Optimice el rendimiento con técnicas avanzadas como la delegación de eventos.

Profundización en JavaScript asíncrono, incluyendo callbacks, Promesas y async/await. Estudio de la obtención de datos desde APIs, integración de bibliotecas de terceros y gestión eficiente de múltiples solicitudes, desarrollando habilidades para crear aplicaciones orientadas a datos.

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

Tarea

Awesome!

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

Tarea