## Task
You're building an interactive card that can change its appearance based on user actions. Users can change the background color of the card, resize it, and toggle a "highlighted" state for additional styling.
1. **Change Inline Styles**: When the button is clicked:
   - Change the background color of the `<div>` with ID `card` to `"lightblue"`;
   - Set the width of the card to `"300px"`;
   - Add a `2px solid #333` border around the card.
2. **Toggle a Highlight Class**: When the button is clicked:
   - Add or remove the `highlight` class on the `<div>` with ID `card`.
3. **Add a Dark Theme Class**: When the button is clicked:
   - Add or remove the `dark-theme` class on the `<body>`, which should switch the page's theme.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmN2Y5ZmM7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWFyZ2luOiAwOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpoMiB7CiAgY29sb3I6ICMzMzM7CiAgZm9udC1zaXplOiAxLjVyZW07Cn0KCnAgewogIGNvbG9yOiAjNjY2OwogIGZvbnQtc2l6ZTogMXJlbTsKfQoKI2NhcmQgewogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmMGYwZjA7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7CiAgbWF4LXdpZHRoOiA0MjBweDsKICBtYXJnaW46IDIwcHggYXV0bzsKICBib3JkZXI6IDFweCBzb2xpZCAjZGRkOwp9CgouYnV0dG9uLWNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDE1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbjogNXB4OwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwNTZiMzsKfQoKI2NoYW5nZS1zdHlsZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMxN2EyYjg7Cn0KCiNjaGFuZ2Utc3R5bGUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMTM4NDk2Owp9CgojdG9nZ2xlLWhpZ2hsaWdodC1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICNmZmMxMDc7CiAgY29sb3I6ICMzMzM7Cn0KCiN0b2dnbGUtaGlnaGxpZ2h0LWJ0bjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UwYTgwMDsKfQoKI3RvZ2dsZS10aGVtZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7Cn0KCiN0b2dnbGUtdGhlbWUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjE4ODM4Owp9CgouaGlnaGxpZ2h0IHsKICBib3gtc2hhZG93OiAwcHggMHB4IDE1cHggcmdiYSgyNTUsIDE2NSwgMCwgMC44KTsKICBib3JkZXItY29sb3I6ICNmZmE1MDA7Cn0KCi5kYXJrLXRoZW1lIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiB3aGl0ZTsKfQ==

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuX19fX18gPSAnbGlnaHRibHVlJzsKICBjYXJkLl9fX19fLl9fX19fID0gX19fX187CiAgY2FyZC5fX19fXy5fX19fXyA9IF9fX19fOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0Ll9fX19fKCdoaWdobGlnaHQnKTsKfSk7CgovLyBUb2dnbGUgdGhlIGRhcmsgdGhlbWUgY2xhc3Mgb24gdGhlIGJvZHkKY29uc3QgdG9nZ2xlVGhlbWVCdG4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndG9nZ2xlLXRoZW1lLWJ0bicpOwoKdG9nZ2xlVGhlbWVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgZG9jdW1lbnQuYm9keS5fX19fXy5fX19fXyhfX19fXyk7Cn0pOw==

- Use `style.backgroundColor` to change the background color of the `<div>` with ID `card` to `"lightblue"`;
- Use `style.width` to set the width of the card to `"300px"`;
- Use `style.border` to add a `2px solid #333` border around the card;
- Use `classList.toggle()` to add or remove the `highlight` class on the `<div>` with ID `card`;
- Use `classList.toggle()` to add or remove the `dark-theme` class on the `<body>`, which should switch the page's theme.

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gJ2xpZ2h0Ymx1ZSc7CiAgY2FyZC5zdHlsZS53aWR0aCA9ICczMDBweCc7CiAgY2FyZC5zdHlsZS5ib3JkZXIgPSAnMnB4IHNvbGlkICMzMzMnOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0LnRvZ2dsZSgnaGlnaGxpZ2h0Jyk7Cn0pOwoKLy8gVG9nZ2xlIHRoZSBkYXJrIHRoZW1lIGNsYXNzIG9uIHRoZSBib2R5CmNvbnN0IHRvZ2dsZVRoZW1lQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RvZ2dsZS10aGVtZS1idG4nKTsKCnRvZ2dsZVRoZW1lQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnRvZ2dsZSgnZGFyay10aGVtZScpOwp9KTs=

Master essential JavaScript concepts, including classes, DOM manipulation, event handling, and asynchronous programming. Learn to create dynamic and interactive web applications by managing user interactions, fetching and displaying data, and handling asynchronous operations efficiently. Through a blend of theory, hands-on challenges, and real-world examples, this course equips you with the practical skills needed for modern web development.

Learn the fundamentals of JavaScript classes, from class declarations to defining methods that enhance functionality. Discover how to use parameter objects effectively, manage private properties, and control access with getters and setters. Master static properties and static methods and unlock the power of class inheritance using "extends" and "super()" to build scalable and reusable code.

Master DOM manipulation to create dynamic, interactive web applications. Navigate and modify the DOM's structure, dynamically update content, and implement best practices for security and performance. Differentiate between properties and attributes to optimize your code.

Unlock the interactivity of your web applications by mastering JavaScript events. Understand event propagation, control event behavior, and implement efficient event handling for user interactions. Optimize performance with advanced techniques like event delegation.

Dive into asynchronous JavaScript, including callbacks, Promises, and async/await. Learn how to fetch data from APIs, integrate third-party libraries, and handle multiple requests efficiently, building skills for creating data-driven applications.

Challenge: Apply Dynamic Styles to DOM Elements

Task

Awesome!

Challenge: Apply Dynamic Styles to DOM Elements

Task